feat: 添加 Taro 3.3 文章

Author: huangli47

source/_posts/2021-04-26-Taro-3.3-alpha.md

@@ -0,0 +1,251 @@
+title: Taro 3.3 alpha 发布：用 ant-design 开发小程序？
+subtitle: Taro 3.3 alpha 发布，支持复用 Web 生态
+cover: https://img12.360buyimg.com/ling/jfs/t1/184622/15/992/477962/608630a0E139b83d6/f5657eddaef03ba2.png
+categories: Taro
+tags:
+  - Taro
+  - 小程序
+author:
+  nick: Chen-jj
+  github_name: Chen-jj
+date: 2021-04-26 15:15:08
+---
+
+小程序的设计并没有完全遵循 Web 规范，导致小程序生态和传统 Web 开发生态之间的割裂，海量优秀的 Web 物料并不能直接用于小程序开发。因而 Taro 在相当一段时间内生态都相对薄弱，UI 框架选择不多的问题更是深深困扰着开发者。
+
+另一方面，业界有着存量的 H5 应用，中短期内 H5 应用适配到小程序端的需要还会存在。我们希望能减少 H5 应用迁移到小程序端的成本，甚至能够直接运行在小程序端。
+
+Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态，直到 Taro 3.0 诞生后，这种想法有了落地的可能。下文将介绍基于 Taro 3.0 实现 H5 同构的思路与问题，以及我们尝试适配了三大移动端 UI 框架 **WEUI**、**Ant Design Mobile**、**VantUI** 的实验结果。
+
+## 一、实现思路
+
+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 标签映射为小程序组件，如：
+
+```js
+// Taro DOM 的序列化数据
+{
+  nn: 'img'
+}
+// 映射结果
+{
+  nn: 'image'
+}
+```
+
+完整的标签名映射规则请看：[RFC 附录一](https://github.com/NervJS/taro-rfcs/blob/html-support/rfcs/0004-rendering-html.md#%E4%B8%80%E6%A0%87%E7%AD%BE%E5%90%8D%E5%BD%B1%E5%B0%84)
+
+#### 2. 属性映射
+
+如果 HTML 标签的属性能在对应小程序组件的属性上找到对应，则进行映射，如：
+
+```js
+// Taro DOM 的序列化数据
+{
+  nn: 'a',
+  href: 'xxx'
+  target: '_blank'
+}
+// 映射结果
+{
+  nn: 'navigator',
+  url: 'xxx',
+  openType: 'navigate'
+}
+```
+
+完整的属性名映射规则请看：[RFC 附录二](https://github.com/NervJS/taro-rfcs/blob/html-support/rfcs/0004-rendering-html.md#%E4%BA%8C%E5%B1%9E%E6%80%A7%E5%90%8D%E5%BD%B1%E5%B0%84)
+
+#### 3. 事件映射
+
+把 HTML 特有的事件在小程序端找到相似的事件进行映射，如：
+
+| HTML 事件 | 小程序组件事件 |
+| :------- | :----------- |
+|  click   |      tap     |
+
+完整的事件映射规则请看：[RFC 附录三](https://github.com/NervJS/taro-rfcs/blob/html-support/rfcs/0004-rendering-html.md#%E4%B8%89%E4%BA%8B%E4%BB%B6%E5%BD%B1%E5%B0%84)
+
+### 样式
+
+#### 1. 标签选择器
+
+前文介绍了我们会把 HTML 标签映射为小程序组件，但是 H5 应用中使用到的 CSS 标签选择器就会失效。
+
+因此 Taro 使用了类名去进行模拟：
+
+1) 为所有 H5 标签都加上类名： `h5-${tagName}`。
+
+```js
+// 源代码
+<div />
+// 渲染结果
+<view class="h5-div" />
+```
+
+2) 使用 postcss 插件处理标签名选择器：
+
+```scss
+// 标签名选择器
+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 同步获取元素的尺寸：
+
+```js
+// h5
+const el = document.getElementById('#inner')
+const res = el.getBoundingClientRect()
+console.log(res)
+```
+
+但是在小程序中，获取元素尺寸的 API 是异步的：
+
+```js
+// 小程序
+const query = Taro.createSelectorQuery()
+query.select('#inner')
+  .boundingClientRect()
+  .exec(res => {
+    console.log(res)
+  })
+```
+
+因此不能兼容那些使用了同步 DOM API 去获取元素尺寸的组件。
+
+#### 2. DOM API 差异
+
+`<canvas>`、`<video>`、`<audio>` 等标签在 H5 端可以直接调用 `HTMLElement` 上的方法：
+
+```js
+// h5
+const el = document.getElementById('myVideo')
+el.play()
+```
+
+但是在 Taro 中，要调用组件上的原生方法，必须先创建对应的 `Context`：
+
+```js
+// 小程序
+const ctx = Taro.createVideoContext('myVideo')
+ctx.play()
+```
+
+#### 3. 样式限制
+
+部分样式或 CSS 选择器在小程序中不支持，如：
+
+- 通配符 *
+- 媒体查询
+- 属性选择器，当属性不是对应小程序组件的内置属性时
+
+## 二、使用方法
+
+### 升级 3.3.0-alpha 版本
+
+首先需要安装 v3.3 的 CLI 工具：
+
+```bash
+npm i -g @tarojs/cli@alpha
+```
+
+然后进入项目，把 `package.json` 文件中 taro 相关依赖的版本修改为 `^3.3.0-alpha.2`，再重新安装依赖（建议先把 **node_modules** 文件夹删除）。
+
+### 安装同构插件
+
+为了节省项目空间，同构功能是可选的，以 Taro 插件的形式提供。
+
+首先开发者需要安装插件 `@tarojs/plugin-html`：
+
+```bash
+npm i @tarojs/plugin-html
+```
+
+然后配置使用此插件：
+
+```js
+// config/index.js
+const config = {
+  // ...
+  plugins: [
+    '@tarojs/plugin-html'
+  ]
+}
+```
+
+## 三、示例项目
+
+为了验证同构功能的可用性和效果，我们对 CSS 样式库 **WEUI**、React 组件库 **Antd Design Mobile**、Vue2 组件库 **VantUI** 的所有组件进行了测试。
+
+测试效果比较理想，甚至稍微超出我们的预期，配合各组件库自身的按需加载能力，能以小巧的体积使用丰富的组件，相信各位开发者会喜欢这个功能。
+
+### WEUI
+
+仓库地址：[taro-weui](https://github.com/NervJS/taro-weui)
+
+WEUI 是一个 CSS 的样式库，与框架无关，兼容性比较高，大部分组件能直接使用。
+
+### Antd Mobile Design
+
+仓库地址：[taro-antd-mobile](https://github.com/NervJS/taro-antd-mobile)
+
+> Antd Mobile Design 官方已经相当久没有维护，此适配项目属于实验性质。
+
+能直接兼容使用的组件大概为 80%，主要问题在于：
+
+1. 组件库里广泛使用了 SVG，目前并不支持。
+2. 不能使用需要同步获取元素尺寸的部分组件。
+
+### VantUI
+
+仓库地址：[taro-vant](https://github.com/NervJS/taro-vant)
+
+VantUI 的组件十分丰富，能直接兼容使用的组件大概为 70%。部分开发者会在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能运行在微信小程序，因此对 VantUI 的直接适配是一个很好的补充。
+
+适配过程主要遇到的问题有：
+
+1. 少量组件内置的 SVG ICON 不能显示。
+2. 不能使用需要同步获取元素尺寸的部分组件。
+3. Vue `<transition>` 组件需要额外适配。
+
+## 四、共建倡议
+
+同构方案还在持续优化中，部分实现还没有最终定稿。欢迎各位开发者到我们的论坛下留言，提出您的宝贵意见～：[同构方案 RFC](https://github.com/NervJS/taro/discussions/9029)。
+
+另外，上述三款 Web UI 框架很多目前没能兼容的组件，只要针对小程序环境做一点兼容工作，是可以进行使用的。一款框架的生态需要官方和社区共同努力建设，单靠 Taro 团队及300多位贡献者的人力没办法撑起整个社区的生态。我们希望这三个兼容性示例项目能起到抛砖引玉的作用，吸引广大开发者进行共建，一起完善上述组件库，甚至不断地引入更多的 Web 端生态库，让跨端开发变得更轻松。十分期待您的参与～
+
+
+
+