一套代码编译出ios和android,Hippy: Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS、Android 和 Web)...
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)...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android播放mp3方法,Andro
- 下一篇: android中内存泄露,Android