小程序技術(shù)發展史

小程序并非憑空冒出來的一(yī)個概念。當微(wēi)信中的 WebView 逐漸成為(wèi)移動 Web 的一(yī)個重要(yào)入口時(shí)，微(wēi)信就有相關的 JS API 了(le)。

代碼清單1-1 使用 WeixinJSBridge 預覽圖片

WeixinJSBridge.invoke('imagePreview', {

current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',

urls: [ // 所有圖片的URL列表，數(shù)組格式

'static/picture/10485731_980x1200_0.jpg',

'static/picture/10485726_980x1200_0.jpg',

'static/picture/10485729_980x1200_0.jpg'

]

}, function(res) {

console.log(res.err_msg)

})

​代碼1-1是一(yī)個調用微(wēi)信原生組件浏覽圖片的JS API，相比于額外(wài)引入一(yī)個JS圖片預覽組件庫，這(zhè)種調用方式顯得非常簡潔和(hé)高效。

​實際上(shàng)，微(wēi)信官方是沒有對外(wài)暴露過如(rú)此調用的，此類 API 最初是提供給騰訊內(nèi)部一(yī)些業務使用，很(hěn)多外(wài)部開(kāi)發者發現了(le)之後，依葫蘆畫(huà)瓢地(dì)使用了(le)，逐漸成為(wèi)微(wēi)信中網頁的事實标準。2015年(nián)初，微(wēi)信發布了(le)一(yī)整套網頁開(kāi)發工(gōng)具包，稱之為(wèi) JS-SDK，開(kāi)放了(le)拍攝、錄音、語音識别、二維碼、地(dì)圖、支付、分享、卡券等幾十個API。給所有的 Web 開(kāi)發者打開(kāi)了(le)一(yī)扇全新的窗戶，讓所有開(kāi)發者都(dōu)可(kě)以使用到微(wēi)信的原生能(néng)力，去完成一(yī)些之前做(zuò)不到或者難以做(zuò)到的事情。

同樣是調用原生的浏覽圖片，調用方式如(rú)代碼清單1-2所示。

代碼清單1-2 使用 JS-SDK 調用圖片預覽組件

wx.previewImage({

current: 'static/picture/10485726_980x1200_0.jpg',

urls: [ // 所有圖片的URL列表，數(shù)組格式

'static/picture/10485731_980x1200_0.jpg',

'static/picture/10485726_980x1200_0.jpg',

'static/picture/10485729_980x1200_0.jpg'

],

success: function(res) {

console.log(res)

}

})

​JS-SDK是對之前的 WeixinJSBridge 的一(yī)個包裝，以及新能(néng)力的釋放，并且由對內(nèi)開(kāi)放轉為(wèi)了(le)對所有開(kāi)發者開(kāi)放，在很(hěn)短的時(shí)間(jiān)內(nèi)獲得了(le)極大的關注。從(cóng)數(shù)據監控來看(kàn)，絕大部分在微(wēi)信內(nèi)傳播的移動網頁都(dōu)使用到了(le)相關的接口。

​JS-SDK 解決了(le)移動網頁能(néng)力不足的問(wèn)題，通(tōng)過暴露微(wēi)信的接口使得 Web 開(kāi)發者能(néng)夠擁有更多的能(néng)力，然而在更多的能(néng)力之外(wài)，JS-SDK 的模式并沒有解決使用移動網頁遇到的體驗不良的問(wèn)題。用戶在訪問(wèn)網頁的時(shí)候，在浏覽器開(kāi)始顯示之前都(dōu)會有一(yī)個白屏的過程，在移動端，受限于設備性能(néng)和(hé)網絡速度，白屏會更加明(míng)顯。我們團隊把很(hěn)多技術(shù)精力放置在如(rú)何幫助平台上(shàng)的Web開(kāi)發者解決這(zhè)個問(wèn)題。因此我們設計了(le)一(yī)個 JS-SDK 的增強版本，其中有一(yī)個重要(yào)的功能(néng)，稱之為(wèi)“微(wēi)信 Web 資源離線存儲”。

​以下(xià)文字引用自(zì)內(nèi)部的文檔（沒有最終對外(wài)開(kāi)放）：

微(wēi)信 Web 資源離線存儲是面向 Web 開(kāi)發者提供的基于微(wēi)信內(nèi)的 Web 加速方案。

通(tōng)過使用微(wēi)信離線存儲，Web 開(kāi)發者可(kě)借助微(wēi)信提供的資源存儲能(néng)力，直接從(cóng)微(wēi)信本地(dì)加載 Web 資源而不需要(yào)再從(cóng)服務端拉取，從(cóng)而減少(shǎo)網頁加載時(shí)間(jiān)，為(wèi)微(wēi)信用戶提供更優質的網頁浏覽體驗。每個公衆号下(xià)所有 Web App 累計最多可(kě)緩存 5M 的資源。

​這(zhè)個設計有點類似 HTML5 的 Application Cache，但(dàn)在設計上(shàng)規避了(le)一(yī)些 Application Cache的不足。

​在內(nèi)部測試中，我們發現 離線存儲 能(néng)夠解決一(yī)些問(wèn)題，但(dàn)對于一(yī)些複雜(zá)的頁面依然會有白屏問(wèn)題，例如(rú)頁面加載了(le)大量的 CSS 或者是 JavaScript 文件。​除了(le)白屏，影響 Web 體驗的問(wèn)題還有缺少(shǎo)操作(zuò)的反饋，主要(yào)表現在兩個方面：頁面切換的生硬和(hé)點擊的遲滞感。

​微(wēi)信面臨的問(wèn)題是如(rú)何設計一(yī)個比較好的系統，使得所有開(kāi)發者在微(wēi)信中都(dōu)能(néng)獲得比較好的體驗。這(zhè)個問(wèn)題是之前的 JS-SDK 所處理不了(le)的，需要(yào)一(yī)個全新的系統來完成，它需要(yào)使得所有的開(kāi)發者都(dōu)能(néng)做(zuò)到：

- 快(kuài)速的加載

- 更強大的能(néng)力

- 原生的體驗

- 易用且安全的微(wēi)信數(shù)據開(kāi)放

- 高效和(hé)簡單的開(kāi)發

這(zhè)就是小程序的由來。