1. Hippy简介
1.1 简介
Hippy
(github.com/Tencent/Hip…) 是腾讯在2019年12月20日开源跨端框架。
Hippy
在腾讯内部已经运行了3年,支持了18款线上业务,日均PV过亿,形成了一套完整的生态。
与其他跨端框架相比,Hippy紧贴W3C标准,对前端开发者更加友好,同时支持 React
和 Vue
两大前端主流框架
Hippy 官方文档: hippyjs.org/#/guide/int…
1.2 @hippy/react
@hippy/react
是基于 Facebook React
的官方自定义渲染器 react-reconciler
重新开发的 React
到终端的渲染层,可以使用 React 16.+
的大部分特性。
在语法上 @hippy/react
更加接近底层终端,使用了类似 React Native
的语法。
注: 由于 Hippy
页面挂在一个节点上,所以 Portals
暂时无法支)
1.2 @hippy/react-web
该项目仍在开发中,有不完善的地方
考虑到客户端页面在不少场景下,需要提供web版本,例如分享页,h5版本的应用。
Hippy
提供了 @hippy/react-web
框架来支持 @hippy/react
项目通过转译,生成可以运行在浏览器中的版本,从框架上支持三端同构,减少开发成本
@hippy/react-web
是通过实现 @hippy/react
的组件的方式,每个组件提供相同的功能和相同的api,从而达到直接将 @hippy/react
项目代码直接转化为 web
版本
2. 三端同构思路
Hippy 可以便捷地实现三端重构
2.1 架构图

@hippy/react
使用Virtual Dom
维护组件的布局,通过Native Renderer
对组件进行渲染,在终端中显示出来@hippy/react-web
通过Component
实现@hippy/react
组件的功能,同时使用Adapters
实现原生组件的特性- 使用
Hippy
开发的项目,只组要简单进行打包配置,就可以实现多端兼容。
2.2 项目三端同构思路
在实际的业务开发过程中,会遇到很多需要同时出现的app和web的页面需求,使用hippy可以简单实现这一需求。
使用 Hippy
进行三端同构,主要思路是:
- 页面功能,组件的表现尽可能在三端表现一致
- web页面抛弃 CSS 文件,通过
StyleSheet
来管理页面组件样式 - 各端特性化功能,通过独立文件维护:
**.hippy.jsx
**.web.jsx
- 各端代码独立webpack打包入口,实现平台特性需求
- 对页面路由做相应的处理
- 在终端中没有
window
等浏览器的全局变量,所以在终端中调用这些变量会导致页面挂掉
2.3 项目文件架构
创建
Hippy
项目,可以参考 Hippy-React脚手架开发,快速创建项目
2.3.1. 项目文件结构
build/ // webpack 配置
├── hippy-webpack.android-vendor.js // 打包android基础vendor
├── hippy-webpack.android.js // 打包android业务代码配置
├── hippy-webpack.dev.js // 终端本地调试配置
├── hippy-webpack.ios-vendor.js // 打包ios基础vendor
├── hippy-webpack.ios.js // 打包ios业务代码配置
├── hippy-webpack.web.dev.js // web 开发配置
├── hippy-webpack.web.js // web 打包配置
├── run-ios.js // 拉起IPHONE模拟器
├── template.html // web index.html 模板
└── vendor.js // 配置vendor
index.js // 原生入口
index.web.js // web 入口
2.3.2 @hippy/react
重定向
在 web版本的 webpack
配置文件中,通过alias的方式,将'@hippy/react' 替换成 '@hippy/react-web'
// build/hippy-webpack.web.dev.js
// build/hippy-webpack.web.js
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: [path.resolve(__dirname, '../node_modules')],
alias: {
'@hippy/react': '@hippy/react-web',
},
},
2.3.3 入口文件
- 终端入口文件
// index.js
import { Hippy } from '@hippy/react';
import App from './App';
new Hippy({
appName: 'demo',
entryPage: App,
}).start();
- web 入口文件
import { Hippy } from '@hippy/react';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './index.css'; // 通过引入css文件,对浏览器组件默认样式进行处理,以及一些需要使用伪元素的样式
new Hippy({
appName: 'demo',
entryPage: App,
}).start();
// 使用serviceWorker
serviceWorker.unregister();
2.3.4 平台个性化逻辑处理
Hippy
通过 Platform.OS
提供了平台判断,开发者可以根据平台实现不同的逻辑
import { Platform } from '@hippy/react';
const ISWEB = Platform.OS === 'web';
handleGoto (url) {
if (ISWEB) {
window.open(url)
return;
} else {
// 调用原生跳转逻辑
}
}
3. 优缺点
3.1 优点
- 减少开发量,提高开发效率
- 在app内体验好
- app实现热更新,快速发布
3.2 缺点
- 需要抛弃一些平台特性,例如CSS的伪元素,transition等,某种情况下增加了开发复杂度
Hippy
暂时对Navigator
支持较弱,是通过创建新的Hippy
实例来实现多页面,页面间的数据同步比较麻烦Hippy
页面是在终端的一个View Container
中,因此安卓物理返回键需要做特殊处理- 部分组件尚未实现多端接口统一,例如
@hippy/react-web
中的ScrollView
组件的style
属性尚未支持数组格式