小程序 與 App 與 H5 之間的區別

小程序的實現原理

根據微信官方的說明，微信小程序的運行環境有 3 個平台，iOS 的 WebKit（蘋果開源的瀏覽器內核），Android 的 X5 (QQ 瀏覽器內核)，開發時用的 nw.js（C++ 實現的 web 轉桌面應用）。

平台 渲染 js 運行環境

iOS WKWebView JavaScriptCore

Android X5 基於 Mobile Chrome 37 內核 X5 JSCore

開發工具 Chrome WebView nw.js

小程序運行時會創建兩個線程：View Thread 和 AppService Thread，相互隔離，通過橋接協議 WeixinJsBridage 進行通信（包括 setData 調用、canvas 指令和各種 DOM 事件）。

下述表格展示了兩個線程的區別：

線程名稱 所屬模塊 運行代碼 原理 說明

View 視圖層 WXML/WXSS WebView 渲染 wxml 編譯器把 wxml 文件轉為 js 並構建 virtual dom；wxss 編譯器把 wxss 文件轉化為 js。

AppService 邏輯層 JS JavascriptCore 運行 無法訪問 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

可以通過程序進行轉換。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！