騰訊開源新一代跨端開發(fā)框架！

Hippy 跨端開發(fā)框架

介紹

Hippy 是一個(gè)新生的跨端開發(fā)框架，目標(biāo)是使開發(fā)者可以只寫一套代碼就直接運(yùn)行于三個(gè)平臺(tái)（iOS、Android 和 Web）。Hippy 的設(shè)計(jì)是面向傳統(tǒng) Web 開發(fā)者的，特別是之前有過(guò) React Native 和 Vue 的開發(fā)者用起來(lái)會(huì)更為順手，Hippy 致力于讓前端開發(fā)跨端 App 更加容易。

到目前為止，騰訊內(nèi)已經(jīng)有了18款流行 App 在使用 Hippy 框架，每日觸達(dá)數(shù)億用戶。

特征

• 為傳統(tǒng) Web 前端設(shè)計(jì)，官方支持 React 和 Vue 兩種主流前端框架。

• 不同的平臺(tái)保持了相同的接口。

• 通過(guò) JS 引擎 binding 模式實(shí)現(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 語(yǔ)法綁定。
│   ├── hippy-react-web               # hippy-react 轉(zhuǎn) Web 的庫(kù)。
│   ├── hippy-vue                     # Hippy 的 Vue 語(yǔ)法綁定。
│   ├── hippy-vue-css-loader          # 用來(lái)將 CSS 文本轉(zhuǎn)換為 JS 語(yǔ)法樹以供解析的 Webpack loader。
│   ├── hippy-vue-native-components   # hippy-vue 中瀏覽器中所沒有的，額外的，終端定制組件。
│   └── hippy-vue-router              # 在 hippy-vue 中運(yùn)行的 vue-router。
├── ios
│   └── sdk                           # iOS SDK。
├── android
│   ├── support_ui                    # Android 終端實(shí)現(xiàn)的組件。
│   └── sdk                           # Android SDK。
├── core                              # C++ 實(shí)現(xiàn)的 JS 模塊，通過(guò) Binding 方式運(yùn)行在 JS 引擎中。
├── layout                            # Hippy 布局引擎。
├── scripts                           # 項(xiàng)目編譯腳本。
└── types                             # 全局 Typescript 類型定義。

開始

準(zhǔn)備環(huán)境

macOS 用戶需要以下軟件：

1. Xcode 和 iOS SDK: 用以編譯 iOS 終端 app。

2. Android Studio 和 NDK: 用以編譯 Android app。

3. Node.JS: 用來(lái)運(yùn)行前端編譯腳本。

我們推薦使用 homebrew 來(lái)安裝依賴。

Windows 用戶需要以下軟件:

1. Android Studio 和 NDK: 用以編譯 Android app。

2. Node.JS: 用來(lái)運(yùn)行前端編譯腳本。

Windows 用戶受條件所限，暫時(shí)無(wú)法進(jìn)行 iOS app 開發(fā)

編譯出你的 Hippy app

使用 hippy-react or hippy-vue 范例項(xiàng)目來(lái)啟動(dòng) iOS 模擬器

我們推薦 iOS 開發(fā)者使用模擬器來(lái)進(jìn)行開發(fā)和調(diào)試工作，當(dāng)然如果你是一個(gè) iOS 開發(fā)高手，也可以通過(guò)修改配置將 Hippy app 安裝到手機(jī)上。

1. 安裝前端依賴，運(yùn)行命令：npm install。

2. 編譯前端 SDK 包，運(yùn)行命令：npm run build。

3. 選擇一個(gè)前端范例項(xiàng)目來(lái)進(jìn)行編譯：npm run buildexample -- [hippy-react-demo|hippy-vue-demo]。

4. 啟動(dòng) Xcode 并且開始編譯終端 App：open examples/ios-demo/HippyDemo.xcodeproj。

啟動(dòng) Android App 來(lái)測(cè)試 hippy-react 或者 hippy-vue 范例

我們推薦 Android 開發(fā)者使用真機(jī)，因?yàn)?Hippy 使用的 X5 JS 引擎沒有提供 x86 的庫(kù)以至于無(wú)法支持 x86 模擬器，但是使用 ARM 模擬器又很慢。

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

1. 安裝前端依賴，運(yùn)行命令：npm install。

2. 編譯前端 SDK 包，運(yùn)行命令：npm run build。

3. 打開一個(gè)命令行程序，并選擇 hippy-react 范例項(xiàng)目進(jìn)行編譯：npm run buildexample hippy-react-demo，或者編譯 hippy-vue 范例項(xiàng)目 npm run buildexample hippy-vue-demo。

4. 用 Android Studio 來(lái)打開終端范例工程 examples/android-demo。

5. 用 USB 數(shù)據(jù)線插上你的 Android 手機(jī)，需要確認(rèn)手機(jī)打開 USB 調(diào)試模式和 USB 安裝。

6. 運(yùn)行工程，并安裝 apk。

如果 Android Studio 報(bào)了這個(gè)錯(cuò)誤 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android，這里有解決辦法。

項(xiàng)目地址

下載地址：https://gitee.com/Tencent/Hippy