還有手機QQ騰訊客戶端團隊出品了：手機QQ 開源基於Flutter 的動態化框架 MXFlutter 。

Hippy

Hippy 目標是使開發者可以只寫一套程式碼就直接運行於三個平臺（iOS、Android 和 Web）。Hippy 的設計是面向傳統 Web 開發者的，特別是之前有過 React Native 和 Vue 的開發者用起來會更為順手，Hippy 致力於讓前端開發跨端 App 更加容易。

Hippy 跨端框架是由QQ 瀏覽器部門發起的，針對前端開發者推出的跨端解決方案。為業內現存問題，Hippy 緊貼 W3C 標準，遵從網頁開發各項規則，從前端開發人員角度出發，使用 Javascript 為開發語言，同時支援 React 和 Vue 兩種前端主流框架。對於前端開發者而言，Hippy 上手難度會更低，學習曲線會更平滑。

到目前為止，騰訊內已經有了18款流行 App 在使用 Hippy 框架，每日觸達數億使用者。

特徵

Hippy 實現了類似 Flutter 的引擎直通架構（在 React Native 中的 Fabric 架構），通過 C++ 開發的模組直接插入 JS 引擎中執行，繞過了前終端通訊編解碼的開銷，有效提升了 JS 前端程式碼和終端的通訊效能。在此基礎之上，Hippy 正在實現高效能自繪，以提供更強的效能和更好的使用者體驗。

為傳統 Web 前端設計，官方支援 React 和 Vue 兩種主流前端框架。不同的平臺保持了相同的介面。通過 JS 引擎 binding 模式實現的前終端通訊，具備超強效能。提供了高效能的可複用列表。皆可平滑遷移到 Web 瀏覽器。完整支援 Flex 的佈局引擎。

對於使用者體驗、高效開發迭代，Hippy 將是你最好的選擇。

Hippy 具有以下優勢：

一、開發效率高。根據使用 Hippy 業務經驗看，使用 HIppy 開發相對於原有 Android 和 iOS 雙端開發，可節省 70% 人力。

二、穩定性好。目前 Hippy 引擎日啟動次數超15億，引擎載入成功率 99.9992%，業務載入成功率 99.985%。

三、迭代快。業務發版週期減少 75% ~ 100%。

四、效能高。平均幀率高於同期競品，自研 Layout 引擎超越 Yoga。

五、擴充套件性好。Hippy 採用分層設計思想，通過上下層抽離和解耦，將整體劃分為框架層、引擎層、渲染層。每層均可自由替換。框架層既可以使用 React 也可以使用 Vue，或者未來的新興框架。引擎層可以使用 JS，將來也支援 Dart，Lua 等語言。渲染層目前使用原生 Native 繪製，明年也將支援自繪，業務可以根據需求自由選擇。

六、無協議風險。Hippy 完全自研，使用自由寬鬆的 Apache 協議，商業專案可放心使用。

hippy-react 從語法上更加接近終端底層，某種程度上語法接近 React Native，同時通過官方提供了 hippy-react-web 元件庫，也可以方便地生成 Web 版網頁。

全民 K 歌

react + hippy-react + hippy-react-web

hippy-vue 的元件、引數和介面完全符合瀏覽器標準，前端開發用瀏覽器標籤和常用的 CSS 選擇器就可以完成跨端介面繪製。其優勢如下：

前端開發基本了解一下 hippy-vue 開發的限制就可以上手跨端開發；可以複用 Web 端絕大多數的生態；不需要 Web 轉接庫就可以直接生成網頁。

事實上，hippy-vue 其實只是瀏覽器上的 Vue 在終端上的一個渲染層，理論上大多數 Vue 在網頁上的生態可以直接遷移過來。

王者營地 ：vue + hippy-vue

Hippy 在騰訊內部已經有一套完整生態，包含 GCanvas、Lottie、SVG 等都有對應元件封裝，同時包含騰訊內部自研的 Hippy 業務元件庫、高效能圖形庫、異常上報（支援 Sentry）等，也會在未來逐步對外開放。

Project structure

Hippy├── examples # 前終端範例程式碼。│ ├── hippy-react-demo # hippy-react 前端範例程式碼。│ ├── hippy-vue-demo # hippy-vue 前端範例程式碼。│ ├── ios-demo # iOS 終端範例程式碼。│ └── android-demo # Android 終端範例程式碼。├── packages # 前端 npm 包。│ ├── hippy-debug-server # Hippy 的前終端除錯服務。│ ├── hippy-react # Hippy 的 React 語法繫結。│ ├── hippy-react-web # hippy-react 轉 Web 的庫。│ ├── hippy-vue # Hippy 的 Vue 語法繫結。│ ├── hippy-vue-css-loader # 用來將 CSS 文字轉換為 JS 語法樹以供解析的 Webpack loader。│ ├── hippy-vue-native-components # hippy-vue 中瀏覽器中所沒有的，額外的，終端定製元件。│ └── hippy-vue-router # 在 hippy-vue 中執行的 vue-router。├── ios│ └── sdk # iOS SDK。├── android│ ├── support_ui # Android 終端實現的元件。│ └── sdk # Android SDK。├── core # C++ 實現的 JS 模組，通過 Binding 方式執行在 JS 引擎中。├── layout # Hippy 佈局引擎。├── scripts # 專案編譯指令碼。└── types # 全域性 Typescript 型別定義。

開始準備環境

macOS 使用者需要以下軟體：

Xcode 和 iOS SDK: 用以編譯 iOS 終端 app。Android Studio 和 NDK: 用以編譯 Android app。Node.JS: 用來執行前端編譯指令碼。

我們推薦使用 homebrew 來安裝依賴。

Windows 使用者需要以下軟體:

Android Studio 和 NDK: 用以編譯 Android app。Node.JS: 用來執行前端編譯指令碼。

Windows 使用者受條件所限，暫時無法進行 iOS app 開發

編譯出你的 Hippy app使用 hippy-react or hippy-vue 範例專案來啟動 iOS 模擬器

我們推薦 iOS 開發者使用模擬器來進行開發和除錯工作，當然如果你是一個 iOS 開發高手，也可以通過修改配置將 Hippy app 安裝到手機上。

安裝前端依賴，執行命令：npm install。編譯前端 SDK 包，執行命令：npm run build。選擇一個前端範例專案來啊進行編譯：npm run buildexample -- [hippy-react-demo|hippy-vue-demo]。啟動 Xcode 並且開始編譯終端 App：open examples/ios-demo/HippyDemo.xcodeproj。啟動 Android App 來測試 hippy-react 或者 hippy-vue 範例

我們推薦 Android 開發者使用真機，因為 Hippy 使用的 X5 JS 引擎沒有提供 x86 的庫以至於無法支援 x86 模擬器，但是使用 ARM 模擬器又很慢。

在開始前請確認好 SDK 和 NDK 都安裝了範例的指定版本，並且請勿更新編譯工具鏈。

安裝前端依賴，執行命令：npm install。編譯前端 SDK 包，執行命令：npm run build。開啟一個命令列程式，並選擇 hippy-react 範例專案進行編譯：npm run buildexample hippy-react-demo，或者編譯 hippy-vue 範例專案 npm run buildexample hippy-vue-demo。用 Android Studio 來開啟終端範例工程 examples/android-demo.用 USB 資料線插上你的 Android 手機，需要確認手機開啟 USB 除錯模式和 USB 安裝。執行工程，並安裝 apk。。。