距离 Taro 3.3 第一个 alpha 版本的发布，已过去三个月的时间。期间我们不断地对 3.3 版本进行打磨，除了优化 H5 同构方案外，还引入了一些提升开发体验的新特性和修复了若干重要问题。
支持使用 H5 标签
—
Taro 3.3 最重要的特性就是支持使用 H5 标签进行开发，让开发者在小程序环境中复用部分的 Web 生态。
例如在 React 中可以这样使用：
function Index () {
return (
<div>Hello World!</div>
)
}
相关背景及实现思路在 《Taro 3.3 alpha 发布》[1] 一文中有详细说明。
用法
首先需要安装插件 @tarojs/plugin-html：
$ npm i @tarojs/plugin-html
然后配置使用即可：
// config/index.js
const config = {
// ...
plugins: [
'@tarojs/plugin-html'
]
}
插件的详细用法请见文档[2]。
示例项目
为了验证同构功能的可用性和效果，我们对 CSS 样式库 WEUI、React 组件库 Antd Design Mobile、Vue2 组件库 VantUI 的所有组件进行了测试。结果显示有相当一部分的组件能直接运行在小程序环境中。
示例项目仓库地址：
兼容 WeUI 的例子[3]
兼容 Antd Design Mobile 的例子[4]
兼容 VantUI 的例子[5]
What's news
在开发 @tarojs/plugin-html 插件的时候，我们发现需要为 Taro 模拟的 DOM APIs 新增一些方法，如 getBoundingClientRect 等。但是对于不使用这个插件的开发者来说这些 API 是冗余的，会增大包体积。因此我们对 @tarojs/runtime 进行了重构，把 DOM APIs 做成可插拔式，让开发者可以选择在最终的编译结果里只存在哪些 DOM APIs。
本次对运行时的重构也是为了 Taro 3.4 版本作铺垫。React、Vue2 和 Vue3 这些框架运行时需要的 DOM APIs 是不尽相同的，但是目前假设开发者使用了 React，编译结果里仍然会存在着只有 Vue2 或 Vue3 依赖的 DOM APIs。Taro 3.4 将会把对各 Web 开发框架的支持逻辑抽离成为一个个插件，如：@tarojs/plugin-framework-react 等，目的是剔除掉冗余代码。
例如，假设开发者没有使用渲染 HTML 文本的 API（如 React 的 dangerouslySetInnerHTML）。这时可以修改 Taro 编译配置的 mini.runtime.enableInnerHTML 选项，令最终的打包结果剔除掉相关代码：
// config/index.js
config = {
// ...
mini: {
runtime: {
enableInnerHTML: false
}
}
}
小程序支持使用框架的 DevTools
—
自 Taro 3.x 改造为运行时框架后，有不少同学抱怨小程序开发者工具的 AppData 面板看到的都是 Taro 虚拟 DOM 的序列化结果，而不是页面的 data 数据。为了缓解这个问题，并进一步地提升开发者的开发体验，Taro 对 React DevTools 和 Vue DevTools 进行了适配。只需要简单地配置，就能够和开发 Web 应用时一样使用框架的 DevTools。
React DevTools
安装并配置使用 @tarojs/plugin-react-devtools 即可，详细用法请见文档[6]。
效果图：
Vue DevTools
安装并配置使用 @tarojs/plugin-vue-devtools 即可，详细用法请见文档[7]。
效果图：
修复百度小程序 flex 布局的问题
—
在过去很长一段时间里，Taro 3 在百度小程序里是不支持使用 flex 布局的。原因是逻辑层的每个 Taro DOM 节点都在渲染层使用一个对应的 <template> 进行渲染，而百度小程序会把 <template> 渲染成一个真实节点。
非常感谢 @SyMind[8] 的 PR，帮助 Taro 绕过了此问题。从 Taro 3.2 开始，部分组件在百度小程序中也能够使用 flex 布局。
相关的讨论和提交可以浏览 #6015[9] #9529[10]
升级指南
—
从 v2.x 升级的同学需要先按 迁移指南[11] 进行操作。
从 v3.x 升级的同学，首先需要安装 v3.3 的 CLI 工具：
npm i -g @tarojs/cli
然后手工修改 package.json 文件中 Taro 相关依赖的版本，再重新安装依赖；或者使用 taro update project 更新依赖。
如果安装失败或打开项目失败，可以删除 node_modules、yarn.lock、package-lock.json 后重新安装依赖再尝试。
The End
—
Taro 3.4
下一个 minor 版本，我们会考虑把对各个 Web 开发框架的支持逻辑拆分为对应的插件。让开发者可以以插件的形式为 Taro 拓展支持一门新的开发框架，我们会运用此能力进行对 PReact 的支持，希望能进一步减少用户的包体积。
鸿蒙应用 && OpenHarmony
近期我们也一直在探索对鸿蒙应用 && OpenHarmony的适配，目前已有一系列的讨论和开发计划，也有可以运行的 Demo，详情请见 鸿蒙 && OpenHarmony 适配小组[12]。
RoadMap：
欢迎各位开发者参与讨论和共建～
快应用
此外，社区大佬 @bgfist[13] 正在为 Taro 开发支持快应用的功能。也欢迎各位开发者参与讨论和共建，相关 PR[14]。
感恩
时光飞逝，1 年前 Taro 3 正式发布，Taro 逐渐成为被社区喜欢、信赖的开源项目。未来我们也将继续做好 Taro 的开源工作，同时也希望社区有更多的开发者参与进来，无论是提出 Issues、在论坛发帖、提交 PR 还是帮助建设周边生态等。让我们一起把 Taro 做好，做强。
最后，衷心感谢为 Taro 从 v3.2 走到 v3.3 贡献过代码的各位同学！
参考资料
[1]
《Taro 3.3 alpha 发布》: https://docs.taro.zone/blog/2021-04-22-Taro-3.3-alpha
[2]
支持使用 H5 文档: https://docs.taro.zone/docs/use-h5
[3]
兼容 WeUI 的例子: https://github.com/NervJS/taro-weui
[4]
兼容 Antd Design Mobile 的例子: https://github.com/NervJS/taro-antd-mobile
[5]
兼容 VantUI 的例子: https://github.com/NervJS/taro-vant
[6]
react-devtools 文档: https://docs.taro.zone/docs/react-devtools
[7]
vue-devtools 文档: https://docs.taro.zone/docs/vue-devtools
[8]
@SyMind: https://github.com/SyMind
[9]
#6015: https://github.com/NervJS/taro/issues/6015
[10]
#9529: https://github.com/NervJS/taro/pull/9529
[11]
迁移指南: https://taro-docs.jd.com/taro/docs/next/migration
[12]
鸿蒙 && OpenHarmony 适配小组: https://github.com/NervJS/taro/discussions/categories/%E9%B8%BF%E8%92%99-openharmony-%E9%80%82%E9%85%8D%E5%B0%8F%E7%BB%84
[13]
@bgfist: https://github.com/bgfist
[14]
PR: https://github.com/NervJS/taro/pull/9743
发表评论 取消回复