騰訊開源新一代跨端開發(fā)框架！
Hippy 跨端開發(fā)框架
介紹
Hippy 是一個新生的跨端開發(fā)框架，目標(biāo)是使開發(fā)者可以只寫一套代碼就直接運行于三個平臺（iOS、Android 和 Web）。Hippy 的設(shè)計是面向傳統(tǒng) Web 開發(fā)者的，特別是之前有過 React Native 和 Vue 的開發(fā)者用起來會更為順手，Hippy 致力于讓前端開發(fā)跨端 App 更加容易。
到目前為止，騰訊內(nèi)已經(jīng)有了18款流行 App 在使用 Hippy 框架，每日觸達(dá)數(shù)億用戶。
特征
為傳統(tǒng) Web 前端設(shè)計，官方支持?
React?和?Vue?兩種主流前端框架。不同的平臺保持了相同的接口。
通過 JS 引擎 binding 模式實現(xiàn)的前終端通訊，具備超強(qiáng)性能。
提供了高性能的可復(fù)用列表。
皆可平滑遷移到 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 的前終端調(diào)試服務(wù)。
│???├── hippy-react ??????????????????# Hippy 的 React 語法綁定。
│???├── hippy-react-web ??????????????# hippy-react 轉(zhuǎn) Web 的庫。
│???├── hippy-vue ????????????????????# Hippy 的 Vue 語法綁定。
│???├── hippy-vue-css-loader ?????????#?用來將 CSS 文本轉(zhuǎn)換為 JS 語法樹以供解析的 Webpack loader。
│???├── hippy-vue-native-components ??# hippy-vue 中瀏覽器中所沒有的，額外的，終端定制組件。
│???└── hippy-vue-router ?????????????#?在 hippy-vue 中運行的 vue-router。
├──?ios
│???└── sdk ??????????????????????????# iOS SDK。
├──?android
│???├── support_ui ???????????????????# Android 終端實現(xiàn)的組件。
│???└── sdk ??????????????????????????# Android SDK。
├── core ?????????????????????????????# C++?實現(xiàn)的 JS 模塊，通過 Binding 方式運行在 JS 引擎中。
├── layout ???????????????????????????# Hippy 布局引擎。
├── scripts ??????????????????????????#?項目編譯腳本。
└── types ????????????????????????????#?全局 Typescript 類型定義。
開始
準(zhǔn)備環(huán)境
macOS 用戶需要以下軟件：
Xcode 和 iOS SDK: 用以編譯 iOS 終端 app。
Android Studio 和 NDK: 用以編譯 Android app。
Node.JS: 用來運行前端編譯腳本。
我們推薦使用 homebrew 來安裝依賴。
Windows 用戶需要以下軟件:
Android Studio 和 NDK: 用以編譯 Android app。
Node.JS: 用來運行前端編譯腳本。
Windows 用戶受條件所限，暫時無法進(jìn)行 iOS app 開發(fā)
編譯出你的 Hippy app
使用 hippy-react or hippy-vue 范例項目來啟動 iOS 模擬器
我們推薦 iOS 開發(fā)者使用模擬器來進(jìn)行開發(fā)和調(diào)試工作，當(dāng)然如果你是一個 iOS 開發(fā)高手，也可以通過修改配置將 Hippy app 安裝到手機(jī)上。
安裝前端依賴，運行命令：
npm install。編譯前端 SDK 包，運行命令：
npm run build。選擇一個前端范例項目來進(jìn)行編譯：
npm run buildexample -- [hippy-react-demo|hippy-vue-demo]。啟動 Xcode 并且開始編譯終端 App：
open examples/ios-demo/HippyDemo.xcodeproj。
啟動 Android App 來測試 hippy-react 或者 hippy-vue 范例
我們推薦 Android 開發(fā)者使用真機(jī)，因為 Hippy 使用的 X5 JS 引擎沒有提供 x86 的庫以至于無法支持 x86 模擬器，但是使用 ARM 模擬器又很慢。
在開始前請確認(rèn)好 SDK 和 NDK 都安裝了范例的指定版本，并且請勿更新編譯工具鏈。
安裝前端依賴，運行命令：
npm install。編譯前端 SDK 包，運行命令：
npm run build。打開一個命令行程序，并選擇 hippy-react 范例項目進(jìn)行編譯：
npm run buildexample hippy-react-demo，或者編譯 hippy-vue 范例項目?npm run buildexample hippy-vue-demo。用 Android Studio 來打開終端范例工程?
examples/android-demo。用 USB 數(shù)據(jù)線插上你的 Android 手機(jī)，需要確認(rèn)手機(jī)打開 USB 調(diào)試模式和 USB 安裝。
運行工程，并安裝 apk。
如果 Android Studio 報了這個錯誤?
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android，這里有解決辦法。
項目地址
下載地址：https://gitee.com/Tencent/Hippy