10分鐘瞭解微信小程序

小程序包含一個描述總體程序的`app` + 描述各自頁面的`page`。

小程序是什麼

用戶收到微信公衆號推送的文章，是在微信內部直接打開的，用的是一個UIWebView，當微信中的WebView 逐漸成爲移動web的入口，微信就有了相關的js api。

微信官方在裏面加了一個默認的JS API -- WeixinJSBridge，經過它能夠在頁面上進行相關操做：

• 將文章分享到微信朋友圈
• 將文章直接發送給微信好友
• 關注指定用戶
• 獲取微信用戶的頭像和暱稱

JS-SDK 是對 WeixinJSBridge 的包裝，以及新能力的釋放，將對內開放轉爲對外開放。解決了移動網頁能力不足的問題，經過暴露微信接口使得web開發者溶有更多的能力。

瀏覽器顯示以前會有一個白屏的過程，在移動端，受制於設備性能和網絡速度。 微信離線資源存儲 ，相似於`HTML5 的 Application Cache` 面向web開發者，提供基於微信內的web加速方案。經過離線存儲，微信本地加載web資源不須要從昂服務端拉取，從而減小網頁加載時間，提供更加優質的瀏覽體驗。

而對於一些複雜的頁面依舊會出現白屏問題，例如頁面加載了大量的css或者js文件，除了白屏影響web體驗的問題，還有操做反饋的缺陷，體如今：頁面切換生硬和點擊遲滯感。

小程序的優點

頁面渲染方式有三種

1. Web 渲染。

2. Native 原生渲染。

3. Web 與 Native 二者摻雜，也即咱們常說的 Hybrid 渲染。

小程序最終的呈現形式，是 WebView + 原生組件，Hybrid 方式。咱們結合以前對小程序的指望來看：

• 開發門檻：Web 門檻低，不過 Native 也有像 RN 這樣的框架支持

• 體驗：Native 體驗比 Web 不要好太多，Hybrid 在必定程度上比 Web 接近原生體驗

• 版本更新：Web 支持在線更新，Native 則須要打包到微信一塊兒審覈發佈

• 管控和安全：Web 可跳轉或是改變頁面內容，存在一些不可控因素和安全風險

總地看來，小程序選擇了 Hybrid 的渲染方式，能夠用一種近似 Web 的方式來開發，而且還能夠實如今線更新代碼。同時，引入原生組件有如下好處：

• 擴展 Web 的能力。好比像輸入框組件（input, textarea）有更好地控制鍵盤的能力

• 體驗更好，同時也減輕 WebView 的渲染工做

• 繞過 setData、數據通訊和重渲染流程，使渲染性能更好

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

區別主要體如今如下3方面：

• 語言
• DOM/BOM操做
• 環境、平臺兼容

小程序主要開發語言是js，和普通網頁具備很大類似性。對於前端開發者來講，從網頁開發遷移到小程序成本不高。

可是​網頁開發渲染線程和腳本線程是互斥的，這也是爲何長時間的腳本運行可能會致使頁面失去響應，而 小程序將二者分開，運行在不一樣線程中，邏輯層運行在JSCore中，並無完整的瀏覽器對象，所以缺乏DOM API和BOM API 。這一區別致使一些庫jQuery/Zepto等，在小程序中無法運行。另外JSCode環境和NodeJS環境不一樣，因此一些NPM包在小程序中沒法運行。

咱們可使用客戶端系統的 JavaScript 引擎，iOS 下的 JavaScriptCore 框架，安卓下騰訊 x5 內核提供的 JsCore 環境。經過提供一個沙箱環境來運行開發者的 JavaScript 代碼來解決。這個沙箱環境只提供純 JavaScript 的解釋執行環境，沒有任何瀏覽器相關接口。

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

小程序運行環境：

身份識別

小程序的 AppID 至關於小程序平臺的一個身份證

文件說明 developers.weixin.qq.com/miniprogram…

頁面組成

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：

一個小程序頁面由四個文件組成，分別是：

json配置

json是一種數據格式，並非編程語言，在小程序中，json扮演的靜態配置角色。

1） 小程序配置

app.json 是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等

2）工具配置

每一個項目的根目錄都會生成一個 project.config.json 用於進行個性化配置，例如界面顏色、編輯配置等，切換另一個電腦不須要從新配置。

3）頁面配置

page.json 單獨定義每一個頁面的屬性，好比頂部顏色、是否容許下拉刷新等

WXML模版

html是用來描述當前頁面的結構，css描述樣子，js處理頁面和用戶交互邏輯。

WXML和HTML的區別

• 標籤名
• 特殊屬性，避免操做dom

小程序對經常使用的組件進行包裝，提升開發效率。另外，當項目愈來愈大的時候，你的代碼會充斥着很是多的界面交互邏輯和程序的各類狀態變量，顯然這不是一個很好的開發模式，所以就有了 MVVM 的開發模式（例如 React, Vue），提倡把渲染和邏輯分離。簡單來講就是不要再讓 JS 直接操控 DOM， JS 只須要管理狀態便可，而後再經過一種模板語法來描述狀態和界面結構的關係便可。因而就多了一些`wx:if`這樣的屬性以及這樣的表達式來響應用戶行爲

WXSS和CSS區別

• 新增了尺寸單位rpx
• 提供了全局的樣式和局部樣式
• 僅支持部分 CSS 選擇器

開發者須要考慮到收集設備到屏幕會有不一樣的寬度和設備像素比，採用一些技巧來換算。WXSS在底層支持新的尺寸單位rpx，免去換算煩惱。浮點運算，可能會存在誤差

小程序宿主環境

微信客戶端給小程序提供的環境叫宿主環境，小程序藉助宿主環境分紅渲染層和邏輯層，其中WXML和WXSS樣式工做在渲染層，JS腳本工做在邏輯層。

小程序的渲染層和邏輯層分別由2個線程管理： 渲染層的界面使用了WebView 進行渲染；邏輯層採用JsCore線程運行JS腳本。一個小程序存在多個界面，因此渲染層存在多個WebView線程，這兩個線程的 通訊會經由微信客戶端（下文中也會採用Native來代指微信客戶端）作中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通訊模型下圖所示。

邏輯層和渲染層的通訊會由 Native （微信客戶端）作中轉，邏輯層發送網絡請求也經由 Native 轉發。

Exparser 框架

Exparser 是微信小程序的組件組織框架，內置在小程序基礎庫中，爲小程序的各類組件提供基礎的支持。小程序內的全部組件，包括內置組件和自定義組件，都由 Exparser 組織管理。Exparser 特色包括：

1. 基於 Shadow DOM 模型：模型上與 WebComponents 的 ShadowDOM 高度類似，但不依賴瀏覽器的原生支持，也沒有其餘依賴庫；實現時，還針對性地增長了其餘 API 以支持小程序組件編程。

2. 可在純 JS 環境中運行：這意味着邏輯層也具備必定的組件樹組織能力。

3. 高效輕量：性能表現好，在組件實例極多的環境下表現尤爲優異，同時代碼尺寸也較小。

其餘小程序框架及其對比

• mpvue

mpvue 繼承自 Vue.js，其技術規範和語法特色與 Vue.js 保持一致。支持 微信小程序、百度智能小程序，頭條小程序 和 支付寶小程序。 框架基於 Vue.js，修改了的運行時框架 runtime 和代碼編譯器 compiler 實現，使其可運行在小程序環境中，從而爲小程序開發引入了 Vue.js 開發體驗。

快速上手教程 ：mpvue.com/mpvue/quick…

能力：

1. 完全的組件化開發能力：提升代碼複用性
2. 完整的 Vue.js 開發體驗
3. 方便的 Vuex 數據管理方案：方便構建複雜應用
4. 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
5. 支持使用 npm 外部依賴
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
7. H5 代碼轉換編譯成小程序目標代碼的能力

• Taro

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。現現在市面上端的形態多種多樣，Web、React-Native、微信小程序等各類端大行其道，當業務要求同時在不一樣的端都要求有所表現的時候，針對不一樣的端去編寫多套代碼的成本顯然很是高，這時候只編寫一套代碼就可以適配到多端的能力就顯得極爲須要。

•  支持使用 npm/yarn 安裝管理第三方依賴。
•  支持使用 ES7/ES8 甚至更加新的 ES 規範，一切均可自行配置。
•  支持使用 CSS 預編譯器，例如 Sass 等。
•  支持使用 Redux 進行狀態管理。
•  支持使用 Mobx 進行狀態管理。
•  小程序 API 優化，異步 API Promise 化等等。

Taro 相對來講是個不錯的選擇，社區的活躍度以及反饋都是遠遠超過其餘競品的，另外也支持編譯爲多端小程序（其實還能編譯成 React Native 和 H5）。惟一的問題應該是限制了你必須使用 React 技術棧。

• WePY 

是小程序上最先的一款類 Vue 語法的開發框架。WePY 2 是基於小程序原生組件實現組件化開發。所以 WePY 2 支持的最低版本小程序基礎庫爲 1.6.3。

WePY 2 的設計思想

1. 非侵入式設計 WePY 2 運行於小程序之上，是對小程序原有能力的封裝和優化，並不會對原有小程序框架有任何改動或者影響。

2. 兼容原生代碼 可以兼容原生代碼，即部分頁面爲原生，部分頁面爲 WePY。同時作到無需任何改動便可引用現有原生開發的小程序組件。

3. 基於小程序原生組件實現組件化開發 小程序原生組件在性能上相較以前有了很大的提高。所以 WePY 2 徹底基於小程序原生組件實現，不支持小程序基礎庫 < 1.6.3 的版本。

4. 基於 Vue Observer 實現數據綁定 數據綁定基於 Vue Observer 實現，同時爲其定製小程序特有的優化。

5. 更優的可擴展性 對於 core 庫提供 mixin、hooks、use 等方式進行開發擴展，對於 cli 編譯工具提供更強大的插件機制方便開發者能夠侵入到編譯的任何一個階段進行個性化定製的編譯。