Hippy 跨端開發框架

介紹

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

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

特征

為傳統 Web 前端設計，官方支持 React 和 Vue 兩種主流前端框架。

不同的平臺保持了相同的接口。

通過 JS 引擎 binding 模式實現的前終端通訊，具備超強性能。

提供了高性能的可復用列表。

皆可平滑遷移到 Web 瀏覽器。

完整支持 Flex 的布局引擎。

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。

通過 lerna 安裝前端每一個package依賴: lerna bootstrap。

編譯前端 SDK 包，根目錄運行命令： npm run build。

選擇一個前端范例項目來進行編譯：npm run buildexample -- [hippy-react-demo|hippy-vue-demo]。

啟動 Xcode 并且開始編譯終端 App：open examples/ios-demo/HippyDemo.xcodeproj。

cd 到 hippy-react-demo 或者 hippy-vue-demo 目錄，分別執行 npm run hippy:dev 和 npm run hippy:debug, 即開啟實時 Debug 模式。

啟動 Android App 來測試 hippy-react 或者 hippy-vue 范例

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

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

安裝前端依賴，運行命令：npm install。

通過 lerna 安裝前端每一個 package 依賴: lerna bootstrap。

編譯前端 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。

cd 到 hippy-react-demo 或者 hippy-vue-demo 目錄，分別執行 npm run hippy:dev 和 npm run hippy:debug, 即開啟實時 Debug 模式。

如果 Android Studio 報了這個錯誤 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android，這里有解決辦法。

貢獻

歡迎開發人員為騰訊的開源做出貢獻，我們將持續激勵他們并感謝他們。我們提供了騰訊對開源貢獻的說明，每個項目的具體貢獻規則由項目團隊制定。開發人員可以選擇適當的項目并根據相應的規則參與。騰訊項目管理委員會將定期匯報合格的貢獻者，獎項將由官方聯絡人頒發。

許可協議

總結

以上是生活随笔為你收集整理的一套代码编译出ios和android,Hippy: Hippy 是一个新生的跨端开发框架，目标是使开发者可以只写一套代码就直接运行于三个平台（iOS、Android 和 Web）...的全部內容，希望文章能夠幫你解決所遇到的問題。

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