Hippy

Hippy — 腾讯高性能跨端框架#

资源概述#

Hippy 是腾讯开源的跨端开发框架，旨在让开发者用熟悉的 Web 技术（React 或 Vue）构建原生级性能的移动应用。Hippy 采用 C++ 实现的 JS 引擎和原生渲染引擎，在 iOS 和 Android 上实现接近原生的 UI 性能，同时保留了 Web 开发的灵活性和开发效率。

Hippy 已在腾讯内部大规模使用，接入产品包括微信、手机QQ、手机管家、腾讯视频、QQ浏览器等日亿级用户产品。3.x 版本引入了 Flutter 渲染后端，进一步扩展了跨端能力。

GitHub Stars: 8,537 · Forks: 1,004 · 语言: C++/JavaScript · 许可证: Apache-2.0

定位：Hippy 的核心场景是 App + 小程序跨端开发。如果团队需要同时维护原生 App 和小程序，Hippy 可以共享业务逻辑代码，显著降低维护成本。

设计规范#

布局引擎#

• Hippy 使用 C++ 实现的 Flexbox 布局引擎，与 CSS Flexbox 规范高度一致
• 支持主流 CSS 属性子集（flex-direction, justify-content, align-items 等）
• 不支持 CSS Grid（待核实）

组件体系#

• hippy-react：提供 <View>, <Text>, <Image>, <ScrollView>, <ListView>, <WebView>, <ViewPager> 等组件
• hippy-vue：与 Vue 单文件组件（SFC）配合，提供相同的原生组件

样式规则#

• 使用内联样式或 StyleSheet（hippy-react）
• 单位为 px，自动映射到设备像素
• 不支持 CSS 选择器、伪类、媒体查询

审核规范#

Hippy 的审核分两种场景：

• App 端：无平台审核，通过热更新动态下发 JS Bundle
• 小程序端：走各小程序平台标准审核流程（微信 1-7 工作日等）
• Hippy 编译到小程序时产物为标准小程序代码，不影响审核

开发指南#

快速上手（hippy-react）#

# 安装 CLI 工具
npm install -g @hippy/cli

# 创建项目
hippy init my-app --template react
cd my-app
npm install

# 开发调试
npm run dev
# 启动 hippy-debug-server，用 Hippy DevTools 连接预览

# 构建
npm run build

组件示例（hippy-react）#

import React from 'hippy-react';
import { View, Text, StyleSheet } from 'hippy-react';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello Hippy!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

组件示例（hippy-vue）#

<template>
  <div class="container">
    <text class="title">Hello Hippy with Vue!</text>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 20px;
  color: #333;
}
</style>

常见陷阱#

1. CSS 兼容性：Hippy 只支持 CSS 子集，不支持的属性会被忽略（如 float、position: fixed 支持有限）
2. 动画：Hippy 使用原生动画模块 Hippy.Animation，不支持 CSS Animation/Transition
3. 小程序适配：Hippy 到小程序的编译能力相对有限，复杂场景可能需要手动适配（待核实）
4. 调试：需使用 Hippy 专用 DevTools，不能直接用 Chrome DevTools
5. 包体：hippy-react + 依赖运行时约 500KB-1MB，对小程序包体有压力

与 React Native 的区别#

生态资源#

推荐框架#

• hippy-react：React 语法绑定
• hippy-vue：Vue 语法绑定

推荐 UI 库#

• 官方未提供独立 UI 组件库，需基于原生组件自建（待核实）

社区资源#

• 官方文档：https://hippyjs.org/
• GitHub 仓库：https://github.com/Tencent/Hippy
• 接入产品：微信、手机QQ、腾讯视频、QQ浏览器等

版本更新#

• 最新主线版本：Hippy 3.x（支持 Flutter 渲染后端）
• 最后代码推送：2026-07-01（活跃维护中）
• 主要变更：
  • 3.x：引入 Flutter 渲染后端，改进性能和兼容性
  • 2.x：稳定的 React/Vue 双语法支持版本
• 文档：官方文档涵盖 API 参考、入门指南和迁移说明