微信小程序 小程序簡介

小程序簡介

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

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

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

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

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是一個調用微信原生組件瀏覽圖片的?JS API?，相比于額外引入一個?JS?圖片預覽組件庫，這種調用方式顯得非常簡潔和高效。

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

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

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

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?是對之前的 ?WeixinJSBridge? 的一個包裝，以及新能力的釋放，并且由對內開放轉為了對所有開發(fā)者開放，在很短的時間內獲得了極大的關注。從數(shù)據(jù)監(jiān)控來看，絕大部分在微信內傳播的移動網(wǎng)頁都使用到了相關的接口。

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

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

微信 Web 資源離線存儲是面向 Web 開發(fā)者提供的基于微信內的 Web 加速方案。通過使用微信離線存儲，Web 開發(fā)者可借助微信提供的資源存儲能力，直接從微信本地加載 Web 資源而不需要再從服務端拉取，從而減少網(wǎng)頁加載時間，為微信用戶提供更優(yōu)質的網(wǎng)頁瀏覽體驗。每個公眾號下所有 Web App 累計最多可緩存 5M 的資源。

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

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

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

- 快速的加載

- 更強大的能力

- 原生的體驗

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

- 高效和簡單的開發(fā)

這就是小程序的由來。

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

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

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

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

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

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

體驗小程序

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

查看小程序示例源碼