趣学前端 | Taro迁移完成之后,总结了一些踩坑经验

背景

四月份的时候,尝试将老的移动端项目改造成多端。因为老项目使用的React框架,综合考量,保障当前业务开发的进度同时,进行项目迁移,所以最后选择了Taro框架。迁移成本会低一些,上手快一些。

上个月,也就是七月份,我们用一个月的时间实现了两个项目从原生小程序到Taro框架的迁移。这当中,因为几个「小水坑」,我们连着加了两周的班。我把其中几个比较难搞的问题,解决方案总结了下来。

Taro文档

Taro的官方文档写的挺详细的,不过感觉搜索功能不是特别顺手。我平时搜不到想要的词条,会在菜单里找找可能的页面,基本多刷刷文档,能找到想找的内容。

项目迁移

之前写过一篇项目迁移的文章:【Taro开发】四月芳菲,Taro观赏指南。文章中对于基本配置、采用的UI框架、路由处理等基础功能实现,本篇不再重复。

踩坑指示牌

这次的坑,新旧都有。原本以为解决的问题,其实没有完全解决,所以我把最终的实现方案做了总结。

小程序文件过大的问题

最开始用分包的方式,在开发者工具中提交代码提示文件体积过大。但是又没找到问题在哪,最后才用了方案B,设置环境变量 NODE_ENV 为 production 可以开启压缩。如下为项目命令:

复制代码
"scripts": {
  "build:weapp": "NODE_ENV=production taro build --type weapp",
  "dev:weapp": "npm run build:weapp -- --watch"
}

但是这样做会有个额外的问题,就是无法在用NODE_ENV区分环境。后来我采用的解决方案是

  • 小程序端使用envVersion区分环境

    const env = wxConfig.envVersion;
    // 小程序开发环境 release-正式 trial-体验 develop-开发
    const baseUrl = env === 'release' ? requestUrl : devrequestUrl;

  • H5端则通过页面的域名区分环境

    let env = 'production';
    if (NODE_ENV === 'production' && window.location) {
    if (window.location.origin.indexOf('//dev') !== -1) {
    env = 'dev';
    }
    if (window.location.origin.indexOf('//release') !== -1) {
    env = 'release';
    }
    } else if (NODE_ENV === 'development') {
    env = 'dev';
    }

H5页面间样式冲突

开始我并没有往样式冲突上想。我把项目发布到测试环境之后,页面布局发生了局部混乱。

一开始我以为是功能写的有问题,找了半天,换了实现方式,也没有解决问题。然后我找了一下规律,发现当不同页面切换时,切到某个页面会导致样式错乱。于是我打开浏览器的元素审查,查看页面源码。截图如下:

原来Taro框架生成的H5页面,每次切换路由之后,所有的页面都是在app根下,通过display控制展示和隐藏。这种情况下,我采用的样式隔离的方式来避免冲突。

官方提供的CSS Modules,尝试了一下觉得有点繁琐,所以没有采用。

不要使用空标签

空标签会导致项目部署时报错,如下代码:

复制代码
<>111</>

我统一用Fragment组件替换了空标签:

复制代码
<Fragment>111</Fragment>

部署前需要确认Jenkins上是否已安装了Taro

我们的项目刚上测试环境时,发版工具给了如下报错:

复制代码
sh: taro: command not found

请教了运维的同事后,运维的同事帮忙安装了Taro。所以部署前确认一下,不然发版会失败,着急提测会手忙脚乱。

尺寸单位替换

小程序迁移的时候注意单位的替换,因为我是直接把小程序的样式代码迁移过来的,所以需要将原本的rpx更换为px。Taro 默认以 750px 作为换算尺寸标准,所以尺寸值不需要进行额外的修改。

总结

后面还会有React项目迁移的需求,等那个项目迁移完成之后,我会再总结一般踩坑经验。


作者介绍

非职业「传道授业解惑」的开发者叶一一。

《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

相关推荐
支撑前端荣耀1 分钟前
五、测试用例的组织和编写
前端
支撑前端荣耀2 分钟前
七、命令行运行Cypress
前端
支撑前端荣耀2 分钟前
九、重塑你的“测试习惯”——避开Cypress的那些“坑”
前端
拾光拾趣录4 分钟前
Vite 与 Webpack 热更新原理
前端·webpack·vite
GISer_Jing5 分钟前
前端开发—全栈开发
前端·javascript
great6 分钟前
yarn和npm有什么区别
前端
拾光拾趣录7 分钟前
Flutter跨平台、性能优化与安全
前端·flutter
支撑前端荣耀7 分钟前
六、Cypress与元素交互
前端
DoraBigHead14 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住18 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js