距离 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 发布》 一文中有详细说明。
用法
首先需要安装插件 @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 的所有组件进行了测试。结果显示有相当一部分的组件能直接运行在小程序环境中。
示例项目仓库地址:
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
即可,详细用法请见文档。
效果图:
Vue DevTools
安装并配置使用 @tarojs/plugin-vue-devtools
即可,详细用法请见文档。
效果图:
修复百度小程序 flex 布局的问题
在过去很长一段时间里,Taro 3 在百度小程序里是不支持使用 flex 布局的。原因是逻辑层的每个 Taro DOM 节点都在渲染层使用一个对应的 <template>
进行渲染,而百度小程序会把 <template>
渲染成一个真实节点。
非常感谢 @SyMind 的 PR,帮助 Taro 绕过了此问题。从 Taro 3.2 开始,部分组件在百度小程序中也能够使用 flex 布局。
升级指南
从 v2.x 升级的同学需要先按 迁移指南 进行操作。
从 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 适配小组。
RoadMap:
欢迎各位开发者参与讨论和共建~
快应用
此外,社区大佬 @bgfist 正在为 Taro 开发支持快应用的功能。也欢迎各位开发者参与讨论和共建,相关 PR。
感恩
时光飞逝,1 年前 Taro 3 正式发布,Taro 逐渐成为被社区喜欢、信赖的开源项目。未来我们也将继续做好 Taro 的开源工作,同时也希望社区有更多的开发者参与进来,无论是提出 Issues、在论坛发帖、提交 PR 还是帮助建设周边生态等。让我们一起把 Taro 做好,做强。
最后,衷心感谢为 Taro 从 v3.2 走到 v3.3 贡献过代码的各位同学!