什么是微信小程序
騰訊公司于2016年9月21日開始微信小程序內測,一時間小程序的討論熱度不斷。網絡上流傳一張張小龍的朋友圈,給了小程序的定義:小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念,用戶不用關心是否安裝太多應用的問題。應用將無處不在,隨時可用,但又無需安裝卸載。
(圖片來源于網絡)
小程序的本質是第三方開發者將前端展示交互層以微信的標準發布到騰訊云服務,為了達到更加豐富的效果,騰訊提供了豐富的組件和API。按照上面的理解,微信小程序同蘋果的App Store如出一轍,只是使用的技術不同,App Store是第三方客戶端運行在蘋果的操作系統中,而小程序是第三方頁面運行在騰訊的微信APP中。
小程序的推出并非毫無征兆,早在2016年1月的微信公開課上,微信之父張小龍就透露微信即將推出應用號。甚至在更早的PC時代,騰訊就曾推出WebQQ,用戶可以通過PC瀏覽器訪問WebQQ,通過QQ賬號登錄WebQQ可使用應用市場中的各類在線服務,從而引發了關于騰訊WebOS概念的討論。WebQQ發展的結果不是很好,不但是因為受制于當時網絡速度、PC計算性能等基礎條件制約,還與PC用戶對專業性、多樣性要求較高但Web模式很難滿足有關。不同的是,微信小程序用完即走的理念,十分符合移動互聯網用戶使用時間碎片化的特點。因此,業內普遍看好小程序的前景,小程序引發了極高的關注度。
要用小程序做什么
微信小程序SWOT分析
基于微信的技術文檔分析,微信小程序能覆蓋大部分的APP常用功能,只是目前的API列表還不支持與指紋、藍牙等依賴硬件的接口。小程序有這么大的開放性和完成度,作為一個企業,應該用小程序實現什么業務??筆者這里對小程序做了SWOT分析,來得出結論。
優勢Strenths:
1.無需安裝、隨用隨點:對比于APP,用戶使用成本更低,無需下載安裝,通過搜索、掃碼、搖一搖、點擊分享等形式(目前微信小程序入口形式還未公布,按照筆者對微信的理解,大概為上面幾種)即可達到類APP的體驗。在Android系統中,若騰訊將微信小程序圖標發布到操作系統桌面中,可令用戶幾乎分辨不出原生APP與小程序。
2.跨平臺開發:微信APP已屏蔽了IOS和Android的差異,在相同版本的微信APP下,開發者無需關心操作系統的類型與版本,一套代碼可滿足各平臺需求。
3.豐富的組件和API:
a)Websocket:支持瀏覽器與服務器全雙工通信
b)視圖組件:按鈕、表單、彈窗、導航、媒體、地圖、畫布等
c)多媒體支持:圖片、音頻、視頻、文件等
d)數據緩存:可通過同步或異步接口對本地緩存進行設置、獲取和清理
e)硬件支持:可獲得陀螺儀、羅盤等數據信息
f)微信開放接口:微信登錄、微信用戶信息、微信支付、模板消息等
劣勢Threats:
1.客戶端計算能力不及APP:因微信小程序使用H5技術,代碼運行環境為webkit引擎,無法運行復雜的大型計算,某些場景無法支持。
2.不支持第三方插件:無法向PC瀏覽器、手機客戶端那樣安裝或嵌入編譯好的第三方插件,無法以插件的形式提供安全的密碼控件。
機會Opportunities:
1.巨大流量入口:微信作為國內裝機量最大的APP,月活用戶已超過8億,微信朋友圈用戶粘度很高,利于小程序的推廣使用。
2.技術較為成熟:小程序所需技能點為html+js+css,相關技術從業人員廣、技術成熟,開發上手容易,學習成本低。
3.滿足客戶新鮮感體驗:微信小程序剛剛推出,網絡討論熱度高,部分用戶會出于嘗鮮心理體驗小程序。
威脅Threats:
1.數據安全性較低:小程序的編寫語言為解釋執行語言,發布小程序需把源碼發布到騰訊服務器,運行環境為微信APP內嵌瀏覽器,開發者需對騰訊的信任級別達到操作系統級別。
2.自由度受制于微信:接口和權限均依賴于微信及其API,小程序能實現的功能場景,完全依賴于微信APP提供的能力。小程序的開發自由度是沒有native app高的。
3.對自家APP造成沖擊:因為小程序良好的體驗和強大的可擴展性,客戶容易分流,對自家APP的裝機量和使用時長造成沖擊。
SWOT分析
民生銀行微信小程序可以做什么
基于上面的SWOT分析結果,小程序適合做低頻、剛需、不涉及客戶重要密碼的場景,比如便民服務、營銷獲客、投資顧問、查賬還款等,并借助微信的廣大客戶群容易快速獲得流量,將流量引導到手機銀行高頻的實用場景中,反哺自有渠道的發展。小程序是基于瘦客戶端的移動互聯網渠道,可定位為現有微信銀行的延伸和手機銀行的補充。對于涉及客戶賬戶的金融類服務,尤其是涉及密碼的動賬場景,謹慎在小程序中做。
微信端的密碼控件之路
現有方案:
基于目前的接口,微信小程序可復用公眾號頁面的密碼控件解決方案——H5密碼鍵盤。其原理是用H5在密碼輸入框周圍繪出動態密碼鍵盤,連續捕捉動態密碼鍵盤的點擊事件,通過js方法對密碼鍵盤的輸入結果和密鑰、動態隨機數等因子計算得出密文,然后傳到服務端驗密。但受限于js的解釋執行性質,H5密碼鍵盤安全級別并沒有APP版本和PC瀏覽器插件版本的高。
暢想方案:
微信小程序第一版的API是支持音頻錄音和上傳錄音文件的。原理上,是可以通過音頻key或外置音頻密碼鍵盤記錄形成密文音頻,客戶端可將音頻文件上傳至服務器端解析驗證。但因小程序不支持客戶端對數據文件的解析,而服務器端對音頻文件的集中處理亦不實用。
結合外置音頻密碼鍵盤或音頻key的想法,可以建議騰訊發布一套公用的音頻信息解析標準并配有相應native獲取解析結果的方法,開發者可按照騰訊的標準定制專屬密碼鍵盤或音頻key。此方案中,外置密碼鍵盤負責記錄密碼的輸入,結合密碼因子加密成音頻信號,微信小程序提供API負責將音頻解碼成密文,這樣就能解決渠道方截取密碼的問題。
微信小程序技術介紹
技術框架
小程序的技術框架命名MINA,意思是MINA IS?NOT APP。MINA程序包含一個描述整體程序的app和多個描述各自頁面的page。
MINA提供給開發者的方式也在發生全面的改變,從操作DOM轉為操作數據,基于微信提供的一個過橋工具實現很多h5在公眾號很難實現的功能,有點類似于hybrid開發,不同于hybrid開發的方式是:微信開放的接口更為嚴謹,結構必須采用他提供給我們的組件,外部的框架和插件都不能在這里使用上,讓開發者完全脫離操作DOM,開發思想轉變很大。
文件目錄
每個子頁面可包括4個文件:
1.WXML:(WeiXin?Markup Language)是MINA設計的一套標簽語言,結合基礎組件、事件系統,可以構建出頁面的結構。與HTML類似,WXML也采用了聲明式結構,具體作用和HTML一樣構造頁面結構。不過從變現形式來看WXML更加類似于XML。WXML提供了數據綁定、列表渲染、條件渲染、模板、事件這些能力。
2.WXSS:(WeiXin?Style Sheets)是MINA設計的一套樣式語言,用于描述WXML的組件樣式。WXSS類似于CSS,都是用來控制頁面元素的樣式。微信官方稱WXSS具備CSS的大部分特性,這點和React Native以及Weex一樣,都是CSS的子集,但是具備哪些CSS特性官方并沒有公布。除此之外,WXSS還引入了樣式單位這個概念。
3.JSON:項目的結構和一些項目配置
4.JS:頁面邏輯
微信UI匹配的基礎組件
2016年1月20日微信官方團隊便開源了WeUI這套UI組件,隨著微信小程序的推出,WeUI也發布了1.0 Release。微信小程序提供的組件就是基于WeUI演進而來的。基礎組件分為以下八大類:
視圖容器(View Container):
view?視圖容器
scroll-view?可滾動視圖容器
swiper?可滑動的視圖容器
基礎內容(Basic Content):
icon?圖標
text?文字
progress?進度條
表單(Form):
button?按鈕
form?表單
input?輸入框
checkbox?單項選擇器
radio?多項選擇器
picker?列表選擇器
slider?滑動選擇器
switch?開關選擇器
label?標簽
操作反饋(Interaction):
action-sheet?上拉菜單
modal?模態彈窗
toast?短通知
導航(Navigation):
navigator?應用內跳轉
多媒體(Media):
audio?音頻
image?圖片
video?視頻
地圖(Map):
map?地圖
畫布(Canvas):
canvas?畫布
調用底層功能的API
微信小程序提供了豐富的微信原生API,可以方便的調起微信提供的能力。具體API如下:
網絡API列表
wx.request發起網絡請求
wx.uploadFile上傳文件
wx.downloadFile下載文件
wx.connectSocket創建WebSocket連接
wx.onSocketOpen監聽WebSocket打開
wx.onSocketError監聽WebSocket錯誤
wx.sendSocketMessage發送WebSocket消息
wx.onSocketMessage接受WebSocket消息
wx.closeSocket關閉WebSocket連接
wx.onSocketClose監聽WebSocket關閉
媒體API列表
wx.chooseImage從相冊選擇圖片,或者拍照
wx.previewImage預覽圖片
wx.startRecord開始錄音
wx.stopRecord結束錄音
wx.playVoice播放語音
wx.pauseVoice暫停播放語音
wx.stopVoice結束播放語音
wx.getBackgroundAudioPlayerState獲取音樂播放狀態
wx.playBackgroundAudio播放音樂
wx.pauseBackgroundAudio暫停播放音樂
wx.seekBackgroundAudio控制音樂播放進度
wx.stopBackgroundAudio停止播放音樂
wx.onBackgroundAudioPlay監聽音樂開始播放
wx.onBackgroundAudioStop監聽音樂結束
wx.chooseVideo從相冊選擇視頻,或者拍攝
wx.saveFile保存文件
數據API列表
wx.getStorage獲取本地數據緩存
wx.setStorage設置本地數據緩存
wx.clearStorage清理本地數據緩存
位置API列表
wx.getLocation獲取當前位置
wx.openLocation打開內置地圖
設備API列表
wx.getNetworkType獲取網絡類型
wx.getSystemInfo獲取系統信息
wx.onAccelerometerChange監聽重力感應數據
wx.onCompassChange監聽羅盤數據
界面API列表
wx.setNavigationBarTitle設置當前頁面標題
wx.showNavigationBarLoading顯示導航條加載動畫
wx.hideNavigationBarLoading隱藏導航條加載動畫
wx.navagateTo新窗口打開頁面
wx.redirectTo原窗口打開頁面
wx.navagateBack退回上一個頁面
wx.createAnimation動畫
wx.createContext創建繪圖上下文
wx.drawCanvas繪圖
wx.hideKeyboard隱藏鍵盤
wx.stopPullDownRefresh停止下拉刷新動畫
開放接口
wx.login登錄
wx.getUserInfo獲取用戶信息
wx.requestPayment發起微信支付
lDE——微信開發者工具
生命周期函數
下圖說明了Page實例的生命周期。
詳細基礎組件和API列表請參考微信小程序官方API文檔:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=1474644083871
結論
1.微信小程序給我們提供了一個新的線上服務渠道,還不能完全替代APP;
2.微信小程序本質是web應用,可以在手機web實施的,都可以在小程序實施;
3.微信提供了一套非常完整的基礎組件及豐富的API接口,并且封裝效果十分好,很大的提升了開發人員的開發效率(必須具備一定的前端水平);
4.微信小程序因為并不能跑在微信應用里,所以性能到底如何還是個未知數;
5.微信小程序適合做低頻、剛需、不涉及重要密碼的場景,并引流到自有APP;
6.微信小程序的開發模式必須完全遵守官方的規范,且和現有的前端框架不兼容,會帶來學習及開發成本(不排除日后官方或社區推出各種XXX轉微信小應用的工具);
7.微信小程序的模式,給我們客戶端開發平臺和前端開發框架帶來新的設計思路:平臺組可著重完善與業務無關的native app部分,并開放豐富的API列表;交付組基于API進行具體業務功能的開發。