前端跨平台開發框架大盤點

2024-05-22碼農

前端跨平台開發框架日益成為開發者的首選，它們允許開發者使用統一的技術棧構建適用於多個平台的套用。在 App 領域，React Native、Flutter、Weex 和 Hippy 提供了原生渲染的能力；在客戶端領域，Electron、Tauri 和 Nw.js 使 Web 技術能夠構建桌面套用；而在小程式領域，uniapp 和 Taro 則實作了一次編寫、多端執行的願景。本文將對這些框架進行簡要介紹，幫助選擇最適合計畫的開發工具！

App（主要）

React Native

React Native（RN）是 Facebook 於 2015 年開源的 跨平台行動應用開發框架 ，它是Facebook早先開源的JS框架React在原生行動應用平台的衍生產物。React Native主要支持 iOS 和安卓 兩大平台，除此之外還支持開發 Web、TvOS、VR、MacOS、WIndows 套用。

React Native 的特點如下：

跨平台開發： 使用 React Native，開發者可以編寫一次程式碼，然後同時在 iOS 和 Android 平台上執行，減少了開發時間和成本。

原生效能： 盡管是跨平台框架，React Native 透過使用原生平台的元件來提供接近原生套用的效能。

動態更新 ：React Native 支持動態更新套用，而無需使用者重新安裝套用。

使用簡單： React Native 基於 JavaScript 和 React，這使得許多前端開發者能夠輕松上手。

生態豐富： React Native 擁有一個活躍的社群和豐富的生態系，提供了大量的第三方庫和工具，以幫助開發者加速開發過程。

除此之外，還有一個名為 Expo 的開源框架（ https://github.com/expo/expo ），它是建立在 React Native 之上的工具集。expo 提供了許多額外的功能和服務，使得基於 React Native 的套用開發變得更加簡單和高效。同時，expo 還提供了一些特定平台無法提供的功能，如 Over-the-Air 更新、內建的推播通知服務等。因此，可以說 expo 是 React Native 的擴充套件，它為 React Native 開發者提供了更多的便利和工具。

Github：

React Native： https://github.com/facebook/react-native

react-native-tvos： https://github.com/react-native-tvos/react-native-tvos

react-native-visionos： https://github.com/callstack/react-native-visionos

react-native-web： https://github.com/necolas/react-native-web

react-native-macos： https://github.com/microsoft/react-native-macos

react-native-windows： https://github.com/microsoft/react-native-windows

Flutter

Flutter 是 Google 開源的構建使用者介面（UI）工具包。它幫助開發者透過一套程式碼庫高效構建多平台精美套用，支持移動、Web、桌面和嵌入式平台。使用 Flutter 開發的套用包括 QQ、閑魚、菜鳥、百度網盤、京東 等。

Flutter 的特點如下：

跨平台開發： 使用 Flutter，開發者可以編寫一次程式碼，然後同時在 iOS、Android、Web、Windows、macOS 和 Linux 等多個平台上執行，從而節省時間和成本。

原生效能： Flutter 使用自己的高效能渲染引擎，名為 Skia，它直接與裝置的圖形硬體通訊，從而提供與原生套用相當的效能。

熱多載： Flutter 支持熱多載，這意味著開發者可以在不重新開機套用的情況下看到程式碼更改的效果，這大大加快了開發過程。

Dart 語言： Flutter 使用 Dart 語言，這是一種現代、物件導向、編譯為原生的語言，專為構建高效能行動應用而設計。

豐富的生態系： Flutter 擁有一個活躍的社群和豐富的生態系，提供了大量的第三方庫和工具，以幫助開發者加速開發過程。

Github： https://github.com/flutter/flutter

Weex

Weex 是一個由阿裏巴巴開源的跨平台移動開發工具，其能夠完美兼顧效能與動態性，讓移動開發者透過簡捷的前端語法寫出Native級別的效能體驗，。簡單來說，在整合了 WeexSDK 之後，可以使用 JavaScript 語言和前端開發經驗來開發行動應用。

Weex 的特點如下：

輕量級與小巧 ：Weex生成的JS程式碼小，易於部署和釋出，框架本身也保持輕量。

快速叠代 ：支持熱更新，無需頻繁發版，加快產品叠代速度。

高效能與原生體驗 ：JS程式碼渲染為原生界面，保持與原生APP相似的效能和流暢度。

跨平台一致性 ：一次編寫，多平台執行（iOS、Android），保證界面一致性。

基於Web標準 ：遵循Web Component標準，利用Web開發經驗簡化開發過程。

靈活擴充套件 ：支持自訂Native元件和API，滿足業務靈活客製需求。

與現有技術相容 ：可以與 Web 技術棧（如Vue.js）整合，並支持原生混合開發。

Github： https://github.com/alibaba/weex

Hippy

Hippy 是騰訊端框架（Tencent Device-oriented Framework，簡稱 TDF）下的開源跨平台套用開發解決方案，其旨在幫助開發者實作「一次編寫，多處執行」的目標，即開發者使用 Hippy 編寫的程式碼可以在多個平台（如iOS、Android、Web等）上執行。Hippy 特別友好於Web開發者，特別是那些熟悉React或Vue的開發者。

目前，Hippy 框架已經被應用在騰訊公司內部超過 27 款主流的 App，包括手機QQ、QQ瀏覽器、騰訊視訊、QQ音樂、騰訊新聞等，每日觸達數億使用者。

Hippy 的特點如下：

跨平台開發 ：Hippy 提供了一種接近 Web 的開發體驗，允許前端開發人員使用 React 和 Vue 兩套界面框架，將前端程式碼轉換為終端的原生指令，進行原生終端 App 的開發。

效能最佳化 ：Hippy 在啟動速度、渲染效能、動畫速度、記憶體占用、包體積等方面進行了大量最佳化，提供了頂尖的效能表現。

開發體驗 ：Hippy 對齊瀏覽器 DOM 的事件、網路、日誌、定時器、Performance 等 API，降低了前端開發人員的學習成本。同時，它還相容 Flex 布局和常用的 CSS 內容，支持 Webpack/Rollup 等打包工具，以及程式碼動態載入。

多端執行 ：使用 Hippy 框架開發的程式碼可以同時執行在 Android、iOS 和 Web 等多個平台。

記憶體和包體積最佳化 ：在記憶體占用上，Hippy 顯示出比競品更優的效能，特別是在滑動列表時。在包體積方面，Hippy 的 APK 安裝包大小和 JS bundle 大小也非常具有競爭力。

可延伸的架構設計 ：Hippy 3.0 版本進行了架構重構，采用分層解耦的設計理念，以復用的 DOM 管理、排版布局為核心，支持不同 Driver 和 Renderer 的接入和自由切換。

Github： https://github.com/Tencent/Hippy

客戶端（主要）

Electron

Electron 是一個開源的桌面套用開發框架，它允許使用 web 技術（如 HTML、CSS 和 JavaScript）來構建跨平台的桌面套用。Electron 最初是由 GitHub 開發的，用於構建 Atom 編輯器，後來成為了一個獨立的計畫。**QQ、釘釘、網易雲音樂、百度網盤、VS Code **等客戶端套用都是使用 Electron 開發的。

Electron 的特點如下：

跨平台相容性 ：Electron 支持建立可在Windows、macOS和Linux上執行的跨平台桌面套用。這使得跨平台桌面開發變得容易，開發者無需針對不同平台編寫和維護多份程式碼。

豐富的本地API ：Electron提供了豐富的本地API，使開發者能夠使用純JavaScript來建立桌面套用。這些API允許開發者呼叫系統本地功能，如檔操作、系統通知等。

強大的UI渲染能力 ：Electron透過整合Chromium瀏覽器內核，為套用提供強大的UI渲染能力。Chromium本身是一個跨平台的瀏覽器引擎，因此Electron無需考慮程式碼的相容性。

結合Node.js ：Electron還嵌入了Node.js，使開發者能夠在套用中使用JavaScript編寫伺服器端程式碼。這允許開發者在桌面套用中實作復雜的邏輯和數據處理功能。

Github： https://github.com/electron/electron

Tauri

Tauri 是一款高效的框架，用於為主流桌面平台構建小巧且極速的二進制套用。開發者可以靈活地整合任何前端框架，只要這些框架能夠編譯為 HTML、JS 和 CSS，以便構建出色的使用者介面。Tauri 的後端基於 Rust，提供了一個與前端互動的 API，保證了套用的效能和安全性。目前，Tauri 支持開發 macOS、Windows、Linux、Android 和 iOS 等平台套用。

Tauri 相對於 Electron，其優勢如下：

安裝包體積更小 ：Electron的安裝包通常較大，需要幾十MB，而Tauri的套用安裝包只有幾M，大大減少了使用者的下載和安裝時間。

啟動速度更快 ：由於Tauri的輕量級和高效性，其套用的啟動速度通常比Electron更快，這為使用者提供了更好的使用體驗。

更高的安全性 ：Tauri對安全性有著更高的重視。Electron套用可能面臨透過npm命令進行加壓縮套用的風險，而Tauri打包的套用是二進制的，逆向破解較為困難，從而提高了套用的安全性。

簡潔的構建過程 ：使用 Tauri 框架，開發者可以透過簡單的命令列工具將Web套用打包成桌面套用，整個構建過程非常簡潔，無需繁瑣的配置和編譯。

Github： https://github.com/tauri-apps/tauri

Nw.js

NW.js（又稱 Node-Webkit）是一個允許開發者使用 HTML、CSS 和 JavaScript 構建跨平台桌面套用的框架。它將 Web 技術和 Node.js 執行時環境整合在一起，使得開發者可以直接存取作業系統級別的功能。

NW.js 的特點如下：

跨平台： 可以在 Windows、macOS 和 Linux 上執行。

直接存取系統功能： 可以使用 Node.js 模組來存取作業系統級別的 API。

易用性： 基於熟悉的 web 技術，對於前端開發人員來說上手較快。

豐富的生態系： 提供了大量的外掛程式和工具，可幫助開發者加速套用開發過程。

Github： https://github.com/nwjs/nw.js

小程式（主要）

uniapp

Uni-app 是一個使用 Vue.js 開發所有前端套用的框架。它允許開發者編寫一套程式碼，然後釋出到iOS、Android、Web（響應式）、以及各種小程式、快套用等多個平台。Uni-app 具有跨平台開發的能力，開發者只需要使用Vue.js框架進行開發，而不需要考慮不同平台的差異，大大降低了套用的開發難度和復雜度。

uniapp 的特點如下：

跨平台開發 ：一次編寫，釋出到iOS、Android、H5、以及各種小程式平台。

高效能 ：最佳化Vue.js在小程式等平台的效能，提供分包載入等效能最佳化手段。

豐富的API和外掛程式 ：支持眾多原生API和外掛程式，方便實作各種功能。

統一開發體驗 ：統一的開發框架和工具鏈，支持即時預覽和偵錯。

良好的相容性 ：深度最佳化和適配不同平台，確保套用表現一致性和穩定性。

Github： https://github.com/dcloudio/uni-app