移動端多端框架選型

DATE: 2020/02/09

---

通過下面兩篇文章整理：

• taro：小程序多端框架全面測評
• uni-app：跨端開發框架深度橫評

摘要

底層級別

提供底層渲染引擎佈局引擎、中層 DSL (Domain-specific Language)、上層框架。

性能高，渲染一致，跨系統平臺，也能編譯運行於瀏覽器；

需要學開發語言；

不支持小程序；

• Flutter / 譯，Hummingbird
• Qt，Qt for WebAssembly

Web 技術

沒有 DOM，沒有 BOM，通過貼近前端生態技術，自研佈局引擎處理 CSS，使用 JavaScript 寫業務邏輯，使用流行的前端框架作爲 DSL，各端分別使用各自的原生組件渲染；通過註冊、調用模塊來實現調用移動設備原生 API；

爲了保持框架的通用性，內置的原生模塊有限；

無渲染引擎，渲染一致性不高；

業務邏輯運行在 JavaScript Thread，與 Native 頻繁通信，性能不高，容易掉幀卡頓。

• React Native，react-native-web
• Weex

編譯型

以 JavaScript 作爲基礎選定一個 DSL 框架，以這個 DSL 框架爲標準在各端分別編譯爲不同的代碼，各端分別有一個運行時框架(容器)或兼容組件庫保證代碼正確運行。

遵循 React、Vue 語法規範，作爲多端的上層應用語言，編譯到不同平臺，開發一次，到處運行，開發一次，到處調錯。

• JD/Taro，React 語法
• Dcloudio/uni-app
• DiDi/chameleon，多態協議針對多端開發
• Tencent/wepy: 小程序組件化開發框架，多端支持不完善
• Meituan-Dianping/mpvue

taro/(React Native，expo)、chameleon/(Weex)、uni-app/(Weex，nvue) 框架支持 APP 端。

跨 APP 端時兼容性較差，問題根源難以定位（運行時、編譯時、組件庫、依賴庫）；

chameleon，有一套 SDK 配合多端協議與原生語言通信，多端支持度好；代碼和測試用例非常規範。

結論 (TL;DR)

追求性能，跨平臺、無中國特色小程序，Flutter

遵循 React 語法規範，taro；

遵循 Vue 語法規範、組件多，uni-app；

遵循 Vue 語法規範、架構設計合理、多端支持度好，chameleon。