點擊上方“Github中文社區”，關注

看遍Github好玩的項目

大家好，我是Hub哥，每天帶你學習(假裝了解)一個牛逼，又很碉(沙雕)，又不失節操的項目。

今天我在Github上發現了一個 star數超過4.5K的跨端項目，我們先來學習一下：

這是何方神圣？

原來它是騰訊由出了一套跨端開發框架 ：Hippy ?其實早在今年年初微信也出了一套Omi的框架。我們看看這貨長啥樣子？

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。。。

好了 ，最后hub哥習慣性的留個尾巴，今天我們的學習到此結束！

Github地址：

https://github.com/Tencent/Hippy/blob/master/README.zh_CN.md

開源資訊、開源框架、開源項目都在這里

總結

以上是生活随笔為你收集整理的android 开源fc模拟器_星标 4.5K！又一个跨端框架，腾讯开源内部跨端统一开发框架：Hippy...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。