一、升级调研
在考虑升级到3.x还是2.x时,考虑3.x改动比较多,1.x已经不是官方及时维护的版本了,因此考虑平滑升级,升级到2.x。
二、升级流程
1.采用局部更新
1) 单独更新某个项目采用npm
npm install --save-dev @tarojs/cli@2.x
2)然后在项目目录里运行以下命令来升级依赖:
node ./node_modules/.bin/taro update project 2.2.15(在github上,查看发布的最新版本)
2.安装@tarojs/mini-runner 依赖
Taro 2.0 新增了 @tarojs/mini-runner 作为小程序的编译依赖,所以你需要将它安装在你的项目里,运行:
npm install --save-dev @tarojs/mini-runner@2.x
3.编译配置调整
参考:https://nervjs.github.io/taro/docs/2.x/migrate-to-2/
主要变更有:
1)babel的配置。
2)样式的变更。
3)小程序配置从 weapp 改为 mini。5.sass配置的变更,直接在config对象属性下添加plugins: [ '@tarojs/plugin-sass', ]
三、升级出现的问题
1.文字缩小,间距变小。
解决方案:之前designWidth是375,对应的deviceRatio:{375:1/2}
,现在需要改成deviceRatio:{375:2/1}
。
2.运行时部分页面无法加载,报错提示Page ... has not been registered yet.
解决方案:主要是import相关导致的当前页面无法注册,一般是编写了BaseComponent,页面继承了BaseComponent,并且在子页面重复引入了一些BaseComponent的工具类导致的,两种解决方式:1).页面改用Component。2).将子类中的重复引用的改成直接使用父类的。(如果采用了mobx链路比较深,建议还是改成Component)
3.真机上列表无法加载,AtActivityIndicator报错
解决方案:taro-ui升级到2.3.4
4.通过微信小程序工具可以正常上传,但是通过miniprogram-ci工具自动化上传,提示主包超过了2M。
解决方案:对比查看通过工具上传的主包比miniprogram-ci要少接近300KB,通过miniprogram-ci --help
,查看命令,新增压缩js,重新执行脚本即可上传。
五、参考资料
https://taro-docs.jd.com/taro/blog/2020-09-01-taro-versions
https://www.bookstack.cn/read/taro-2.0.1/e8e5c97630cf8f63.md#sass
https://nervjs.github.io/taro/docs/2.x/migrate-to-2/