chore(release): publish 3.4.1

特性

H5

• 支持 BackgroundAudioManager 方法 #10940

RN

• 支持使用 defineConfig 提示, #11104 by @zhiqingchen

修复

小程序

• 修复百度小程序中 CoverView 里的文本在 iOS 不显示的问题，#11116
• 修复 Vue DevTools 失效的问题，#11095

H5

• 修复动画路由切换可能导致的页面层级覆盖问题, by @baosiqing
• 修复相对路径跳转，支持自定义路由模式下的相对路径, by @baosiqing
• 修复 Picker 组件显示存在 undefined 问题, by @TwoKe945
• 修复 Canvas 组件中 measureText 调用错误, by @shaodushu
• 修复动画样式注入问题, #11135
• 修复 ScrollView 事件冒泡问题, #11124
• 修复 Input 组件 composition & paste 事件导致的 input 事件漏发, #11155

RN

• 修复 RN 样式计算逻辑使其与小程序保持一致, #11120 by @shinken008
• 修复 pxTransform API 计算值与小程序端不统一, #11130 by @shinken008
• 修复日期选择器错误, #11166 by @zhiqingchen

Typings

• 补全 Input 组件的类型定义, by @spiritree
• 补全 Taro 组件实例类型， fix #10246
• 新增 immediate-change 属性， fix #11129

chore(release): publish 3.4.0

HighLights

一、支持使用 Preact

开发小程序应用时我们经常会受到包体积的掣肘，大型应用常常为了“尺土寸金”的包体积开展瘦身行动。在此背景下 React 将近 100k 的体积则显得有点过于奢侈。因此 Taro v3.4 实现了对 Preact 的支持，仅需少量配置即可从 React 切换到 Preact，有效地降低了包体积。

Preact 是一款体积超小的类 React 框架，提供和 React 几乎一致的 API，兼容 React 生态，而体积只有 5k 左右。

适配思路与具体用法请参阅 《Taro v3.4 发布 beta 版本 —— 支持使用 Preact 进行开发》

二、更好地支持 Vue 3.2

1. 支持 Composition API 版本的小程序生命周期钩子

文档地址

Vue 3.2 正式推出了 script setup 语法，过去 Taro 的 Options 式小程序生命周期钩子难以配合 script setup 语法进行使用。因此 Taro v3.4 提供了 Composition API 版本的小程序生命周期钩子，方便开发者配合 setup 语法组织和复用代码逻辑。

例子：

<script setup>
import { useDidShow } from '@tarojs/taro'

useDidShow(() => console.log('onShow'))
</script>

2. 支持 <style> v-bind 语法

Vue 3.2 的 <style> v-bind 语法让我们可以对样式进行数据绑定。它的实现使用了 DOM 的 MutationObserver API，但之前 Taro DOM 没有模拟实现此 API，因此使用 <style> v-bind 时会报错。

感谢 @b2nil 同学，参照 worker-dom 为 Taro DOM 实现了 MutationObserver API，让我们可以使用 <style> v-bind 语法。

Taro DOM 只针对 Vue3 暴露了 MutationObserver API，使用 React 或 Vue2 的同学不需要担心会增大代码体积。

3. 暴露 VueLoader 的配置

文档地址

开发者有时需要修改 VueLoader 的配置，例如使用小程序原生组件时需要配置 compilerOptions.isCustomElement。以往开发者只能通过 WebpackChain 去修改，Taro v3.4 暴露了 VueLoader 的配置，让开发者可以更方便地进行修改。

三、H5

1. 自定义多路由配置

Taro-H5 过去并不支持多路由访问同一个页面实例的操作，即便通过自定义路由配置也并不能在多个路由中访问同一个页面。

因此 Taro-H5 提供了自定义多路由配置的参数，供开发者根据需求自行配置。

文档地址

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      customRoutes: {
        // "页面路径": "自定义路由"
        '/pages/index/index': '/index',
        '/pages/detail/index': ['/detail'] // 可以通过数组为页面配置多个自定义路由
      }
    }
  }
}

2. 路由动画 by @ShaoGongBra

Taro-H5 支持了路由动画，开发者可以通过配置 app.config.js 来控制页面的动画效果，也可以通过覆盖 CSS 样式来调整动画。当然一些场景下，比如页面需要使用 position: fixed; 会因为 translate3d 影响实际效果，可以将动画禁用。

文档地址

export default {
  // ...
  animation: {
    // 动画切换时间，单位毫秒
    duration: 300,
    // 动画切换时间，单位毫秒
    delay: 50
  }
  // ...
}

3. dynamic-import-node

Taro-H5 打包时会将页面和组件拆分成独立的文件按需加载，但这么做会导致没有用到的页面和组件依旧会被打包，导致编译体积变大，在一些特殊场景中（比如 PWA 等需要严格限制包体大小时）会因此受到不小的困扰。

所以我们通过 babel 插件提供了移除懒加载的方法：

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      hot: false,
      'dynamic-import-node': true
    }]
  ]
}

四、新增 defineAppConfig 与 definePageConfig 编译宏

再次感谢 @b2nil 同学为 Taro 新增了此特性。 文档地址：defineAppConfig、definePageConfig

defineAppConfig

开发者可以使用 defineAppConfig 包裹 App 配置对象，以获得全局配置的类型提示和自动补全，如：

// app.config.ts
export default defineAppConfig({
  pages: ['pages/index/index'],
  window: {
    navigationBarTitleText: 'WeChat'
  }
})

definePageConfig

使用 definePageConfig 包裹 Page 配置对象，同样可以获得页面配置的类型提示和自动补全，如：

// page.config.ts
export default definePageConfig({
  navigationBarTitleText: '首页'
})

除此之外，开发者可以不提供页面的配置文件，直接在页面逻辑文件中使用 definePageConfig 定义页面配置。

如在 React 中：

// page.tsx
definePageConfig({
  navigationBarTitleText: '首页'
})

export default function Index () {}

在 Vue 中：

<script>
definePageConfig({
  navigationBarTitleText: '首页'
})

export default {}
</script>

五、其它重要特性与优化

性能

• 修复 eventSource 导致的内存泄漏的问题，相关 commit。
• 修复 CustomWrapper 嵌套使用后失效的问题，感谢 @CS-Tao 的贡献。
• 运行时体积优化，相比 Taro v3.3 版本大约减少了 30k 空间。

特性

• 支持微信小程序开发者工具的热重载功能，文档地址。
• 支持支付宝小程序 2.0 构建。
• H5 端支持配置渲染页面的容器 id，文档地址
• H5 端路由规则调整，Query 参数不再添加到 pageId 中，同时 TabBar 页面不会重新创建重复节点。
• H5 端支持 entryPagePath 参数，by @liuchuzhang
• H5 端支持 CoverView & CoverImage 组件，by @jiaozitang
• H5 端支持 NodesRef.context & NodesRef.node 方法
• H5 端支持通过 useResize 方法监听 resize 事件

修复

• 修复预渲染失败的问题。
• 修复多个页面使用同一个组件时，因为组件定义了 id 而导致事件触发失效的问题。
• 修复 H5 端多页面滚动事件偶发性触发错误问题。
• 修复 3.x 中 H5 端 API 失效的 Shaking 能力。

Breaking Changes

• 旧项目升级到 Taro v3.4 需要安装对应的框架适配插件，详情浏览升级指南。
• 百度小程序使用 onInit 代替 onLoad 生命周期，以优化首次启动时间。
• H5 端调整了 showModal 返回的 errMsg 参数，和小程序接口对齐，如果项目内针对这个差异做过适配，可以在升级后移除。 #11040

升级指南

1. 把 Taro CLI 更新到 v3.4.0：

npm i -g @tarojs/cli

2. 更新项目依赖

如果安装失败或打开项目失败，可以删除 node_modules、yarn.lock、package-lock.json 后重新安装依赖再尝试。

修改 package.json 文件中 Taro 相关依赖的版本修改为 3.4.0，再重新安装依赖。

3.【Breaking Changes】安装对应的框架适配插件

因为 Taro v3.4 把各前端框架的适配逻辑拆分到对应的插件中，因此旧项目升级时需要安装对应框架的适配插件：

• 使用 React，请安装 @tarojs/plugin-framework-react
• 使用 Vue2，请安装 @tarojs/plugin-framework-vue2
• 使用 Vue3，请安装 @tarojs/plugin-framework-vue3

chore(release): publish 3.3.20

特性

小程序

• 编译为原生小程序组件时，支持配置原生组件的 Options，#9759 ，by @fengkx

H5

• 支持 NodesRef.node 方法，#9461
• 支持 NodesRef.context 方法（video & canvas）

性能

小程序

• 修复 CustomWrapper 嵌套使用后失效的问题，by @CS-Tao
• 优化 MiniSplitChunksPlugin 的运行性能，by @rquanx

修复

小程序

• 修复 window.setTimeout 和 window.clearTimeout 缺少返回值的问题，by @blade254353074

H5

• 修复 Input 组件 autoFocus 属性，by @baosiqing
• 修复 CanvasContext 关联方法失效问题，#10931
• 修复 SelectViewport 失效问题，#7553
• 修复 createInnerAudioContext 方法监听事件名，#11002
• 修复 chooseLocation 方法取消事件，#11006
• 修复 browser 模式下 search 参数丢失问题，#11004
• 修复 app 中 onLaunch与componentDidMount 事件无法获取启动参数问题，#8730
• 修复 TabBar 导致的页面高度问题
• 修复 query 导致的 pageId 问题

RN

• 修复 Android 下 TextArea 居中问题
• 修复 Button 下有 icon 但是没有其他子元素不居中问题

Typings

• 添加 openVideoEditor 方法的类型定义，by @lblblong
• 修复取消监听事件回调类型不匹配问题，#10954
• 更新 app 中 useDidShow 方法类型

chore(release): publish 3.3.19

修复

RN

• 优化 Android Input 组件默认 padding 参数，by @zhiqingchen
• 修复 Swiper 组件只有一个字节点问题，by @zhiqingchen
• 修复 Swiper 组件 current > count -1 问题，by @zhiqingchen

H5

• 修复 Vue3 AppId 配置问题，fix #10974
• 修复 Taro-H5 rollup Shaking 删除样式问题，fix #10958
• 修复 uploadFile、downloadFile task 错误，by @Mr-sgreen
• 修改 Taro-H5 正常打包和引用方式

chore(release): publish 3.3.18

特性

H5

• 新增路由动画配置能力，by @ShaoGongBra
• 新增自定义配置多路由能力
• 新增懒加载 Shaking 方案（for PWA）

修复

小程序

• 修复阿里小程序 2.0 构建报错，fix #10162

H5

• 优化 Swiper 组件非 circular 模式状态更新问题
• 优化动画部分 API 实现与参数错误
• 修复 downloadFile 、uploadFile API 导出问题，fix #10951
• 修复弹窗 API 入参校验问题，fix #10949
• 修复 innerAudioContext 问题，fix #10946
• 修复图片组件默认宽高问题
• 修复页面滚动元素获取错误

RN

• 修复 swiper 组件 selectIndex 更新问题，#10962 by @zhiqingchen
• 修复 swiper 组件 circular 模式左滑卡顿问题，by @zhiqingchen

Typings

• 部分 API、参数平台支持标签补充
• 优化 Animation 类型
• 调整 Button openType 参数类型，by @Brain777777
• 补充挂载 Events 对象 fix #10880

chore(release): publish 3.3.17

特性

H5

• 支持全局配置 entryPagePath，by @liuchuzhang
• 支持多路由自定义配，#9289

RN

• 支持 SVG 文件的引入
• 支持使用 playground 预览本地 bundle，#10867

修复

小程序

• 修复 Textarea 设置 autoFocus 属性时报错的问题，#10870，by @Yang03
• 优化 HTML 解析器对 CSS 属性选择器的解析，by @kofzx
• 修复 Vue3 首次进入页面会触发两次 onShow 的问题，#10728
• 修复支付宝小程序使用 v2.0 构建时使用 Slot 会报错的问题，#10162
• 修复百度小程序 Text 嵌套不显示的问题，#10829
• 修复微信小程序热重载报错的问题，#10722
• 支持字节小程序 Canvas v2.0，#10882
• 修复 Vue2 video 组件不能设置 muted 的问题，#9550
• 优化对 vant weapp 的兼容，#10337

H5

• 修复配置 basename 后没有设置上页面标题的问题，#10862，by @liuchuzhang
• 修复使用 Block 组件会创建真实节点的问题，#10285
• 修复页面滚动条共享的问题，#7974
• 修复 reLaunch 未清空路由栈和页面问题，#9724 #8347
• 修复上页索引计算错误，#10903
• 改变构建方式，使 H5 API 可以直接使用已有类型
• 修改 H5 目录结构，梳理当前缺失 API 并补充部分
• 修复 Taro-H5 Tree Shaking 问题 #10466
• 修复 API 关联 Issue #10823

RN

• 修复 Picker 日期和时间属性当初始化值为空时无法变更值的问题，#10405
• 修复 ReLaunch 到 Tabbar 页错误的问题，#10801

@tarojs/plugin-html

• 修复错误过滤样式中 * 的问题，by @innocces

Typings

• 优化 showActionSheet 的类型，by @spiritree
• 修复没有导出 Events 类型的问题，#10880
• 修改 Button OpenType 类型，by @Brain777777

chore(release): publish 3.3.16

特性

RN

• 支持 backgroundTextStyle 设置, #10739 by @zhiqingchen
• postcss 支持插件自定义, #10775 by @shinken008
• 富文本支持自动宽高, #10794 #10807 by @zhiqingchen

修复

H5

• 修复组件名映射错误, #8491
• 路由回退方法更新, #10785
• tabbar 初始配置修复, #10736 #10758

RN

• 修复 app.config 修改后未更新, #10727 by @zhiqingchen
• 锁定 sass 版本, #10738 by @shinken008

其它

• 修复小程序单位转换问题, #10752

Typings

• 补齐 env 导出对象类型, #10652
• compile & extend 类型冲突
• 更新 enableAlertBeforeUnload 参数 @jia-niang
• 更新 toast 接口 type 参数, #10742 @Mayandev

chore(release): publish 3.3.15

特性

H5

• 支持 CoverView、CoverImage 组件

RN

• 优化依赖，包括升级 react-native-netinfo ，删除 expo-location 依赖等，#10690

修复

小程序

• 增加对 getLocalIPAddress API 的支持，#10631
• 修复 Vue3 Input 组件设置自动聚焦失败的问题，#10579
• 修复使用 recoil 报错的问题，fix #10119

H5

• 支持使用相对路径地址跳转到新页面，by @baosiqing
• 优化 Input 组件设置 focus 的时机，by @baosiqing
• 修复浏览器多级后退造成的错误，#10616
• 修复快速切换 TabBar 时，页面展示错误的问题，#10426
• 修复 showTabBarRedDot、showTabBarBadge、setTabBarItem、setTabBarStyle 等 TabBar 相关的 API，#9397 #8580 #8175
• 修复 Vue2 的组件使用 nativeProps 失效的问题，#10689
• 修复 Textarea 组件 onLineChange、autoHeight 属性无效的问题，#7997 #8003

RN

• 修复 Windows 通过模板初始化 RN 报错的问题，#10485
• 把 networkType 返回内容与小程序对齐

其它

• 增加对 nodejs 16 和 17 的支持

Typings

• 优化类型实体写法，#10652
• 补充 offMemoryWarning API 的类型

chore(release): publish 3.3.14

特性

小程序

• 为 Taro.getEnv() 增加快手小程序环境变量，by @xQuotes

Typings

• 重构类型的模块化方式，解决不引用 @tarojs/taro 也能得到类型提示的问题，fix #10381

chore(release): publish 3.3.13

特性

RN

• 增加打包参数，方便 CI 传参进行打包。

修复

小程序

• 修复 Taro.options.html.transformText 配置，by @spiritree，fix #10457
• 确保 onShow 在 onLoad 之后再执行，by @tango5614

H5

• 修复 Taro.getApp() 返回 undefined 的问题，fix #9586
• 修复路由跳转 API 的回调函数没有正确调用的问题，fix #10602
• 修复 Input 组件报 Cannot read properties of undefined 错误的问题，fix #10303
• 修复 Checkbox 组件 disabled 属性设置无效的问题，fix #8500
• 修复组件更新时 children 错乱的问题，fix #10365
• Input 组件支持获取 keyCode
• 优化 Swiper 组件的 next-margin 属性的实现
• 修复使用 previewImage API 预览图片时，当图片高度大于屏幕高度时，图片展示不全无法上下滑动的问题

RN

• 优化 boxShadow 样式转换报错
• 修复 getSystemInfoSync API 对 statusBarHeight 值的计算方式

Typing

• 新增 enableAlertBeforeUnload 和 disableAlertBeforeUnload 的类型定义