小程式 與 App 與 H5 之間的區別
小程式的實現原理
根據微信官方的說明，微信小程式的執行環境有 3 個平臺，iOS 的 WebKit（蘋果開源的瀏覽器核心），Android 的 X5 (QQ 瀏覽器核心)，開發時用的 nw.js（C++ 實現的 web 轉桌面應用）。
平臺渲染js 執行環境
iOSWKWebViewJavaScriptCore
AndroidX5 基於 Mobile Chrome 37 核心X5 JSCore
開發工具Chrome WebViewnw.js
小程式執行時會建立兩個執行緒：View Thread 和 AppService Thread，相互隔離，通過橋接協議 WeixinJsBridage 進行通訊（包括 setData 呼叫、canvas 指令和各種 DOM 事件）。
下述表格展示了兩個執行緒的區別：
執行緒名稱所屬模組執行程式碼原理說明
View檢視層WXML/WXSSWebView 渲染wxml 編譯器把 wxml 檔案轉為 js 並構建 virtual dom；wxss 編譯器把 wxss 檔案轉化為 js。
AppService邏輯層JSJavascriptCore 執行無法訪問 window / document 物件
兩個執行緒是通過系統層的 JSBridage 來通訊的，邏輯層把資料變化通知到檢視層，觸發檢視層頁面更新，檢視層把觸發的事件通知到邏輯層進行業務處理。
小程式與 App 的區別
執行環境
原生 App 直接執行在作業系統的單獨程序中（在 Android 中還可以開啟多程序），而小程式只能執行在微信的程序中。
開發成本
原生 App 的開發涉及到 Android/iOS 多個平臺、開發工具、開發語言、不同裝置的適配等問題；而小程式只需要開發一個就可以在 Android/iOS 等不同平臺不同裝置上執行。
原生 App 需要在商店上架（Android 需要上架各種商店）；小程式只能在微信平臺釋出。
系統許可權
原生 App 呼叫的是系統資源，也就是說系統提供給開發的的 API 都可以使用；而小程式是基於微信的，小程式所有的功能都受限於微信，也就是說微信給開發者提供 API 才可以使用，不能繞過微信直接使用系統提供的 API。
原生 App 可以給使用者推送訊息；小程式不允許主動給使用者傳送訊息，只能回覆模版訊息 。
原生 App 有獨立的資料庫，可以做離線儲存；小程式只能儲存到 LocalStorage，無法做離線儲存。
原生 App 需要下載，安裝包比較大；小程式無需下載，可以通過小程式碼等方式通過微信直接開啟。
執行流暢度
原生 App 執行在作業系統中，所有的原生元件可以直接呼叫 GPU 進行渲染；而小程式執行在微信的程序中，只能通過 WebView 進行渲染。
小程式與 H5 的區別
執行環境
簡單來說，小程式是一種應用，執行的環境是微信（App）；H5 是一種技術，依附的外殼是是瀏覽器。
H5 的執行環境是瀏覽器，包括 WebView，而微信小程式的執行環境並非完整的瀏覽器，因為小程式的開發過程中只用到一部分H5 技術。
小程式的執行環境是微信開發團隊基於瀏覽器核心完全重構的一個內建解析器，針對性做了優化，配合自己定義的開發語言標準，提升了小程式的效能。
小程式中無法使用瀏覽器中常用的 window 物件和 document 物件，H5 可以隨意使用。
開發成本
H5 的開發，涉及開發工具（vscode、Atom等）、前端框架（Angular、react等）、模組管理工具（Webpack 、Browserify 等）、任務管理工具（Grunt、Gulp等），還有 UI 庫選擇、介面呼叫工具（ajax、Fetch Api等）、瀏覽器相容性等等。
儘管這些工具可定製化非常高，大部分開發者也有自己的配置模板，但對於專案中各種外部庫的版本迭代、版本升級，這些成本加在一起那就是個不小數目了。
而開發一個微信小程式，由於微信團隊提供了開發者工具，並且規範了開發標準，則簡單得多。前端常見的 HTML、CSS 變成了微信自定義的 WXML、WXSS，官方文件中都有明確的使用介紹，開發者按照說明專注寫程式就可以了。
需要呼叫後端介面時，呼叫發起請求API；需要上傳下載時，呼叫上傳下載API；需要資料快取時，呼叫本地儲存API；引入地圖、使用羅盤、呼叫支付、呼叫掃碼等等功能都可以直接使用；UI 庫方面，框架帶有自家 weui 庫加成。
並且在使用這些 API 時，不用考慮瀏覽器相容性，不用擔心出現 BUG，顯而易見微信小程式的開發成本相對低很多。
系統許可權
微信小程式相對於 H5 能獲得更多的系統許可權，比如：網路通訊狀態、資料快取能力等，這些系統級許可權都可以和微信小程式無縫銜接。
而這一點恰巧是 H5 被詬病的地方，這也是 H5 的大多應用場景被定位在業務邏輯簡單、功能單一的原因。
執行流暢度
這條無論對於使用者還是開發者來說，都是最直觀的感受。長久以來，當HTML5應用面對複雜的業務邏輯或者豐富的頁面互動時，它的體驗總是不盡人意，需要不斷的對專案優化來提升使用者體驗。但是由於微信小程式執行環境獨立，儘管同樣用 HTML +CSS + JS 去開發，但配合微信的解析器最終渲染出來的是原生元件的效果，自然體驗上將會更進一步。
小程式多平臺互轉原理
微信小程式與支付寶小程式有很多相似之處，可以封裝兩個小程式之間的差異進行轉換，從而實現一套邏輯程式碼執行在兩個平臺。
專案目錄結構：
|-ProjectName
|-arch//基礎框架
|-arch.js//框架入口，只需要匯入這一個 js 即可
|-cache.js//快取相關，封裝了 LocalStorage
|-net.js//網路相關，封裝了 網路請求
|-page.js//頁面跳轉相關，封裝了導航操作
|-phone.js//裝置相關，封裝了系統資訊，打電話，掃碼，剪下板，定位，支付
|-ui.js//平臺 UI 相關，封裝了 Toast，Alert，Loading，ActionSheet，NavigationBar
|-config//專案配置
|-api.js//專案 API 相關，介面引數配置等
|-config.js//專案配置，如：平臺判斷，LocalStorage 的 key
|-pages//頁面
|-home
|-home.acss/wxss
|-home.axml/wxml
|-home.js
|-home.json
|-utils//工具類
|-crypto-js.min.js//加密工具庫（按需新增）
|-date.js//常用 Date 操作
|-money.js//常用 money 操作
|-net-api.js//自定義通用 API 請求方式，如：封裝統一頭部和響應體
|-param.js//引數加密（按需新增）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
API 差異
//微信小程式
wx.setStorageSync("key", "value")
//支付寶小程式
my.setStorageSync({
key:"key",
data:"value"
})
1
2
3
4
5
6
7
8
封裝後的 API：
function set(key, value) {
if (config.isAlipay) {
my.setStorageSync({
key: key,
data: value,
});
} else {
wx.setStorageSync(key, value);
}
}
1
2
3
4
5
6
7
8
9
10
佈局差異
<!-- 微信小程式 -->
<view bindtap="onClick"
touchstart="onTouchStart"
touchmove="onTouchMove"
touchcancel="onTouchCancel"
touchend="onTouchEnd"
tap="onTap"></view>
<!-- 支付寶小程式 -->
<view onTap="onClick"
touchStart="onTouchStart"
touchMove="onTouchMove"
touchCancel="onTouchCancel"
touchEnd="onTouchEnd"
tap="onTap"></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
可以通過程式進行轉換。