chore(release): publish 3.5.6

特性

小程序

• 支持使用 Vue3 编译原生自定义组件

RN

• 默认使用 react-native 0.69 版本，并增加了对 React18 的支持

Typings

• 重构类型系统，根据各小程序官方文档，补全小程序组件类型声明文件，by @robinv8 （相关讨论：#11740）

修复

小程序

• 修复微信小程序对 showShareMenu API 的支持，by @sssonamuuu
• 修复微信小程序对 cropImage API 的支持，#12524，by @nuintun
• 修复 webpack-sources 版本不一致带来的问题，by @yoyo837
• 修复 Webpack5 预编译导致 Vue3 报错的问题，#12340 #12090
• 修复 Webpack5 预编译导致京东小程序、百度小程序报错的问题，#12414
• 修复 Webpack5 预编译导致 Vue devtools 报错的问题，#12452
• 修复支付宝小程序使用 CustomWrapper 失败的问题，#12496
• 优化组件收集逻辑。修复使用 Vue 渲染函数、或使用第三方组件库时，报找不到对应 template 模板的问题，#9740
• 按需生成 CustomWrapper 产物，#11745

H5

• 修复 Input 组件在 type=number maxlength=-1 的情况下内容无法输入问题，by @beezen
• 组件库导出 SourceMap，by @beezen
• 修复 Input 组件 type 属性为 number 或 digit 时,输入特殊符号导致交互异常的问题，by @beezen
• 修复页面 onShow 时 onReachBottom 事件多次触发的问题，by @KkZsc
• 支持捕获 Video 组件 hls 流中的错误信息，by @NoManPlay
• 修复 pxtransform API 转换尺寸错误的问题，#12475
• 修复 Webpack5 预编译导致构建报错的问题，#12385
• 修复开启多页应用模式报错的问题，#12417
• 修复自定义环境变量导致的 mode 错误，#12436

RN

• 修复引入同名 style 文件时变量名冲突的问题，by @biorz
• 升级 CLI 默认安装的 expo 版本到 ~46.0.1
• 修复 showActionSheet API 在 RN Android 端与其他端不一致的问题
• 修复 Input 和 TextArea 组件在 focus 属性变更时聚焦失焦不同步的问题

PostCSS

• 修复 postcss.pxtransform.config.baseFontSize 参数无效的问题，#12449，by @iamlinsfans
• 修复 autoprefixer warning，by @yoyo837

CLI

• 修复 taro convert 命令报错的问题，#12309，by @wjljack

Typings

• 修复定位 API 的类型定义，by @b1ngx
• 更新 createOffscreenCanvas API 的类型定义，#12391，by @FE92star & @catmiao8
• 修复 openBusinessView API 的类型定义，by @hengkx

Breaking changes

RN

版本升级仔细阅读 https://github.com/NervJS/taro/discussions/12133

• 0.69 版本最低支持 iOS 12.4
• expo-av 在 0.68 需要锁定版本
• 如使用 Playground 调试，react-native-gesture-handler 版本需要对应
• 初始化 0.68 版本的 RN：taro init --template-source github:NervJS/taro-project-templates#v3.5-RN-0.68

chore(release): publish 3.5.5

特性

RN

• jsx-to-rn-stylesheet: 当开启 cssModule 时，支持在 className 中设置多个值 (#12365) (81682ed)

修复

H5

• textarea: 修复textarea组件高度设置无法生效的问题 (#12375) (5a8b209), closes #12317 @sushi-su

RN

• 修复 RN 样式 warning (#12378) (08019c9)
• android Exception in native call error (#12413) (9cce8a8)
• router-rn: tabbar 调整为 reletive 定位，撑起页面高度 (#12404) (#12405) (d11af94)
• tabbar paddingbottom error (#12371) (60c1125)

Typing

• weapp: 补充 openBusinessView 的类型定义 (#12363) (f466b94) @sushi-su

chore(release): publish 3.5.4

特性

H5

• Swiper 组件 onChange 事件触发时机优化，对齐小程序平台 #10764，by @NoManPlay

RN

• Windows 下使用大号二维码优化体验，by @zhiqingchen

修复

小程序

• 修复 prebundle 特性下，不必要的 splitChunks 配置 #12281
• tt: 优化原生组件重复 ID 问题 #12281，by @CS-Tao
• tt: 补充字节小程序Video组件属性和事件，by @RainKolwa
• 修复配置 enableSourceMap 后未在生产模式下产出 sourcemap，by @alexlees
• shared: 修复在不同平台生成的模板不一致的问题 #12320

H5

• Input 组件在 Safari 下，联想输入导致的事件触发问题 #12326，by @ReggieCai31
• 修复 prebundle 特性下，用户自定义 proxy 合并错误问题
• 修复 prebundle 特性下，生产环境的错误 chunkId 配置 #12279

RN

• 页面为函数式组件时不再额外包裹 View #12305，by @biorz
• taro-runtime-rn: 修复rn 函数式组件中hook多实例触发问题

Typing

• 修正 Video 组件的 onWaiting 事件注释 #12329
• 补充 Video 组件相关配置，以及支持程度说明

chore(release): publish 3.5.3

特性

小程序

• 补充 Map 组件的属性和事件，by @DBvc

@tarojs/plugin-mini-ci

• 暴露支付宝 minidev 的 project 参数，by @dave-qiao

修复

小程序

• 优化主入口引用样式文件编译问题，by @顾一峰

H5

• prebundle: 删除继承 webpack 冗余配置，#12240
• components: 修复 Safari 不支持的正则，#12249
• runtime: 修复 Vue3 开发环境 warn 提示

RN

• taro-runtime-rn: 修复钩子注册逻辑，by @peterczg

CLI

• 修复 taro update 命令，#12234 ，by @lexmin0412

chore(release): publish 3.5.2

特性

H5

• 新增支持 movable 组件 fix #10767，by @baosiqing
• prebundle: 默认继承 webpack 配置，并支持开发者自定义拓展 fix #12160

RN

• taro-runtime-rn: 实现 useLoad 钩子 fix #12177，by @peterczg
• taro-runtime-rn: 实现 useUnload 钩子 fix #12173，by @peterczg
• 依赖版本升级，by @zhiqingchen

修复

小程序

• 优化主入口引用样式文件编译问题，by @顾一峰

H5

• prebundle: 支持新版本 prefresh 热更新 fix #12138
• prebundle: react 框架默认排除 mobx 依赖预编译 fix #12175
• router: 优化自定义路由入口判断 fix #12214

RN

• 修复 window 平台下编译报错问题 fix #12197，by @zhiqingchen
• rn-runner/rn-style: 修复 rollupTransform 参数格式化、丢失问题，并调整相关类型声明文件，by @shinken008
• rn-style-transformer: 修复 scss nest importer 不执行问题，by @shinken008
• rn-support/rn-runner: 支持 ios/android 文件读取 fix #12200，by @shinken008
• rn: 编译组件时移除 clear dist 操作 fix #12183，by @biorz

ELSE

• postcss: pxtransform 语法优化
• helper: debug 依赖升级

Typings

• 更新 video 组件类型，by @spiritree
• 更新 JSX 组件类型缺失，by @lf7817
• 更新组件 props 类型导出

chore(release): publish 3.5.1

特性

小程序

• 支持微信小程序新模板 root-portal，by @spiritree
• plugin-mini-ci: 新增支付宝小程序支持cli --open 打开开发者工具，by @beezen

H5

• pageScrollTo 方法支持 offsetTop 参数，by @xiaohouye1995
• prebundle 支持 publicPath 配置，by @zhiqingchen
• 默认开启 postcss-import 配置

RN

• taro-runtime-rn: 实现 useReady 钩子，by @peterczg

修复

小程序

• react: 修复react18 creatRoot和小程序onLoad竞态的问题 #12141 #12129
• 修复预编译导致的运行时报错

H5

• 修复 fileType 为 jpg 时，表现不符合预期，by @CaedmonW
• 修复 browser 模式下的 prebundle 依赖代理问题
• 修复 prebundle 下热加载空 chunk 错误抛出问题
• 自动修复不支持的 chunkFileName
• 修复 cssModules 提示错误抛出

RN

• taro-runtime-rn: 删除详细的可选链接检查，by @peterczg

CLI

• 修复安装依赖实时日志输出
• 默认关闭依赖预编译

Typings

• 支持 root-portal 类型（react、vue），by @spiritree
• 移除无效生命周期

chore(release): publish 3.5.0

距离 Taro 3.5 的 Beta 版本发布已有两个月的时间，期间我们在不断地对基于 Webpack5 的编译系统、基于 Next.js 的 SSR 等功能进行打磨的同时，新增了对 pnpm 的支持等新功能。此外 Taro 社区也有很多同学参与共建，如 Taro 合作者 @biorz 为 ReactNative 侧贡献了重要特性：支持把 Taro 组件编译为 RN 组件。

日前 Taro v3.5 已正式发布，下文将介绍关于 3.5 的主要特性与重要修复，以及后续的版本规划。

一、编译提速

Taro v3.5 基于 Webpack5 构建了新的编译系统，利用持久化缓存、依赖预编译、SWC 等方法与工具，大幅降低了编译所需耗时。开发者可以自由选择切换使用 Webpack5 进行编译，也可以继续保持使用 Webpack4，另外在 v3.6 中 Taro 还将支持使用 Vite 进行编译。

依赖预编译可以预先把项目的第三方依赖打包为一个模块联邦 remote 应用，再次编译时 Webpack 无需再对这些依赖进行编译，从而提升编译速度。关于 Webpack5 编译系统的实现细节，请浏览 《Taro v3.5 beta 编译提速》

v3.5 Beta 发布后，我们补全了 H5 端的依赖预编译功能，并且把依赖预编译作为一个通用能力提取了出来。可供 Taro 以外的使用 Webpack5 的 H5 项目使用，通过 @tarojs/webpack5-prebundle 进行编译编译提速，具体使用方法可参考相关文档。

提速效果

以 NutUI 组件示例库 为例，小程序、H5 端的编译速度测试结果如下：

小程序：

H5：

使用方法

简单修改 Taro 的编译配置即可切换使用 Webpack4 或 Webpack5 进行编译：

/** config/index.js */
const config = {
  // 自定义编译工具，可选 'Webpack4' 或 'Webpack5'
  compiler: 'webpack4' || 'webpack5'
}

二、RN

1. React Native 0.68 版本支持

React Native 0.68 版本已于 2022-3-30 正式发布。0.68 是首个可选接入 New Architecture 的版本，新架构有望为 RN 带来性能和体验上的飞跃。Taro 默认选择的 RN 版本，正式切换到了 0.68，开发者通过 taro init 选择 react-native 模板即可。

另外 0.69 版本的适配，也在进展中。

2. RN 相关依赖库由 unimodules 升级至 expo

Expo 是 React Native 生态中的重要角色，提供了非常多优秀的模块，在 Taro 中有较为广泛的使用，如 expo-av、expo-camera 等，将来我们还会持续接入新的模块。Expo 的模块系统，由 unimodules 变更为 expo 已有一段时日，其架构变更原因可参考文章： What’s new in Expo modules infrastructure。

Taro v3.5 及以后将使用新的模块系统，后续壳工程不再包含 unimodules 版本。旧版本升级可参考此 PR，升级过程较为繁琐，建议重新 init 一个仓库，再将业务改动同步。升级为 expo 后，不再支持 iOS 11，详细内容请参考 discussions。

3. 支持把 Taro 组件编译为 React Native 组件

如果您想在现存的 React Native 项目中(非 Taro RN )，复用您的 Taro 组件，那么这个新功能或许适合您。

您可以使用以下命令编译组件，编译后的组件产物可以直接在 React Native 项目中使用。 详细内容请参考 discussions。

taro build native-components --type rn 

4. 编译打包方案优化

Android 的打包过程，从调用 gradlew 改为使用 fastlane，将打包过程配置化，尽可能地减少对 RN 初始化后原生代码的入侵。相关配置位于 android/fastlane，目前仅做了基础配置，开发者可进一步自定义。

刚接触 Taro 开发 APP 的开发者，经常在开发环境的配置上，消耗大量时间。再次建议大家先学习利用 GitHub Action 进行打包编译，相关代码位于 .github 目录中。

5. 调试工具 Taro Playground 升级至 Taro 3.5 版本及 React Native 0.68

Taro Playground 作为 Taro RN 端的调试工具及跨端 Demo，进行了同步更新。此次更新无法保证向下兼容，使用旧版本 Taro 的开发者，如需调试 Android，可在 releases 中下载旧包进行调试。在 App Store 中，我们只上架最新版本，需要旧版本的开发者请不要开启应用自动更新。如不慎升级，需自行打包编译，或联系我们加入测试组。

6. 壳工程代码整理

对于 0.68 版本的壳工程，我们进行了代码的重新整理。将初始化 RN、安装 expo、兼容 Taro、安装依赖、添加Github Action，每一个步骤一一列出，方便开发者在定制壳工程时进行参考。

三、pnpm

众所周知，pnpm 在当下被誉为“最先进的包管理工具”，它是由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。在社区内很高的呼声下，Taro 也在提供了这一热门的包管理工具选项。

在 Taro v3.5 版本以后，在脚手架内置包管理工具不再自动识别本地环境内安装的包管理工具，而是需要开发者自行选择需要的包管理工具，供开发者更方便使用和操作。

? 请选择包管理工具 (Use arrow keys)
❯ yarn
  pnpm
  npm
  cnpm

如果是在较旧的 Taro 项目中，想使用 pnpm 管理工具，由于幽灵依赖的存在，开发者需要在项目中手动安装并升级依赖来修复该问题，具体操作可参考文中升级指南第 5 项。

四、其它特性

除了以上新特性外，v3.5 还包括很多重要的更新：

1. 适配 React 18

从 Taro v3.5 开始，Taro 将默认使用 React 18 版本。你可以在 Taro 使用 React18 中激动人心的新特性了。从新建项目开始探索吧：

# @tarojs/cli 升级到 v3.5
$ taro init myProject
# 选择「react」框架

需要注意的是，受小程序环境限制，诸如新 Suspense 特性将不能在小程序中使用，详情请浏览文档。

2. H5 支持服务端渲染

通过 tarojs-plugin-platform-nextjs 插件配置，我们可以将 Taro 和 nextjs 社区生态打通，让 Taro H5 支持 Pre-rendering（预渲染）、SSR（服务端渲染）和 ISR（增量静态生成）各种特性，提升页面首屏渲染速度🚀，也利于 SEO 优化🔍。

/** config/index.js */
const config = {
    plugins: [
        'tarojs-plugin-platform-nextjs'
    ]
}

插件来自社区大佬 @SyMind 贡献，详细用法可以参考插件文档。

npm install tarojs-plugin-platform-nextjs next

在 Taro 项目的 config/index.js 中添加插件。

const config = {
    plugins: [
        'tarojs-plugin-platform-nextjs'
    ]
}

启动项目。

npx taro build --type nextjs --watch

3. H5 支持多页应用模式

H5 端的多页应用模式是社区呼声最高的若干特性之一，在新版本中将得到支持，详细用法及注意事项请参考文档。

配置开启多页应用模式：

/** config/index.js */
const config = {
  h5: {
    router: {
      mode: 'multi'
    }
  }
}

4. 补全对小程序生命周期方法的支持

过去 Taro 对于小程序常用的生命周期方法支持得不够完整，新版本中将补全对应的方法与钩子：

新增 App 生命周期方法

• onError（React & Vue3）

新增钩子：

• useLaunch（React）
• useError（React）
• usePageNotFound（React）
• useLoad（React & Vue3）
• useUnload（React & Vue3）
• useSaveExitState（React & Vue3）

5. 小程序内部实现优化

对小程序的内部实现进行优化，减少约 50k 包体积，同时降低内存占用，减少 setData 发送的数据量。

五、升级指南

1. 升级 Taro CLI

升级全局的 Taro CLI：

npm i -g @tarojs/cli

或升级本地的 Taro CLI 工具：

npm i @tarojs/cli

2. 更新项目依赖

如果依赖安装失败或安装成功却运行报错，可以尝试删除 node_modules、yarn.lock、package-lock.json、pnpm-lock.yaml 后重新安装依赖。

2.1 更新项目内的 Taro 相关依赖

把 package.json 中 Taro 相关依赖的版本修改为 3.5.0 后重新安装依赖。

2.2 使用 React 的项目

• *【Breaking】**使用 React 的项目需要额外安装 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh：

npm i @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

2.3 使用 PReact 的项目

• *【Breaking】**使用 PReact 的项目需要额外安装 @prefresh/webpack 和 @prefresh/babel-plugin：

npm i @prefresh/webpack @prefresh/babel-plugin --save-dev

2.4 使用 Vue2 的项目

• *【Breaking】**使用 Vue2 的项目需要额外安装 @vue/babel-preset-jsx：

npm i @vue/babel-preset-jsx --save-dev

2.5 使用 Vue3的项目

• *【Breaking】**使用 Vue3 的项目需要额外安装 @vue/babel-plugin-jsx：

npm i @vue/babel-plugin-jsx --save-dev

3. 使用 Webpack5

开发者需要先卸载 @tarojs/mini-runner 和 @tarojs/webpack-runner：

npm uninstall @tarojs/mini-runner @tarojs/webpack-runner

然后安装 @tarojs/webpack5-runner：

npm install @tarojs/webpack5-runner

最后修改 Taro 编译配置即可：

/** config/index.js */
const config = {
  compiler: 'webpack5'
}

4. 使用 React 18

需要更新 react、react-dom、@types/react 的版本：

npm i react react-dom

npm i @types/react --save-dev

5. 使用 pnpm

因为 pnpm 不允许幽灵依赖的存在，因此开发者需要在项目中手动安装下列依赖：

dependencies 补充依赖：

"@tarojs/helper": "3.5.0",
"@tarojs/plugin-platform-weapp": "3.5.0",
"@tarojs/plugin-platform-alipay": "3.5.0",
"@tarojs/plugin-platform-tt": "3.5.0",
"@tarojs/plugin-platform-swan": "3.5.0",
"@tarojs/plugin-platform-jd": "3.5.0",
"@tarojs/plugin-platform-qq": "3.5.0",
"@tarojs/router": "3.5.0",
"@tarojs/shared": "3.5.0",
"@tarojs/taro-h5": "3.5.0",

devDependencies 补充依赖：

安装项目对应的 Webpack 版本，如 Webpack5：

"webpack": "^5.73.0"

六、最后

下半年 Taro 团队的核心将围绕以下各方向展开：

• 支持使用 Vite 进行编译（预计 Q3 推出 alpha 版本）
• 小程序方面将持续对性能优化进行优化、支持更多的 React/Vue 特性（如 Portal）和生态库（如 React/Vue Router）。
• H5 方面将输出适配 Vue3 的 SSR 方案。
• RN 方面将深入探索高阶功能，如地图、动画、2D及3D图形方案，并推出跨端可视化库，提升 Taro 跨端能力。
• 此外还会探索对于 Flutter 的适配。

最后的最后，衷心感谢参与社区共建与交流的各位同学！上半年我们制定了开发者贡献制度，建立起规范的项目分工与有效的荣誉激励机制。未来 Taro 将积极探寻更中立与开放的开源治理机制，欢迎各位开发者参与到 Taro 社区的建设中~

chore(release): publish 3.4.14

特性

CLI

• 支持使用包管理器的 create 命令创建 Taro 项目，如：yarn create @tarojs/app，by @kingzez

RN

• 支持获取原生 View 组件的 ref 引用，将原生 View 组件的 ref 挂在 ref.current.$ref 属性上，by @peterczg
• 支持在 style 文件中 (css, sass...)，使用 vw, vh 等单位，by @biorz

修复

小程序

• 补充对淘宝小程序 ArCamera 组件的支持，by @weilaiqishi

H5

• 优化 Swiper 组件的样式引入，#12034

CLI

• 修复 taro build 命令设置 port 参数无效的问题，#12024，by @Binbiubiubiu

@tarojs/plugin-react-devtools

• 修复 react devtools 在 wsl2 下使用报错的问题，by @SeeSaySee

Typings

• 补充 getFuzzyLocation 的类型，by @DBvc
• 添加 vibrateShort API震动参数类型，by @FengFuLiu
• 修复 canvasToTempFilePath.Option.canvas 类型错误问题，by @lf7817
• 修复 uploadFile/downloadFile 返回结果类型不正确的问题，#12048
• 补充 RequestParams 缺省类型，#12047

chore(release): publish 3.4.13

修复

小程序

• 修复 preact 使用 custom-tab-bar 时报错的问题，#11962，by @w88975
• 修复编译小程序插件时报错的问题，#11932
• 让微信小程序的 editImage API 支持 promise 式调用
• 让字节跳动小程序的 openAwemeUserProfile API 支持 promise 式调用
• 修复 preact 地图组件 onRegionChange 事件报错的问题，#11462
• 修复 Vue event.self 不能使用的问题，#11967

H5

• 修复 innerAudioContext API 的问题，by @tangbzai

RN

• 修复当项目路径中包含 react-native 时 ， rn 启动失败的问题，#11988，by @foolishchow

CLI

• 修复 inspect 命令的参数缩写无效的问题，#11941，by @moyafaxi
• 修复 designWidth 配置为函数时校验不通过的问题，by @XinChou16

Typings

• 补充 AppConfig 的字段，by @DBvc

chore(release): publish 3.4.12

修复

小程序

• 补充 Input 组件的 auto-fill 属性，#11766，by @hsingyin
• 兼容百度小程序的 usingSwanComponents 配置，#11794，by @yuconora
• 优化智能提取分包依赖插件，by @suncxq
• 修复 Taro.request API 未正确返回 onHeadersRecieved 等方法的问题，#11904
• 修复字节小程序独立分包报错的问题，#11915

H5

• 修复 Swiper 组件随着 tab 页面切换，总是跳到最后一个元素开始轮播的问题，#11920，by @moyafaxi

RN

• 修复 !import 样式失效，#11728
• 修复初始化模板后，运行白屏并报错的问题，#11760
• 修复 border-color 设置 rgb(a) 报错的问题，#11792