Releases: NervJS/taro
chore(release): publish 3.5.7
特性
H5
- 新增兼容
getLaunchOptionsSync
、getEnterOptionsSync
API - 新增监听各 API、组件不支持状态抛出事件
修复
小程序
- Promise 化字节小程序的
getUserProfile
API,#12612,by @TheKonka - 支持支付宝小程序的
Camera
组件,#12442,by @TheKonka - 修复 App 没有触发首次
componentDidShow
系列生命周期的问题,#12634,by @Barrierml - 修复自动为数字类型的 CSS 变量与部分属性(如:
animation-iteration-count
)自动添加px
后缀的问题,#12617,by @Barrierml - 修复 PReact 压缩后属性设置不生效的问题,#12589,by @wenshin
- 微信小程序反向转换功能兼容以
kebab-case
命名的triggerEvent
事件名,by @campcc - 修复预渲染报错的问题,#12622
- 支持
PayButton
、ConsumeCard
组件,#12650 - 修复 tmpl_0_view not found 警告,#12558
- 修复小程序插件编译报错,支持插件页面的
onLoad
和onUnload
生命周期,#12603 - 修复编译为原生组件时不支持使用小程序
slot
组件的问题 ,#11865
H5
- 修复
onLaunch
参数的数据结构与小程序的不一致的问题,#12387,by @yoyo837 - 修复
request
API 与小程序的网络请求处理不一致的问题,#9983,by @yoyo837 - 修复当
postcss-pxtransform
计算为 0 时不支持在calc
表达式使用的问题,#12607,by @yoyo837 - 修复
canvasContext
的createLinearGradient
循环调用的问题,by @hisanshao - 修复开启多页模式时
devServer
初始页未正常打开的问题,#12582,by @biorz - 修复
downloadFile
与uploadFile
API 跨域失败的问题,#12520,by @TheKonka - 优化
MovableView
组件,#12319 - 优化 h5Plugin 获取 pxtransform 参数缺失问题
- 优化 mode 判断,支持使用不同环境的 prebundle 特性
babel-preset-taro
- 优先探测用户的
browserslist
配置, 如果没有才设置@babel/preset-env
的targets
配置,by @yoyo837
RN
- 使
react-native-svg
包变为可选依赖,#12637
Typings
chore(release): publish 3.5.6
特性
小程序
- 支持使用 Vue3 编译原生自定义组件
RN
- 默认使用 react-native
0.69
版本,并增加了对 React18 的支持
Typings
修复
小程序
- 修复微信小程序对
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
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
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
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
修复
小程序
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