今天給大家分享一下騰訊近期開源的新生跨端開發框架Hippy,前端的小夥伴們擼起袖子加油學起來拉！如下內容主要來自官方介紹文件。如果希望直接看官方介紹的同學可以直接點選專案地址，進入選擇檢視中文文件。

專案地址

地址 https://github.com/Tencent/Hippy

介紹

Hippy 是騰訊新生的一個跨端開發框架，目標是使開發者可以只寫一套程式碼就直接運行於三個平臺（iOS、Android 和 Web）。設計面向的物件主要為傳統 Web 開發者，特別是之前有過 React Native 和 Vue 的開發者，其致力於讓前端開發跨端 App 更加容易。

另外其官方文件介紹，截止目前為止，騰訊內部已經有了18款流行 App 在使用 Hippy 框架，每日觸達數億使用者。應該是一款已經較為穩定的框架。

專案架構

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 使用者需要以下軟體（無法進行ios開發）:

Android Studio 和 NDK: 用以編譯 Android app。Node.JS: 用來執行前端編譯指令碼。

二. 編譯啟動IOS

編譯出你的 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

在開始前請確認好 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。。。總結

目前該專案開源不久，社群和相關文件都不太完善，使用門檻暫時看還是較高的。小白可以先記下來有這麼一個新的開源方案。待後續社群生態等完善後，可根據業務的實際情況及公司內部的資源配置。在flutter，rn，weex，及基於H5的hybrid等其他方案做綜合對比選型，選擇適合的自己業務的開發框架和模式。鵝場出品，後續應該還是可以期待的。

以上內容如有對您有所幫助，歡迎關注、轉發、收藏、評論。有任何問題或者建議也歡迎隨時反饋，大家一起交流溝通，後續會提供更多優質的內容給到各位愛好技術的夥伴，謝謝！

#前端框架##前端##開發##APP開發##架構#