**微信小程序(miniprogram)概述** [TOC] ## 1 微信小程序(miniprogram)簡介 一個網頁主要 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 是用來處理這個頁面和用戶的交互。小程序的頁面跟這個完全相同 ，不一樣的就是改了個名字 。 | miniprogram | Web | | --- | --- | | \*.wxml | \*.html | | \*.wxss | \*.css | | \*.js | \*.js | ## 2 官方文檔 ### 2.1 [官方簡易教程](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getting-started.html) ### 2.2 [官方教程指引](https://developers.weixin.qq.com/home?action=get_specific_blog_list&lang=zh_CN&token=&blogcategory=4) ### 2.3 [官方開發指南](https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=0008aeea9a8978ab0086a685851c0a) ## 3 構成 ### 3.1 框架 - **視圖層**：`*.wxml`文件和`*.wxss`文件 - **邏輯層**：`*.js`文件 - **數據傳輸和事件系統** 框架提供了自己的視圖層描述語言`WXML`(類比HTML) 和 `WXSS`（類比CSS），以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦于數據與邏輯上。 ### 3.2 組件 ### 3.3 API 2015年初，微信發布了一整套網頁開發工具包，稱之為 JS-SDK，開放了拍攝、錄音、語音識別、二維碼、地圖、支付、分享、卡券等幾十個API。給所有的 Web 開發者打開了一扇全新的窗戶，讓所有開發者都可以使用到微信的原生能力，去完成一些之前做不到或者難以做到的事情了。 JS-SDK是對之前的 WeixinJSBrige 的一個包裝，以及新能力的釋放，并且由對內開放轉為了對所有開發者開放，在很短的時間內獲得了極大的關注。從數據監控來看，絕大部分在微信內傳播的移動網頁都使用到了相關的接口。 JS-SDK 解決了移動網頁能力不足的問題，通過暴露微信的接口使得 Web 開發者能夠擁有更多的能力，然而在更多的能力之外，JS-SDK 的模式并沒有解決使用移動網頁遇到的體驗不良的問題。 ### 3.4 微信開發者工具 [微信開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，集成了公眾號網頁調試和小程序調試兩種開發模式。 雖然在開發語言層面小程序與傳統的網頁差別不大：是使用JavaScript 腳本語言編寫邏輯代碼、使用類似于HTML的WXML來描述頁面的結構、使用類似于CSS的WXSS來描述節點的樣式，但是由于小程序渲染和邏輯分離的運行機制與傳統的網頁存在差異，所以無法使用傳統的網頁的開發調試工具，因此我們推出了小程序開發生態一站式IDE——微信開發者工具。開發者可以借助微信開發者工具完成小程序的代碼開發、編譯運行、界面和邏輯調試、真機預覽和提交發布版本等功能。 - 使用公眾號網頁調試 開發者可以調試微信網頁授權和微信JS-SDK - 使用小程序調試， 開發者可以完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發布等功能。 還可以， 1. 使用騰訊云，快速搭建小程序后臺運行環境； 2. 申請測試報告，了解小程序在真實的移動設備上運行性能和運行效果。 注意：因為申請測試會占用測試機器資源，所以一個 APPID 一天只能申請一次測試報告。 ### 3.5 騰訊云 ## 4 小程序與普通網頁開發的區別 小程序的主要開發語言是 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 | | 安卓 | X5 JSCore | X5瀏覽器 | | 小程序開發者工具 | NWJS | Chrome WebView| 網頁開發者在開發網頁的時候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可。小程序的開發則有所不同，需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等等過程方可完成。 ## 5 小程序的特色 - 普通用戶 小程序實現了應用的觸手可及，只需要通過掃描二維碼、搜索或者是朋友的分享就可以直接打開，加上優秀的體驗，小程序使得服務提供者的觸達能力變得更強。 - 開發者 小程序框架本身所具有的快速加載和快速渲染能力，加之配套的云能力、運維能力和數據匯總能力，使得開發者不需要去處理瑣碎的工作，可以把精力放置在具體的業務邏輯的開發上。 - 小程序的模式 使得微信可以開放更多的數據，開發者可以獲取到用戶的一些基本信息，甚至能夠獲取微信群的一些信息，使得小程序的開放能力變得更加強大。