全部小程序開(kāi)發(fā) 技術(shù)文庫(kù) 設(shè)計(jì)知識(shí) HTML知識(shí) APP開(kāi)發(fā) 優(yōu)化推廣

小程序簡(jiǎn)介及小程序技術(shù)發(fā)展史

標(biāo)簽：訪問(wèn)： 70062020-05-07

小程序簡(jiǎn)介

小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。

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

小程序并非憑空冒出來(lái)的一個(gè)概念。當(dāng)微信中的 WebView 逐漸成為移動(dòng) Web 的一個(gè)重要入口時(shí)，微信就有相關(guān)的 JS API 了。

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

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有圖片的URL列表，數(shù)組格式
        '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)})

代碼1-1是一個(gè)調(diào)用微信原生組件瀏覽圖片的JS API，相比于額外引入一個(gè)JS圖片預(yù)覽組件庫(kù)，這種調(diào)用方式顯得非常簡(jiǎn)潔和高效。

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

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

代碼清單1-2 使用 JS-SDK 調(diào)用圖片預(yù)覽組件

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有圖片的URL列表，數(shù)組格式
    '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是對(duì)之前的 WeixinJSBridge 的一個(gè)包裝，以及新能力的釋放，并且由對(duì)內(nèi)開(kāi)放轉(zhuǎn)為了對(duì)所有開(kāi)發(fā)者開(kāi)放，在很短的時(shí)間內(nèi)獲得了極大的關(guān)注。從數(shù)據(jù)監(jiān)控來(lái)看，絕大部分在微信內(nèi)傳播的移動(dòng)網(wǎng)頁(yè)都使用到了相關(guān)的接口。

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

以下文字引用自內(nèi)部的文檔（沒(méi)有最終對(duì)外開(kāi)放）：

微信 Web 資源離線存儲(chǔ)是面向 Web 開(kāi)發(fā)者提供的基于微信內(nèi)的 Web 加速方案。
通過(guò)使用微信離線存儲(chǔ)，Web 開(kāi)發(fā)者可借助微信提供的資源存儲(chǔ)能力，直接從微信本地加載 Web 資源而不需要再?gòu)姆?wù)端拉取，從而減少網(wǎng)頁(yè)加載時(shí)間，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁(yè)瀏覽體驗(yàn)。每個(gè)公眾號(hào)下所有 Web App 累計(jì)最多可緩存 5M 的資源。

這個(gè)設(shè)計(jì)有點(diǎn)類似 HTML5 的 Application Cache，但在設(shè)計(jì)上規(guī)避了一些 Application Cache的不足。

在內(nèi)部測(cè)試中，我們發(fā)現(xiàn) 離線存儲(chǔ) 能夠解決一些問(wèn)題，但對(duì)于一些復(fù)雜的頁(yè)面依然會(huì)有白屏問(wèn)題，例如頁(yè)面加載了大量的 CSS 或者是 JavaScript 文件。除了白屏，影響 Web 體驗(yàn)的問(wèn)題還有缺少操作的反饋，主要表現(xiàn)在兩個(gè)方面：頁(yè)面切換的生硬和點(diǎn)擊的遲滯感。

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

- 快速的加載

- 更強(qiáng)大的能力

- 原生的體驗(yàn)

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

- 高效和簡(jiǎn)單的開(kāi)發(fā)

這就是小程序的由來(lái)。

小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別

小程序的主要開(kāi)發(fā)語(yǔ)言是 JavaScript ，小程序的開(kāi)發(fā)同普通的網(wǎng)頁(yè)開(kāi)發(fā)相比有很大的相似性。對(duì)于前端開(kāi)發(fā)者而言，從網(wǎng)頁(yè)開(kāi)發(fā)遷移到小程序的開(kāi)發(fā)成本并不高，但是二者還是有些許區(qū)別的。

網(wǎng)頁(yè)開(kāi)發(fā)渲染線程和腳本線程是互斥的，這也是為什么長(zhǎng)時(shí)間的腳本運(yùn)行可能會(huì)導(dǎo)致頁(yè)面失去響應(yīng)，而在小程序中，二者是分開(kāi)的，分別運(yùn)行在不同的線程中。網(wǎng)頁(yè)開(kāi)發(fā)者可以使用到各種瀏覽器暴露出來(lái)的 DOM API，進(jìn)行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開(kāi)的，邏輯層運(yùn)行在 JSCore 中，并沒(méi)有一個(gè)完整瀏覽器對(duì)象，因而缺少相關(guān)的DOM API和BOM API。這一區(qū)別導(dǎo)致了前端開(kāi)發(fā)非常熟悉的一些庫(kù)，例如 jQuery、 Zepto 等，在小程序中是無(wú)法運(yùn)行的。同時(shí) JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同，所以一些 NPM 的包在小程序中也是無(wú)法運(yùn)行的。

網(wǎng)頁(yè)開(kāi)發(fā)者需要面對(duì)的環(huán)境是各式各樣的瀏覽器，PC 端需要面對(duì) IE、Chrome、QQ瀏覽器等，在移動(dòng)端需要面對(duì)Safari、Chrome以及 iOS、Android 系統(tǒng)中的各式 WebView 。而小程序開(kāi)發(fā)過(guò)程中需要面對(duì)的是兩大操作系統(tǒng) iOS 和 Android 的微信客戶端，以及用于輔助開(kāi)發(fā)的小程序開(kāi)發(fā)者工具，小程序中三大運(yùn)行環(huán)境也是有所區(qū)別的，如表1-1所示。

表1-1 小程序的運(yùn)行環(huán)境

運(yùn)行環(huán)境	邏輯層	渲染層
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制內(nèi)核
小程序開(kāi)發(fā)者工具	NWJS	Chrome WebView

網(wǎng)頁(yè)開(kāi)發(fā)者在開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可。小程序的開(kāi)發(fā)則有所不同，需要經(jīng)過(guò)申請(qǐng)小程序帳號(hào)、安裝小程序開(kāi)發(fā)者工具、配置項(xiàng)目等等過(guò)程方可完成。