Taro 3.3 alpha 发布：用 ant-design 开发小程序？

小程序的设计并无彻底遵循 Web 规范，致使小程序生态和传统 Web 开发生态之间的割裂，海量优秀的 Web 物料并不能直接用于小程序开发。于是 Taro 在至关一段时间内生态都相对薄弱，UI 框架选择很少的问题更是深深困扰着开发者。

另外一方面，业界有着存量的 H5 应用，中短时间内 H5 应用适配到小程序端的须要还会存在。咱们但愿能减小 H5 应用迁移到小程序端的成本，甚至可以直接运行在小程序端。

Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态，直到 Taro 3.0 诞生后，这种想法有了落地的可能。下文将介绍基于 Taro 3.0 实现 H5 同构的思路与问题，以及咱们尝试适配了三大移动端 UI 框架 WEUI、Ant Design Mobile、VantUI 的实验结果。

1、实现思路

Taro 3.0 是一款重运行时的跨端框架，它经过模拟实现浏览器的 BOM 和 DOM API 实现了对 React、Vue 等 Web 开发框架的兼容。

既然已经有了浏览器环境的 BOM 和 DOM API，Taro 应用和 Web 应用之间的鸿沟在于小程序组件和 HTML 标签之间的差别。

<!--truncate-->

支持渲染 H5 标签

Taro3 的渲染数据流以下：

前端框架 -> Taro DOM -> 小程序 data

HTML 标签和小程序组件的标签名、属性、事件是有差别的，而前端框架无需感知这些差别。

所以前端框架适配层、Taro DOM 层不须要改动，只要在 Taro DOM 序列化为小程序 data 这一步做映射便可。

1. 标签名映射

HTML 标签相对小程序组件封装程度更低、功能更简单，能够看做是小程序组件的子集。所以能够按必定的规则，把 HTML 标签映射为小程序组件，如：

// Taro DOM 的序列化数据
{
  nn: 'img'
}
// 映射结果
{
  nn: 'image'
}

完整的标签名映射规则请看：RFC 附录一

2. 属性映射

若是 HTML 标签的属性能在对应小程序组件的属性上找到对应，则进行映射，如：

// Taro DOM 的序列化数据
{
  nn: 'a',
  href: 'xxx'
  target: '_blank'
}
// 映射结果
{
  nn: 'navigator',
  url: 'xxx',
  openType: 'navigate'
}

完整的属性名映射规则请看：RFC 附录二

3. 事件映射

把 HTML 特有的事件在小程序端找到类似的事件进行映射，如：

HTML 事件	小程序组件事件
click	tap

完整的事件映射规则请看：RFC 附录三

样式

1. 标签选择器

前文介绍了咱们会把 HTML 标签映射为小程序组件，可是 H5 应用中使用到的 CSS 标签选择器就会失效。

所以 Taro 使用了类名去进行模拟：

1) 为全部 H5 标签都加上类名： h5-${tagName}。

// 源代码
<div />
// 渲染结果
<view class="h5-div" />

2) 使用 postcss 插件处理标签名选择器：

// 标签名选择器
div {}
// 经 postcss 插件处理后变为类名选择器
.h5-div {}

2. 浏览器默认样式

Taro 提供两种内置的浏览器默认样式，能够直接引入生效：

• @tarojs/taro/html.css: W3C HTML4 的内置样式。只有 HTML4 标签样式，体积较小，兼容性强，能适应大多数状况。
• @tarojs/taro/html5.css: Chrome(Blink) HTML5 的内置样式。内置样式丰富，包括了大多数 HTML5 标签，体积较大，不必定支持全部小程序容器。

限制

理想很美好，但现实却略显骨感。即便 Taro 能实现 BOM、DOM API，支持使用 HTML 标签等，同构方案仍是存在着一些框架层面抹平不了的差别。如下列举出若干主要限制：

1. 获取元素尺寸

在 H5 中咱们能够调用 DOM API 同步获取元素的尺寸：

// h5
const el = document.getElementById('#inner')
const res = el.getBoundingClientRect()
console.log(res)

可是在小程序中，获取元素尺寸的 API 是异步的：

// 小程序
const query = Taro.createSelectorQuery()
query.select('#inner')
  .boundingClientRect()
  .exec(res => {
    console.log(res)
  })

所以不能兼容那些使用了同步 DOM API 去获取元素尺寸的组件。

2. DOM API 差别

<canvas>、<video>、<audio> 等标签在 H5 端能够直接调用 HTMLElement 上的方法：

// h5
const el = document.getElementById('myVideo')
el.play()

可是在 Taro 中，要调用组件上的原生方法，必须先建立对应的 Context：

// 小程序
const ctx = Taro.createVideoContext('myVideo')
ctx.play()

3. 样式限制

部分样式或 CSS 选择器在小程序中不支持，如：

• 通配符 *
• 媒体查询
• 属性选择器，当属性不是对应小程序组件的内置属性时

2、使用方法

升级 3.3.0-alpha 版本

首先须要安装 v3.3 的 CLI 工具：

npm i -g @tarojs/cli@alpha

而后进入项目，把 package.json 文件中 taro 相关依赖的版本修改成 ^3.3.0-alpha.2，再从新安装依赖（建议先把 node_modules 文件夹删除）。

安装同构插件

为了节省项目空间，同构功能是可选的，以 Taro 插件的形式提供。

首先开发者须要安装插件 @tarojs/plugin-html：

npm i @tarojs/plugin-html

而后配置使用此插件：

// config/index.js
const config = {
  // ...
  plugins: [
    '@tarojs/plugin-html'
  ]
}

3、示例项目

为了验证同构功能的可用性和效果，咱们对 CSS 样式库 WEUI、React 组件库 Antd Design Mobile、Vue2 组件库 VantUI 的全部组件进行了测试。

测试效果比较理想，甚至稍微超出咱们的预期，配合各组件库自身的按需加载能力，能以小巧的体积使用丰富的组件，相信各位开发者会喜欢这个功能。

WEUI

仓库地址：taro-weui

WEUI 是一个 CSS 的样式库，与框架无关，兼容性比较高，大部分组件能直接使用。

Antd Mobile Design

仓库地址：taro-antd-mobile

Antd Mobile Design 官方已经至关久没有维护，此适配项目属于实验性质。

能直接兼容使用的组件大概为 80%，主要问题在于：

1. 组件库里普遍使用了 SVG，目前并不支持。
2. 不能使用须要同步获取元素尺寸的部分组件。

VantUI

仓库地址：taro-vant

VantUI 的组件十分丰富，能直接兼容使用的组件大概为 70%。部分开发者会在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能运行在微信小程序，所以对 VantUI 的直接适配是一个很好的补充。

适配过程主要遇到的问题有：

1. 少许组件内置的 SVG ICON 不能显示。
2. 不能使用须要同步获取元素尺寸的部分组件。
3. Vue <transition> 组件须要额外适配。

4、共建倡议

同构方案还在持续优化中，部分实现尚未最终定稿。欢迎各位开发者到咱们的论坛下留言，提出您的宝贵意见～：同构方案 RFC。

另外，上述三款 Web UI 框架不少目前没能兼容的组件，只要针对小程序环境作一点兼容工做，是能够进行使用的。一款框架的生态须要官方和社区共同努力建设，单靠 Taro 团队及300多位贡献者的人力没办法撑起整个社区的生态。咱们但愿这三个兼容性示例项目能起到抛砖引玉的做用，吸引广大开发者进行共建，一块儿完善上述组件库，甚至不断地引入更多的 Web 端生态库，让跨端开发变得更轻松。十分期待您的参与～

欢迎关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。