小程序簡介

小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便(bian)捷地獲(huo)取和傳播，同(tong)時具有出色的使用體驗。

小程序技術發展史

?小程序并非憑空冒出來的一個概念。當微(wei)信中的 WebView 逐漸成(cheng)為移動 Web 的一個重要入口時，微(wei)信就有相關的 JS API 了(le)。

代碼(ma)清單(dan)1-1 使用 WeixinJSBridge 預覽(lan)圖片

WeixinJSBridge.invoke('imagePreview', {
    current: '//inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有圖片(pian)的(de)URL列表，數組格式
        '//img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        '//img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        '//img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

?代碼1-1是(shi)一個調用微信(xin)原生組件(jian)瀏覽圖(tu)片(pian)的JS API，相比于額外引入一個JS圖(tu)片(pian)預覽組件(jian)庫，這種調用方式顯得(de)非常簡潔(jie)和高效。

?實際上(shang)，微(wei)(wei)信官方是(shi)沒有對外暴露過如此(ci)調用(yong)(yong)的(de)，此(ci)類 API 最(zui)初是(shi)提供給(gei)騰訊內部(bu)一(yi)些(xie)業務使用(yong)(yong)，很多外部(bu)開(kai)發(fa)者發(fa)現了(le)之后，依葫蘆(lu)畫瓢地使用(yong)(yong)了(le)，逐漸成(cheng)(cheng)為(wei)微(wei)(wei)信中網頁的(de)事實標準。2015年初，微(wei)(wei)信發(fa)布了(le)一(yi)整套網頁開(kai)發(fa)工具包(bao)，稱之為(wei) JS-SDK，開(kai)放了(le)拍攝(she)、錄音(yin)、語音(yin)識別(bie)、二維碼(ma)、地圖(tu)、支(zhi)付、分(fen)享、卡券等幾十個(ge)API。給(gei)所有的(de) Web 開(kai)發(fa)者打開(kai)了(le)一(yi)扇全新的(de)窗戶，讓所有開(kai)發(fa)者都(dou)可(ke)以使用(yong)(yong)到(dao)(dao)微(wei)(wei)信的(de)原生能力，去完成(cheng)(cheng)一(yi)些(xie)之前做不到(dao)(dao)或者難以做到(dao)(dao)的(de)事情。

同樣是調用原生的(de)瀏覽(lan)圖片，調用方式如代(dai)碼清單1-2所示。

代碼清單1-2 使用(yong) JS-SDK 調用(yong)圖片預(yu)覽(lan)組(zu)件

wx.previewImage({
  current: '//img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所(suo)有(you)圖片的URL列表，數組(zu)格(ge)式(shi)
    '//img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    '//img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    '//img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

?JS-SDK是對之前的(de) WeixinJSBridge 的(de)一個包裝，以及新能力的(de)釋放，并且由(you)對內開(kai)(kai)放轉為了對所有開(kai)(kai)發(fa)者開(kai)(kai)放，在很短(duan)的(de)時間(jian)內獲得了極大(da)的(de)關注。從數據(ju)監控來看，絕大(da)部(bu)分(fen)在微信內傳播的(de)移動(dong)網頁都(dou)使用到(dao)了相關的(de)接口(kou)。

?JS-SDK 解決了(le)移(yi)(yi)動網(wang)頁(ye)能力(li)不足(zu)的(de)(de)(de)問題(ti)，通過暴露微(wei)信(xin)的(de)(de)(de)接口使得 Web 開發者能夠擁有(you)(you)更多的(de)(de)(de)能力(li)，然而在(zai)更多的(de)(de)(de)能力(li)之外，JS-SDK 的(de)(de)(de)模式并沒有(you)(you)解決使用(yong)移(yi)(yi)動網(wang)頁(ye)遇到的(de)(de)(de)體驗不良的(de)(de)(de)問題(ti)。用(yong)戶(hu)在(zai)訪問網(wang)頁(ye)的(de)(de)(de)時候，在(zai)瀏覽器開始顯示之前都會有(you)(you)一(yi)(yi)個白屏的(de)(de)(de)過程，在(zai)移(yi)(yi)動端(duan)，受限(xian)于設備性能和(he)網(wang)絡速度，白屏會更加明顯。我們(men)(men)團隊把(ba)很(hen)多技術精力(li)放置在(zai)如何幫助(zhu)平臺上(shang)的(de)(de)(de)Web開發者解決這個問題(ti)。因此(ci)我們(men)(men)設計(ji)了(le)一(yi)(yi)個 JS-SDK 的(de)(de)(de)增強版(ban)本，其中有(you)(you)一(yi)(yi)個重要的(de)(de)(de)功能，稱(cheng)之為(wei)“微(wei)信(xin) Web 資(zi)源離線(xian)存儲”。

?以(yi)下文(wen)字引用(yong)自內部的文(wen)檔（沒(mei)有最(zui)終對外開放(fang)）：

微信 Web 資源離線存儲(chu)是面向 Web 開發者提供的基于微信內的 Web 加速方(fang)案。

通過使用微信離(li)線存儲(chu)(chu)，Web 開發者可(ke)借助(zhu)微信提供的(de)資(zi)源(yuan)存儲(chu)(chu)能(neng)力，直接從微信本地加載 Web 資(zi)源(yuan)而不需(xu)要再從服務端(duan)拉取，從而減少網(wang)頁(ye)加載時間，為微信用戶提供更優質的(de)網(wang)頁(ye)瀏覽體驗。每個公眾號下(xia)所有 Web App 累計(ji)最多可(ke)緩(huan)存 5M 的(de)資(zi)源(yuan)。

?這個(ge)設(she)計有點類似 HTML5 的(de) Application Cache，但在設(she)計上規避了一些 Application Cache的(de)不足(zu)。

?在內部測試中，我們發(fa)現 離(li)線存儲 能夠解決(jue)一些(xie)問(wen)(wen)題，但對于一些(xie)復雜的頁面(mian)依(yi)然會有白屏(ping)問(wen)(wen)題，例如頁面(mian)加載了大量的 CSS 或者是 JavaScript 文件(jian)。?除了白屏(ping)，影響 Web 體驗的問(wen)(wen)題還有缺少操作的反饋(kui)，主要表現在兩(liang)個(ge)方面(mian)：頁面(mian)切換的生硬和點(dian)擊的遲滯(zhi)感(gan)。

?微(wei)信面臨的(de)(de)問題是如何設(she)計一個比較(jiao)(jiao)好的(de)(de)系統，使得所(suo)有開發(fa)者在微(wei)信中都(dou)(dou)能獲得比較(jiao)(jiao)好的(de)(de)體驗(yan)。這個問題是之前的(de)(de) JS-SDK 所(suo)處理不了的(de)(de)，需要一個全新的(de)(de)系統來完成，它需要使得所(suo)有的(de)(de)開發(fa)者都(dou)(dou)能做到(dao)：

- 快速的加載

- 更強大的能力

- 原生的體驗

- 易用且(qie)安全的微信數據開(kai)放

- 高效和簡單的開發

這就是(shi)小程(cheng)序的由來。

小程序與普(pu)通網頁開發的區別

?小程(cheng)序(xu)(xu)的(de)(de)主(zhu)要開發(fa)語言是 JavaScript ，小程(cheng)序(xu)(xu)的(de)(de)開發(fa)同普通的(de)(de)網(wang)頁開發(fa)相比有很大的(de)(de)相似性。對于前端(duan)開發(fa)者而言，從網(wang)頁開發(fa)遷移(yi)到小程(cheng)序(xu)(xu)的(de)(de)開發(fa)成本并不高，但是二者還是有些許區別的(de)(de)。

?網頁開發渲染(ran)(ran)線程和腳本線程是(shi)互斥的(de)，這(zhe)也是(shi)為(wei)什么(me)長(chang)時(shi)間的(de)腳本運(yun)行(xing)(xing)可能會導(dao)致頁面(mian)失去(qu)響應，而(er)(er)在(zai)小程序中，二者(zhe)是(shi)分(fen)開的(de)，分(fen)別(bie)運(yun)行(xing)(xing)在(zai)不同的(de)線程中。網頁開發者(zhe)可以使用到各(ge)種瀏覽(lan)器暴露出來(lai)的(de) DOM API，進(jin)行(xing)(xing) DOM 選中和操作。而(er)(er)如上文所述，小程序的(de)邏(luo)輯層和渲染(ran)(ran)層是(shi)分(fen)開的(de)，邏(luo)輯層運(yun)行(xing)(xing)在(zai) JSCore 中，并沒有一(yi)個完整(zheng)瀏覽(lan)器對象，因而(er)(er)缺少相(xiang)關(guan)的(de)DOM API和BOM API。這(zhe)一(yi)區別(bie)導(dao)致了前端開發非常熟悉的(de)一(yi)些(xie)庫(ku)，例(li)如 jQuery、 Zepto 等，在(zai)小程序中是(shi)無法運(yun)行(xing)(xing)的(de)。同時(shi) JSCore 的(de)環(huan)境(jing)同 NodeJS 環(huan)境(jing)也是(shi)不盡相(xiang)同，所以一(yi)些(xie) NPM 的(de)包在(zai)小程序中也是(shi)無法運(yun)行(xing)(xing)的(de)。

?網頁開(kai)發(fa)(fa)者需(xu)(xu)要面(mian)對(dui)的(de)(de)(de)環境是各(ge)式各(ge)樣的(de)(de)(de)瀏(liu)覽器(qi)，PC 端需(xu)(xu)要面(mian)對(dui) IE、Chrome、QQ瀏(liu)覽器(qi)等，在移動端需(xu)(xu)要面(mian)對(dui)Safari、Chrome以及(ji) iOS、Android 系(xi)統中的(de)(de)(de)各(ge)式 WebView 。而(er)小(xiao)(xiao)程序(xu)開(kai)發(fa)(fa)過(guo)程中需(xu)(xu)要面(mian)對(dui)的(de)(de)(de)是兩大(da)操作系(xi)統 iOS 和 Android 的(de)(de)(de)微信客(ke)戶端，以及(ji)用于輔助開(kai)發(fa)(fa)的(de)(de)(de)小(xiao)(xiao)程序(xu)開(kai)發(fa)(fa)者工具，小(xiao)(xiao)程序(xu)中三大(da)運(yun)行環境也(ye)是有所區別的(de)(de)(de)，如表1-1所示。

表1-1 小程序的運行(xing)環境

運(yun)行環境 邏輯(ji)層(ceng) 渲染層(ceng)

iOS

JavaScriptCore

WKWebView

安卓

V8

chromium定(ding)制內核

小程序開發者工具

NWJS

Chrome WebView

?網頁(ye)開(kai)發(fa)者(zhe)在(zai)開(kai)發(fa)網頁(ye)的時候，只需要使用到瀏覽器，并且搭配(pei)(pei)上一些輔助工(gong)具(ju)或(huo)者(zhe)編輯器即可。小(xiao)(xiao)程(cheng)序(xu)的開(kai)發(fa)則有所(suo)不同(tong)，需要經過申請小(xiao)(xiao)程(cheng)序(xu)賬號、安裝小(xiao)(xiao)程(cheng)序(xu)開(kai)發(fa)者(zhe)工(gong)具(ju)、配(pei)(pei)置項目等(deng)等(deng)過程(cheng)方可完成(cheng)。

體驗小程序

開發者可使用微信客(ke)戶端(6.7.2 及以(yi)上版本)掃碼下方小程(cheng)序碼，體驗小程(cheng)序。

查看小程序示例源碼