hippy-react 三端同构

17盛

2020-04-05 18:55 1758

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 {
	    // 调用原生跳转逻辑
	}
}