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

移動互聯網 軟件 iOS HTML CSS 小馬學編程 2018-12-04

小程序的實現原理

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

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

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

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

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

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

兩個線程是通過系統層的 JSBridage 來通信的,邏輯層把數據變化通知到視圖層,觸發視圖層頁面更新,視圖層把觸發的事件通知到邏輯層進行業務處理。

小程序與 App 的區別

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

運行環境

原生 App 直接運行在操作系統的單獨進程中(在 Android 中還可以開啟多進程),而小程序只能運行在微信的進程中。

開發成本

原生 App 的開發涉及到 Android/iOS 多個平臺、開發工具、開發語言、不同設備的適配等問題;而小程序只需要開發一個就可以在 Android/iOS 等不同平臺不同設備上運行。

原生 App 需要在商店上架(Android 需要上架各種商店);小程序只能在微信平臺發佈。

系統權限

原生 App 調用的是系統資源,也就是說系統提供給開發的的 API 都可以使用;而小程序是基於微信的,小程序所有的功能都受限於微信,也就是說微信給開發者提供 API 才可以使用,不能繞過微信直接使用系統提供的 API。

原生 App 可以給用戶推送消息;小程序不允許主動給用戶發送消息,只能回覆模版消息 。

原生 App 有獨立的數據庫,可以做離線存儲;小程序只能存儲到 LocalStorage,無法做離線存儲。

原生 App 需要下載,安裝包比較大;小程序無需下載,可以通過小程序碼等方式通過微信直接打開。

運行流暢度

原生 App 運行在操作系統中,所有的原生組件可以直接調用 GPU 進行渲染;而小程序運行在微信的進程中,只能通過 WebView 進行渲染。

小程序與 H5 的區別

小程序 與 App 與 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 去開發,但配合微信的解析器最終渲染出來的是原生組件的效果,自然體驗上將會更進一步。

小程序多平臺互轉原理

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

微信小程序與支付寶小程序有很多相似之處,可以封裝兩個小程序之間的差異進行轉換,從而實現一套邏輯代碼運行在兩個平臺。

項目目錄結構:

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

API 差異

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

封裝後的 API:

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

佈局差異

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

可以通過程序進行轉換。

相關推薦

推薦中...