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

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

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

1、Highlights

1. 开放式架构

近年来业界推出的小程序平台愈来愈多，但 Taro 核心维护的平台只有 6 个，所以经常有同窗提出能不能支持某某平台的 Feature Request。react

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

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

插件开发者无需修改 Taro 项目源码，便可编写出一个端平台插件。
插件使用者只需安装、配置端平台插件，便可把代码编译到指定平台。

基于开放式架构，咱们新增了一些有趣的插件，也十分期待你们利用它施展创意。sql

新增的插件：

插件	功能
@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 都由页面对象调用。若是页面结构比较复杂，应用更新的性能就会降低。typescript

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

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

<CustomWrapper>
  <GoodsList> <Item /> <Item /> // ... </GoodsList>
</CustomWrapper>
复制代码

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

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

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

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

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

在原生项目中使用 Taro 开发的页面。
在原生项目的分包中运行完整的 Taro 项目。
在原生项目中使用 Taro 开发的自定义组件。

但愿以上方案能知足打算逐步接入 Taro 开发的同窗。更多意见也欢迎在 Github 上给咱们留言。

4. 拥抱 React 1七、TypeScript 4

4.1. 使用方法

新项目：

模板默认依赖 React 1七、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
    }]
  ]
}
复制代码

2、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"
    }
  ]
}
复制代码

3、特性

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

4、问题修复

1. 重要

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

2. 小程序

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

3. H5

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

5、升级指南

从 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，再从新安装依赖。至此升级结束。

6、将来规划

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

7、感谢

开源不易，贵在坚持。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

欢迎提交你用 Taro 写的案例：docs.taro.zone/showcase

Taro 公众号「 Taro社区」，欢迎关注。