chore(release): publish 3.1.1

修复

小程序

• 修复 Cannot read property 'setExtraStackFrame' of undefined 报错，#8750
• 修复 Vue3 style 设置 CSS 变量解析错误问题，#8736
• 修复第三方组件、CustomWrapper 组件使用失败的问题，#8756
• 补全微信小程序中 Video 组件广告相关的事件
• 解决事件冒泡失败的问题，#8757

chore(release): publish 3.1.0

Breakings

一、React

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

二、Vue2

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

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

// app.js

// 3.0
const App = new Vue({})

// 3.1
const App = {}

三、Linaria

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

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

HighLights

一、开放式架构

近年来业界推出的小程序平台越来越多，但 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、组件，调整组件属性等

二、新增小程序性能优化组件 CustomWrapper

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

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

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

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

三、原生小程序支持渐进式使用 Taro 开发

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

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

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

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

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

四、拥抱 React 17、TypeScript 4

1. 如何使用

新项目：

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

旧项目：

手动升级项目中 react、react-dom、typescript、@typescript-eslint/parser、@typescript-eslint/eslint-plugin 的版本。

2. 改动

3.1 默认支持 New JSX Transform，开发者可以不在书写 JSX 前先引入 React

旧项目升级 React 17 的开发者还需要设置 ESLint 配置：

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

如果不希望打开此功能，可以配置 Babel Taro preset 的 reactJsxRuntime 选项为 classes：

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

2.2 H5 端编译 React 时默认开启 fast refresh

如果不希望打开此功能，可以修改 Taro 配置项和配置 Babel Taro preset：

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

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

特性

• 组件 View 增加 catchMove 属性，解决滚动穿透问题。

修复

重要

• 修复百度小程序渲染问题，#7293
• 修复、增强微信小程序转换为 Taro 的能力。
• 支付宝小程序支持引用自定义组件
• 同步所有内置小程序官方最新的 API、组件能力。
• 修复小程序分享 API 在使用 redux 时无法生效的问题，#7232
• 修复 H5 端 HMR 刷新失效的问题。

小程序

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

H5

• 支持路由 404 时触发 App.onPageNotFound，#7474
• 修复表单组件 slot 兼容问题，#7363
• 修复 View 和 Text 组件多行截断样式失败问题，#7472 #6741
• 组件的 style 属性支持设置 CSS 变量，#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，再重新安装依赖。至此升级结束。

End

最后，衷心感谢为 Taro 从 v3.0 走到 v3.1 贡献过代码的各位同学！

chore(release): publish 3.0.28

修复

小程序

• 修复 VirtualList 组件调用 scrollTo 后回到顶部的问题，#8560，by @GitaiQAQ
• 补全云托管调用 wx.cloud.callContainer API，by @logix-o
• 修复百度小程序下生成 .frameworkinfo 文件问题

H5

• 修复 Taro.pageScrollTo 在参数 duration = 0 时无法跳转的问题，by @CallMeXYZ

chore(release): publish 3.0.27

修复

• 修复项目 copy 配置不能对单项进行配置的问题，by @cjz9032

小程序

• 修复 customWrapper 优化失效的问题，by @z3roG
• 补全 wx.cloud.Cloud API，#8623，by @doublethinkio
• 修复百度小程序渲染问题，#7293

H5

• 修复多次调用 chooseImage 时更改 count 配置的数量，但 multiple 属性不更新的问题，#8484，by @Jackyzm

其它

• chooseImage 的运行结果中能获取到原始的浏览器 File 对象，by @ywzou

祝大家新春快乐~

chore(release): publish 3.0.26

修复

小程序

• 修复 Vue3 页面 onShow 生命周期的触发时机，#8326，by @koalaink
• 修复 pure-view 在设置属性后不能改变为 static-view 的问题
• 补全支付宝 Input 组件的 enableNative 属性，#7226
• 补全 previewMedia API，#8594
• 允许 live-pusher 组件设置子组件，#8490

H5

• 修复 useRouter 中获取的 router.path 字段为空字符串的问题，#7296，by @ZeroTo0ne
• 修复使用 pageScrollTo 将 scrollTop 设置为 0 会报错的问题，#8408，by @jin-yufeng
• 修复使用 taro-ui 编译报错的问题

chore(release): publish 3.0.25

特性

小程序

• 增加原生混合 Taro 的编译模式
• 引用原生组件支持 alias，#8472
• CLI 插件增加 onCompilerMake 钩子用于获取 Webpack Compilation 对象

修复

小程序

• 修复解析 html 不显示换行问题，#7003 #8549，by @mosqlee

H5

• 修复 Video 组件 ref 为空而无法暂停播放的问题，#8550，by @wangjuerong

其它

• 编译提示文案中一并输出时间，by @kdxcxs

chore(release): publish 3.0.24

修复

小程序

• 补充陀螺仪相关 API，by @ZeroTo0ne ，#8496
• 修复支付宝、百度、头条等小程序运行直接报错的问题
• 修复百度 Text 组件不显示文本内容的问题
• 修复 React 在事件回调里没有合并更新的问题，#8516
• 修复 react 不能取消事件监听的问题
• 修复 View、Text、Image 组件在切换属性或事件时，没有切换正确模板的问题, #8520
• 修复组件 id 为是 number 类型时，事件失效的问题，#8515

H5

• 修复 TabBar 导致的 onPageScroll 事件失效的问题

Typings

• 修复 navigateTo 回调 success 入参的类型缺少 eventChannel 类型的问题，by @Aysnine ，#8506

chore(release): publish 3.0.23

特性

• 支持在小程序 app 对象上挂载自定义属性

修复

小程序

• CustomWrapper 组件、协助递归的内部自定义组件设置为虚拟节点，解决 DOM 深度达到一定层级后 flex 样式失效问题，by @jin-yufeng
• 修复全局样式重复打包的问题
• 修复 window.raf window.caf 以 apply 方式调用时使用报错的问题，#7749
• 修复 Vue3 运行时报错，#8426
• 修复 React、Vue、Vue3 都不能使用 vant 的 kebab-case 事件的问题，#8407 #8242 #8364
• 修复 Vue3 使用第三方组件时事件绑定错误的问题

H5

• 修复 Swiper 组件滑动越来越快的问题

chore(release): publish 3.0.22

特性

小程序

• 设置 innerHTML 支持解析 style 标签

H5

• 增加 CustomWrapper 组件，by @vdfor

修复

小程序

• 补全 window 对象的关键属性，#8327
• 修复 CustomWrapper 的一些问题
• 修复在 app 入口组件中不能使用 onShow、onHide 钩子的问题，#8348

Typings

• 修改 Picker 组件的 value 值为可选属性，by @taoqf

chore(release): publish 3.0.21

修复

小程序

• 更换 lodash 为 es 版本