乐趣区

关于javascript:Taro-33-alpha-发布用-antdesign-开发小程序

jiezi

小程序的设计并没有齐全遵循 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 标签映射为小程序组件，如：

// 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 选择器在小程序中不反对，如：

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

二、应用办法

降级 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']
}

三、示例我的项目

为了验证同构性能的可用性和成果，咱们对 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> 组件须要额定适配。

四、共建倡导

同构计划还在继续优化中，局部实现还没有最终定稿。欢送各位开发者到咱们的论坛下留言，提出您的宝贵意见～：同构计划 RFC。

另外，上述三款 Web UI 框架很多目前没能兼容的组件，只有针对小程序环境做一点兼容工作，是能够进行应用的。一款框架的生态须要官网和社区共同努力建设，单靠 Taro 团队及 300 多位贡献者的人力没方法撑起整个社区的生态。咱们心愿这三个兼容性示例我的项目能起到抛砖引玉的作用，吸引宽广开发者进行共建，一起欠缺上述组件库，甚至一直地引入更多的 Web 端生态库，让跨端开发变得更轻松。非常期待您的参加～

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

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

退出移动版