跳到主要内容

Taro 正式发布 3.1 版本

· 阅读需 10 分钟
JJ

自 Taro 3.1 体验版推出后,我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper 组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。

经历了 12 个 beta 版本后,终于迎来了 3.1 正式版 🎉

一、Highlights

1. 开放式架构

近年来业界推出的小程序平台越来越多,但 Taro 核心维护的平台只有 6 个,因此常常有同学提出能不能支持某某平台的 Feature Request。

基于目前的架构,支持一个新的平台开发复杂度高,同时社区也难以参与贡献。

为此我们把 Taro 打造成为一个开放式框架,通过端平台插件能支持任意小程序平台

基于开放式架构,我们新增了一些有趣的插件,也十分期待大家利用它施展创意。

新增的插件:

插件功能
@tarojs/plugin-platform-weapp-qy编译企业微信小程序
@tarojs/plugin-platform-alipay-dd编译钉钉小程序
@tarojs/plugin-platform-alipay-iot编译支付宝 IOT 小程序
@tarojs/plugin-inject为所有小程序平台快速新增 API组件调整组件属性

2. 新增小程序性能优化组件 CustomWrapper

Taro3 使用 <template> 进行渲染,所有的 setData 都由页面对象调用。如果页面结构比较复杂,应用更新的性能就会下降。

为此我们引入了一个基础组件 CustomWrapper,它的作用是创建一个原生自定义组件。对后代节点的 setData 将由此自定义组件进行调用,达到局部更新的效果,从而提升更新性能。

开发者可以使用 CustomWrapper 去包裹遇到更新性能问题的组件:

<CustomWrapper>
<GoodsList>
<Item />
<Item />
// ...
</GoodsList>
</CustomWrapper>

更详细的性能优化原理请见《Taro 助力京喜拼拼项目性能体验优化》

3. 原生小程序渐进式混合使用 Taro 开发

过去我们对在 Taro 项目中混合使用原生的支持度较高。相反地,对在原生项目中混合使用 Taro 却没有太重视。但是市面上有着存量的原生开发小程序,他们接入 Taro 开发的改造成本往往非常大,最后只得放弃混合开发的想法。

经过与京喜拼拼项目的合作,也驱使了我们更加关注这部分需求。Taro 推出了一套完整的原生项目混合使用 Taro 的方案。

方案主要支持了三种场景:

  • 在原生项目中使用 Taro 开发的页面。(已完成)
  • 在原生项目的分包中运行完整的 Taro 项目。(已完成)
  • 在原生项目中使用 Taro 开发的自定义组件。(将在 v3.1.3 版本中支持)

希望以上方案能满足打算逐步接入 Taro 开发的同学。更多意见也欢迎在 Github 上给我们留言。

4. 拥抱 React 17、TypeScript 4

4.1. 使用方法

新项目:

模板默认依赖 React 17、TypeScript 4,可以直接使用。

旧项目:

手动升级项目依赖:

  • react: ^17.0.0
  • react-dom: ^17.0.0
  • typescript: ^4.1.0
  • @typescript-eslint/parser: ^4.15.1
  • @typescript-eslint/eslint-plugin: ^4.15.1

设置 ESLint 配置:

// .eslintrc
module.exports = {
extends: ['taro/react'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
},
}

4.2. React 默认支持 New JSX Transform

New JSX Transform 让开发者不再需要在书写 JSX 前先引入 React

如果不希望打开此功能,可以修改 Babel 配置的 reactJsxRuntime 选项为 classes

// babel.config.js
module.exports = {
presets: [
[
'taro',
{
framework: 'react',
ts: true,
reactJsxRuntime: 'classes',
},
],
],
}

4.3. React H5 端默认开启 fast-refresh

如果不希望打开此功能,可以修改 Taro 配置和 Babel 配置:

// config/index.js
const config = {
h5: {
devServer: {
hot: false,
},
},
}

// babel.config.js
module.exports = {
presets: [
[
'taro',
{
framework: 'react',
ts: true,
hot: false,
},
],
],
}

二、Breakings

1. React

项目的 React 版本必须 >= 16.14.0,或使用 17.0.0+

2. Vue2

修复 Vue2 入口组件生命周期多次触发的问题,#7179

用户编写的入口组件需要修改如下:

// app.js

// 3.0 中需要创建 Vue 对象
const App = new Vue({})

// 3.1 中只需要返回对象字面量
const App = {}

3. Linaria

使用 Linaria 时,需要修改 linaria.config.js 的内容。

linaria.config.js
module.exports = {
rules: [
{
action: require('linaria/evaluators').shaker,
},
{
// 此处的正则有改变
test: /node_modules[\/\\](?!@tarojs)/,
action: 'ignore',
},
],
}

三、特性

  • 组件 View 增加 catchMove 属性,解决滚动穿透问题。
  • 同步所有内置小程序官方最新的 API、组件能力。

四、问题修复

1. 重要

  • 修复百度小程序渲染问题,#7293。
  • 修复、增强微信小程序转换为 Taro 的能力。
  • 优化打包体积。
  • 支付宝小程序支持引用自定义组件。
  • 修复小程序分享 API 在使用 redux 时无法生效的问题,#7232。

2. 小程序

  • 修复多端文件没按照 Webpack extension 配置解析的问题,#6786,#7265 。
  • 修复 style 属性设置失败的问题,#8678。

3. H5

  • 修复 H5 端 HMR 失效的问题。
  • 支持路由 404 时触发 App.onPageNotFound,#7474。
  • 修复表单组件 slot 兼容问题,#7363。
  • 修复 ViewText 组件多行截断样式失败问题,#7472 #6741。
  • 组件的 style 属性支持设置 CSS 变量,#7452。

五、升级指南

从 v2.x 升级的同学需要先按 迁移指南 进行操作。

从 v3.x 升级的同学,首先需要安装 v3.1 的 CLI 工具:

npm i -g @tarojs/cli

然后进入项目,删除 node_modulesyarn.lockpackage-lock.json

最后把 package.json 文件中 Taro 相关依赖的版本修改为 ^3.1.0,再重新安装依赖。至此升级结束。

六、未来规划

得益于 58 技术团队 的全力支持,Taro 3 即将支持 React Native,现已推出 3.2.0 的 Beta 版本,3.2.0 正式版将于本月底推出。欢迎抢先体验:《增加 React Native 支持的 Taro 3.2.0 版本测试通告》

七、感谢

开源不易,贵在坚持。Taro 团队衷心感谢各位参与过本项目开源建设的朋友,无论是为 Taro 提交过代码、建设周边生态,还是反馈过问题,甚至只是茶余饭后讨论、吐槽 Taro 的各位。

现诚挚邀请您与 Taro 官方团队交流您的使用情况,有你相伴,Taro 更加精彩!问卷地址

最后,特别感谢为 Taro 从 v3.0 走到 v3.1 贡献过代码的各位同学,不分先后:

  • @wuchangming
  • @SyMind
  • @zhuxianguo
  • @Songkeys
  • @vdfor
  • @ZeroTo0ne
  • @zhaoguoweiLLHC
  • @Spencer17x
  • @wingsico
  • @w91
  • @fjc0k
  • @Leechael
  • @southorange1228
  • @alexlees
  • @cncolder
  • @rottenpen
  • @gcxfd
  • @twocucao
  • @pengtikui
  • @kala888
  • @LengYXin
  • @iugo
  • @jin-yufeng
  • @xuchengzone
  • @csolin
  • @xiaoyao96
  • @baranwang
  • @fred8617
  • @huanz
  • @Cslove
  • @002huiguo
  • @jazzqi
  • @Jetsly
  • @yuezk
  • @lukezhange001
  • @k55k32
  • @Soul-Stone
  • @hisanshao
  • @gjc9620
  • @younthu
  • @digiaries
  • @GoodbyeNJN
  • @Swordword
  • @helsonxiao
  • @Ininit
  • @atzcl
  • @taoqf
  • @Aysnine
  • @cjz9032
  • @z3rog
  • @doublethinkio
  • @Jackyzm
  • @ywzou
  • @koalaink
  • @mosqlee
  • @wangjuerong
  • @kdxcxs
  • @LiHDong
  • @ryougifujino
  • @GitaiQAQ
  • @logix-o
  • @CallMeXYZ