小程序技術發展歷史

時間 2019-11-10

原文原文鏈接

1.2.1 小程序技術發展歷史

從技術的維度看，小程序並不是憑空冒出來的一個概念。當微信中的 WebView 逐漸成爲移動 Web 的一個重要入口時，微信就有相關的 JS API 了。javascript

一些開發者應該對下面的代碼有印象：前端

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

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

這是一個調用微信原生組件瀏覽圖片的JS API，相比於額外引入一個JS圖片預覽組件庫，這種調用方式顯得很是簡潔和高效。小程序

實際上，微信官方是沒有對外暴露過如此調用的，此類 API 最初是提供給騰訊內部一些業務使用，不少外部開發者發現了以後，依葫蘆畫瓢地使用了，逐漸成爲微信中網頁的事實標準。數組

2015年初，微信發佈了一整套網頁開發工具包，稱之爲 JS-SDK，開放了拍攝、錄音、語音識別、二維碼、地圖、支付、分享、卡券等幾十個API。給全部的 Web 開發者打開了一扇全新的窗戶，讓全部開發者均可以使用到微信的原生能力，去完成一些以前作不到或者難以作到的事情了。瀏覽器

一樣是調用原生的瀏覽圖片，調用方式如代碼清單1-2所示。緩存

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

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

JS-SDK是對以前的 WeixinJSBrige 的一個包裝，以及新能力的釋放，而且由對內開放轉爲了對全部開發者開放，在很短的時間內得到了極大的關注。從數據監控來看，絕大部分在微信內傳播的移動網頁都使用到了相關的接口。微信

JS-SDK 解決了移動網頁能力不足的問題，經過暴露微信的接口使得 Web 開發者可以擁有更多的能力，然而在更多的能力以外，JS-SDK 的模式並無解決使用移動網頁遇到的體驗不良的問題。網絡

--注：JSSDK的問題是體驗不良。（對於產品型公司（或者一些大公司）來講，因爲用戶衆多，用戶體驗是產品很是重要的一方面)

用戶在訪問網頁的時候，在瀏覽器開始顯示以前都會有一個的白屏過程，在移動端，受限於設備性能和網絡速度，白屏會更加明顯。咱們團隊把不少技術精力放置在如何幫助平臺上的Web開發者解決這個問題。所以咱們設計了一個 JS-SDK 的加強版本，其中有一個重要的功能，稱之爲「微信 Web 資源離線存儲」。

如下文字引用自內部的文檔（沒有最終對外開放）：

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

經過使用微信離線存儲，Web 開發者可藉助微信提供的資源存儲能力，直接從微信本地加載 Web 資源而不須要再從服務端拉取，從而減小網頁加載時間，爲微信用戶提供更優質的網頁瀏覽體驗。每一個公衆號下全部 Web App 累計最多可緩存 5M 的資源。

這個設計有點相似 HTML5 的 Application Cache，但在設計上規避了一些 Application Cache的不足。

在內部測試中，咱們發現離線存儲可以解決了一些問題，可是對於一些複雜的頁面依然會有白屏的問題，例如頁面加載了大量的 CSS 或者是 JavaScript 文件，這些文件的執行時間佔用了大量的 UI 線程，這種時候，即便經過離線存儲快速的加載資源，可是依舊會有頁面的白屏現象，同時這樣分文件的 Cache 在處理代碼文件更新的時候操做較爲繁雜，對開發者的要求較高。

除了白屏，影響 Web 體驗的問題還有缺乏操做的反饋，主要表如今兩個方面：頁面切換的生硬和點擊的遲滯感。

對於一些有經驗的 Web開發者而言，會使用一些 SPA 的框架，來模擬客戶端原生的頁面切換過渡。一般的方式是在一個 WebView 中去模擬多個頁面，經過 CSS 處理，加之精細化的腳本代碼作到點擊反饋和頁面切換，得到較好的體驗。然而並非全部的開發者都有足夠的時間和精力來使得頁面的體驗變得出色。

微信面臨的問題是如何設計一個比較好的系統，使得全部開發者在微信中都能得到比較好的體驗。這個問題是以前的 JS-SDK 所處理不了的，須要一個全新的系統來完成，它須要使得全部的開發者都能作到：

- 快速的加載

- 更強大的能力

- 原生的體驗

- 易用且安全的微信數據開放

- 高效和簡單的開發

這一系統就是本書中須要詳細闡述的小程序。

1.2.2 小程序與普通網頁開發的區別

小程序的主要開發語言是 JavaScript ，因此一般小程序的開發會被用來同普通的網頁開發來作對比。二者有很大的類似性，對於前端開發者而言，從網頁開發遷移到小程序的開發成本並不高，可是兩者仍是有些許區別的。

網頁開發渲染線程和腳本線程是互斥的，這也是爲何長時間的腳本運行可能會致使頁面失去響應（這個是根本緣由），而在小程序中，兩者是分開的，分別運行在不一樣的線程中。網頁開發者可使用到各類瀏覽器暴露出來的 DOM API，進行 DOM 選中和操做。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，並無一個完整瀏覽器對象，於是缺乏相關的DOM API和BOM API。這一區別致使了前端開發很是熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是沒法運行的。（因爲沒法操做DOM，如何解決這個問題，新的技術架構帶來什麼問題。）同時 JSCore 的環境同 NodeJS 環境也是不盡相同，因此一些 NPM 的包在小程序中也是沒法運行的。

網頁開發者須要面對的環境是各式各樣的瀏覽器，PC 端須要面對 IE、Chrome、QQ瀏覽器等，在移動端須要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。而小程序開發過程當中須要面對的是兩大操做系統 iOS 和 Android 的微信客戶端，以及用於輔助開發的小程序開發者工具，小程序中三大運行環境也是有所區別的，如表1-1所示。

表1-1 小程序的運行環境