# 小程序簡介
小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗。
## 小程序技術發展史
?小程序并非憑空冒出來的一個概念。當微信中的 ?`WebView`?逐漸成為移動 Web 的一個重要入口時,微信就有相關的 ?`JS API`? 了。
代碼清單1-1 使用 ?`WeixinJSBridge`? 預覽圖片
~~~
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)
})
~~~
?代碼1-1是一個調用微信原生組件瀏覽圖片的?`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`?是對之前的 ?`WeixinJSBridge`? 的一個包裝,以及新能力的釋放,并且由對內開放轉為了對所有開發者開放,在很短的時間內獲得了極大的關注。從數據監控來看,絕大部分在微信內傳播的移動網頁都使用到了相關的接口。
?`?JS-SDK`? 解決了移動網頁能力不足的問題,通過暴露微信的接口使得 Web 開發者能夠擁有更多的能力,然而在更多的能力之外,JS-SDK 的模式并沒有解決使用移動網頁遇到的體驗不良的問題。用戶在訪問網頁的時候,在瀏覽器開始顯示之前都會有一個的白屏過程,在移動端,受限于設備性能和網絡速度,白屏會更加明顯。我們團隊把很多技術精力放置在如何幫助平臺上的 Web 開發者解決這個問題。因此我們設計了一個 ?`JS-SDK`? 的增強版本,其中有一個重要的功能,稱之為“微信 Web 資源離線存儲”。
?以下文字引用自內部的文檔(沒有最終對外開放):
> 微信 Web 資源離線存儲是面向 Web 開發者提供的基于微信內的 Web 加速方案。通過使用微信離線存儲,Web 開發者可借助微信提供的資源存儲能力,直接從微信本地加載 Web 資源而不需要再從服務端拉取,從而減少網頁加載時間,為微信用戶提供更優質的網頁瀏覽體驗。每個公眾號下所有 Web App 累計最多可緩存 5M 的資源。
?這個設計有點類似 HTML5 的 ?`Application Cache`?,但在設計上規避了一些 ?`Application Cache`?的不足。
?在內部測試中,我們發現 離線存儲 能夠解決一些問題,但對于一些復雜的頁面依然會有白屏問題,例如頁面加載了大量的 CSS 或者是 JavaScript 文件。?除了白屏,影響 Web 體驗的問題還有缺少操作的反饋,主要表現在兩個方面:頁面切換的生硬和點擊的遲滯感。
?微信面臨的問題是如何設計一個比較好的系統,使得所有開發者在微信中都能獲得比較好的體驗。這個問題是之前的?`JS-SDK`? 所處理不了的,需要一個全新的系統來完成,它需要使得所有的開發者都能做到:
\- 快速的加載
\- 更強大的能力
\- 原生的體驗
\- 易用且安全的微信數據開放
\- 高效和簡單的開發
這就是小程序的由來。
## 小程序與普通網頁開發的區別
?小程序的主要開發語言是 JavaScript ,小程序的開發同普通的網頁開發相比有很大的相似性。對于前端開發者而言,從網頁開發遷移到小程序的開發成本并不高,但是二者還是有些許區別的。
?網頁開發渲染線程和腳本線程是互斥的,這也是為什么長時間的腳本運行可能會導致頁面失去響應,而在小程序中,二者是分開的,分別運行在不同的線程中。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API,進行 DOM 選中和操作。而如上文所述,小程序的邏輯層和渲染層是分開的,邏輯層運行在 JSCore 中,并沒有一個完整瀏覽器對象,因而缺少相關的 DOM API 和 BOM API。這一區別導致了前端開發非常熟悉的一些庫,例如 jQuery、 Zepto 等,在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同,所以一些 NPM 的包在小程序中也是無法運行的。
?網頁開發者需要面對的環境是各式各樣的瀏覽器,PC 端需要面對 IE、Chrome、QQ 瀏覽器等,在移動端需要面?對? Safari ????、Chrome 以及 iOS、Android 系統中的各式 WebView 。而小程序開發過程中需要面對的是兩大操作系統 iOS 和 Android 的微信客戶端,以及用于輔助開發的小程序開發者工具,小程序中三大運行環境也是有所區別的,如表1-1所示。
表1-1 小程序的運行環境
| **運行環境** | **邏輯層** | **渲染層** |
| --- | --- | --- |
| iOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | chromium定制內核 |
| 小程序開發者工具 | NWJS | Chrome WebView |
?網頁開發者在開發網頁的時候,只需要使用到瀏覽器,并且搭配上一些輔助工具或者編輯器即可。小程序的開發則有所不同,需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等等過程方可完成。
## 體驗小程序
開發者可使用微信客戶端(6.7.2 及以上版本)掃碼下方小程序碼,體驗小程序。
查看小程序示例源碼:關注公眾號-查看小程序案例

- 惠惠軟件-開發自助學習系統
- 一.微信公眾號(服務號)申請流程
- 二.申請所需提前準備資料
- 三.認證微信公眾號:申請微信小程序流程
- 四.微信小程序安裝和開發環境
- 五.微信小程序如何上傳、提交審核、發布操作
- 六.微信小程序開發教程手冊
- 0.1微信小程序 小程序簡介
- 0.2微信小程序 開始第一步
- 0.3微信小程序 小程序代碼構成
- 0.4微信小程序 小程序宿主環境
- 0.5微信小程序 小程序協同工作和發布
- 0.6微信小程序 目錄結構
- 0.7微信小程序 全局配置
- 0.8微信小程序 頁面配置
- 0.9微信小程序 sitemap配置
- 0.10微信小程序 場景值
- 0.11微信小程序 注冊小程序
- 0.12微信小程序 注冊頁面
- 0.13微信小程序 頁面生命周期
- 0.14微信小程序 頁面路由
- 0.15微信小程序 模塊化
- 0.16微信小程序 API
- 0.17微信小程序 運行環境
- 0.18微信小程序 JavaScript支持情況
- 0.19微信小程序 運行機制
- 0.20微信小程序 更新機制
- 0.21微信小程序 廣告·Banner 廣告
- 0.22微信小程序 安全指引·開發原則與注意事項
- 0.23微信小程序 調試
- 0.24微信小程序 啟動性能
- 0.25微信小程序 運行時性能
- 0.26微信小程序 性能分析工具
- 0.27微信小程序 體驗評分
- 八.小程序的美工
- 8.1圖片大小
- 8.2顏色代碼
- 8.3小程序的美工技巧
- 九.微信小程序-定制開發
- 十.微信支付申請流程
- 十一.小程序支付對接流程
- 十二.微信小程序使用中常見問題匯總
- 十二.小程序開發中遇到的問題—匯總
- 十四.小程序問題及解決
- 十五.網站開發定制
- 1.開發定制流程
- 2.搭建網站的過程
- 3.做網站基本費用
- 4.服務器選什么系統更好?
- 十六.常用工具、軟件網站推薦