Hippy：腾讯跨端开发框架编译与示例运行指南

一、项目官方信息

Hippy 是腾讯开源的跨端开发框架，目标是一次编写、多端运行（iOS、Android、Web 等）。它对熟悉 React 或 Vue 的 Web 开发者非常友好，开发者用熟悉的前端框架即可构建跨端 App。Hippy 已在手机 QQ、手机 QQ 浏览器、腾讯视频、QQ 音乐、腾讯新闻等应用中落地，覆盖数亿普通用户。

二、官方图片

上图为 Hippy 仓库在 GitHub 上的社交预览图。

三、环境要求

• 本地安装 git、npm；
• 仓库使用 git-lfs 管理 so/gz/otf 文件，需先安装 git-lfs；
• macOS：Xcode（iOS SDK）、Android Studio（NDK）、Node.js，推荐用 homebrew 安装依赖；
• Windows：Android Studio + NDK + Node.js，暂不支持 iOS 开发环境。

四、编译与运行步骤

1. 克隆并初始化

git clone https://github.com/Tencent/Hippy.git
cd Hippy
npm install

2. 初始化 JS 工程

cd driver/js/
npm run init

该命令等价于 npm install && npx lerna bootstrap && npm run build：安装构建脚本依赖、用 Lerna 安装各 npm 包依赖、构建各前端 SDK 包。若提示找不到 lerna，先执行 npm install lerna -g。

3. 构建 iOS 模拟器示例

npm run buildexample hippy-react-demo
brew install cocoapods
brew install cmake
cd framework/examples/ios-demo
pod install

然后用 Xcode 打开生成的 HippyDemo.xcworkspace 编译运行。

4. 构建 Android 示例

npm run buildexample hippy-react-demo

用 Android Studio 打开根目录的 Hippy Project，连接真机（Hippy 使用腾讯 X5 JS 引擎，不支持 x86 模拟器，ARM 模拟器性能也较低，推荐真机），开启 USB 调试后运行安装 apk。

5. 调试与生产构建

npm run init:example hippy-react-demo
npm run debugexample hippy-react-demo dev

生产构建依次执行：

cd driver/js/examples/hippy-react-demo
npm install
npm run hippy:vendor
npm run hippy:build

五、使用方法

• React/Vue 开发：用熟悉的前端框架写业务代码，官方支持 React、Vue、Vue Next；
• 多端一致 API：不同平台使用同一套 API；
• Flex 布局：内置 Flex 布局引擎 Taitank；
• 高性能：JS 引擎绑定通信，自带可回收组件，性能优于传统 WebView 方案；
• 平滑迁移到 Web：可优雅降级到浏览器运行。

六、常见问题 FAQ

1. Hippy 是什么定位？ 跨端框架，一次编写运行在 iOS、Android、Web，面向 React/Vue 开发者。

2. 为什么需要 git-lfs？ 仓库用 LFS 管理 so/gz/otf 等二进制资源。

3. Windows 能开发 iOS 吗？ 暂不支持，Windows 只能做 Android。

4. JS 工程怎么初始化？ 进入 driver/js/ 执行 npm run init。

5. 支持哪些前端框架？ 官方支持 React、Vue 与 Vue Next。

6. 为什么 Android 推荐真机？ X5 引擎不支持 x86 模拟器，ARM 模拟器性能差。

七、跳转链接

• GitHub 仓库：Tencent/Hippy
• 官方文档：doc.openhippy.com
• iOS 集成指南：ios-3.0-integration
• 示例：Hippy Examples