Taro 正式发布 3.3 版本：支持使用 H5 标签与框架 DevTools

内容简介：距离 Taro 3.3 第一个 alpha 版本的发布，已过去三个月的时间。期间我们不断地对 3.3 版本进行打磨，除了优化 H5 同构方案外，还引入了一些提升开发体验的新特性和修复了若干重要问题。 支持使用 H5 标签 Taro 3...

距离 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 的所有组件进行了测试。结果显示有相当一部分的组件能直接运行在小程序环境中。

示例项目仓库地址：

• 兼容 WeUI 的例子

• 兼容 Antd Design Mobile 的例子

• 兼容 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 布局。

相关的讨论和提交可以浏览 #6015 #9529

升级指南

从 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 贡献过代码的各位同学！

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• quickly 1.3 版本发布，CSS 前端框架
• WebMagic 0.7.1 版本发布，Java 爬虫框架
• PHP 开发框架 TimoPHP 1.7.0 版本发布
• WebMagic 0.7.0 版本发布，Java 爬虫框架
• WebMagic 0.7.2 版本发布，Java 爬虫框架
• DiQuick Web 前端框架 1.2.3 版本更新

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。