Taro 正式发布 3.1 版本：面向定制化的小程序开发 #8935

honlyHuang · 2021-03-17T06:17:37Z

honlyHuang
Mar 17, 2021
Maintainer

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

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

一、Highlights

1. 开放式架构

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

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

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

插件开发者无需修改 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 的内容。

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

三、特性

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

四、问题修复

1. 重要

修复百度小程序渲染问题，Taro 3 百度小程序每次 setData 都会导致页面全量重新渲染，导致图片闪烁、输入框无法正常使用等问题 #7293。
修复、增强微信小程序转换为 Taro 的能力。
优化打包体积。
支付宝小程序支持引用自定义组件。
修复小程序分享 API 在使用 redux 时无法生效的问题，onShareAppMessage在使用react-redux无法生效 #7232。

2. 小程序

修复多端文件没按照 Webpack extension 配置解析的问题，[Taro 3] Webpack 建议使用 resolve.extensions 替换 MultiPlatformPlugin #6786，taro3.0.5版用vue开发进行多端处理组件文件异常 #7265 。
修复 style 属性设置失败的问题，内联style，样式属性驼峰模式h5模式下无效？ #8678。

3. H5

修复 H5 端 HMR 失效的问题。
支持路由 404 时触发 App.onPageNotFound，Taro 3.0.8 H5路由未找不触发componentDidNotFound #7474。
修复表单组件 slot 兼容问题，@tarojs/components 的组件Form 内部的Input显示隐藏报错Failed to execute 'removeChild' on 'Node' #7363。
修复 View 和 Text 组件多行截断样式失败问题，Text设置 webkit-line-clamp 及text-overflow 后在H5 里出现渲染异常 #7472 [Taro Next rc.5] Text 文字溢出省略表现异常 #6741。
组件的 style 属性支持设置 CSS 变量，view标签上的style属性只能生成常规属性，var()函数可用属性无法生成，如"--main-color: #ff01cd" #7452。

五、升级指南

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

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

npm i -g @tarojs/cli

然后进入项目，删除 node_modules、yarn.lock、package-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

vdfor · 2021-03-17T07:51:43Z

vdfor
Mar 17, 2021

perfect!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Taro 正式发布 3.1 版本：面向定制化的小程序开发 #8935

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Taro 正式发布 3.1 版本：面向定制化的小程序开发 #8935

honlyHuang Mar 17, 2021 Maintainer

一、Highlights

1. 开放式架构

新增的插件：

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

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

4. 拥抱 React 17、TypeScript 4

4.1. 使用方法

新项目：

旧项目：

4.2. React 默认支持 New JSX Transform

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

二、Breakings

1. React

2. Vue2

3. Linaria

三、特性

四、问题修复

1. 重要

2. 小程序

3. H5

五、升级指南

六、未来规划

七、感谢

Replies: 1 comment

vdfor Mar 17, 2021

honlyHuang
Mar 17, 2021
Maintainer

vdfor
Mar 17, 2021