一、升级调研
在考虑升级到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，重新执行脚本即可上传。
image.png
五、参考资料
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/
网友评论