小(xiǎo)程序技術發展史

小(xiǎo)程序并非憑空(kōng)冒出來(lái)的一個概念。當微信中的 WebView 逐漸成爲移動 Web 的一個重要入口時(shí)，微信就有相關的 JS API 了(le)。

代碼清單1-1 使用(yòng) WeixinJSBridge 預覽圖片

WeixinJSBridge.invoke('imagePreview', {

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

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

'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òng)微信原生組件浏覽圖片的JS API，相比于額外(wài)引入一個JS圖片預覽組件庫，這(zhè)種調用(yòng)方式顯得非常簡潔和(hé)高(gāo)效。

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

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

代碼清單1-2 使用(yòng) JS-SDK 調用(yòng)圖片預覽組件

wx.previewImage({

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

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

'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是對(duì)之前的 WeixinJSBridge 的一個包裝，以及新能(néng)力的釋放(fàng)，并且由對(duì)内開(kāi)放(fàng)轉爲了(le)對(duì)所有開(kāi)發者開(kāi)放(fàng)，在很(hěn)短的時(shí)間内獲得了(le)極大(dà)的關注。從(cóng)數據監控來(lái)看(kàn)，絕大(dà)部分在微信内傳播的移動網頁都使用(yòng)到(dào)了(le)相關的接口。

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

​以下(xià)文(wén)字引用(yòng)自(zì)内部的文(wén)檔（沒有最終對(duì)外(wài)開(kāi)放(fàng)）：

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

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

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

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

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

- 快(kuài)速的加載

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

- 原生的體驗

- 易用(yòng)且安全的微信數據開(kāi)放(fàng)

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

這(zhè)就是小(xiǎo)程序的由來(lái)。