Hippy
(https://github.com/Tencent/Hippy) 是腾讯在2019年12月20日开源跨端框架。
Hippy
在腾讯内部已经运行了3年,支持了18款线上业务,日均PV过亿,形成了一套完整的生态。
与其他跨端框架相比,Hippy紧贴W3C标准,对前端开发者更加友好,同时支持 React
和 Vue
两大前端主流框架
Hippy 官方文档: http://hippyjs.org/#/guide/integration
@hippy/react
@hippy/react
是基于 Facebook React
的官方自定义渲染器 react-reconciler
重新开发的 React
到终端的渲染层,可以使用 React 16.+
的大部分特性。
在语法上 @hippy/react
更加接近底层终端,使用了类似 React Native
的语法。
*注*: 由于 Hippy
页面挂在一个节点上,所以 Portals
暂时无法支)
@hippy/react-web
该项目仍在开发中,有不完善的地方
考虑到客户端页面在不少场景下,需要提供web版本,例如分享页,h5版本的应用。
Hippy
提供了 @hippy/react-web
框架来支持 @hippy/react
项目通过转译,生成可以运行在浏览器中的版本,从框架上支持三端同构,减少开发成本
@hippy/react-web
是通过实现 @hippy/react
的组件的方式,每个组件提供相同的功能和相同的api,从而达到直接将 @hippy/react
项目代码直接转化为 web
版本
Hippy 可以便捷地实现三端重构
@hippy/react
使用 Virtual Dom
维护组件的布局,通过 Native Renderer
对组件进行渲染,在终端中显示出来@hippy/react-web
通过 Component
实现 @hippy/react
组件的功能,同时使用 Adapters
实现原生组件的特性Hippy
开发的项目,只组要简单进行打包配置,就可以实现多端兼容。在实际的业务开发过程中,会遇到很多需要同时出现的app和web的页面需求,使用hippy可以简单实现这一需求。
使用 Hippy
进行三端同构,主要思路是:
StyleSheet
来管理页面组件样式\*\*.hippy.jsx
\*\*.web.jsx
window
等浏览器的全局变量,所以在终端中调用这些变量会导致页面挂掉创建
Hippy
项目,可以参考 Hippy-React脚手架开发,快速创建项目
build/ // webpack 配置
├── hippy-webpack.android-vendor.js // 打包android基础vendo
├── hippy-webpack.android.js // 打包android业务代码配置
├── hippy-webpack.dev.js // 终端本地调试配置
├── hippy-webpack.ios-vendor.js // 打包ios基础vendo
├── 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 // 配置vendo
index.js // 原生入口
index.web.js // web 入口
@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',
},
},
* 终端入口文件
// 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();
// 使用serviceWorke
serviceWorker.unregister();
Hippy
通过 Platform.OS
提供了平台判断,开发者可以根据平台实现不同的逻辑
import { Platform } from '@hippy/react';
const ISWEB = Platform.OS === 'web';
handleGoto (url) {
if (ISWEB) {
window.open(url)
return;
} else {
// 调用原生跳转逻辑
}
}
Hippy
暂时对 Navigator
支持较弱,是通过创建新的 Hippy
实例来实现多页面,页面间的数据同步比较麻烦Hippy
页面是在终端的一个 View Container
中,因此安卓物理返回键需要做特殊处理@hippy/react-web
中的 ScrollView
组件的 style
属性尚未支持数组格式原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。