Taro Vue3小程序实战分享

前言

从决定开始用Taro来开发小程序到今天已经过去了12个工作日,(为什么是工作日,因为周末时间都用在了更文,不过为了赶进度所以工作日的晚上最近一直都在加班,排期可以说是有点满)项目上线已经迭代了几个小版本,达成了一个小的里程碑,所以今天来和大伙分享一下使用心得。

如果你对Taro开发小程序还不太了解,可以先看一下入门篇,我把平时开发中遇到的一些小问题以留言的方式记录了下来,方便各位遇到了类似的问题可以查阅,如果你也善于分享,也欢迎你把遇到的问题以及解决方案以留言的方式记录下来。

为什么选Taro

首先,我不是要推荐所有人都用taro,如果你熟练uniapp来进行小程序开发请继续用它,毕竟uniapp的生态要相对完善一些。为什么我选taro,虽然我之前也用过uniapp做过小程序,这次项目的小程序端单独由我负责,我可以从0到1去搭建整个架子,所以决定尝试点新的技术,如果你搭建篇感兴趣可以看这篇。

更利于维护的代码

因为taro支持vue3的setup语法糖,所以我在项目里面代码各个功能都是以小模块的形式进行编写,这样写有什么好处呢,如果我想要修改某个逻辑,我可以快速就近找到我给此功能定义的数据,相比于vue2的options API的那种割裂的写法,data写在一起,methods写在一起,我相信你也一定会快速被vue3的compsition API和setup语法糖快速圈粉,如果你还没有尝试用vue3来开发过项目,我建议你找机会可以试一试。如果是我,我一定更偏向于维护右侧的代码:

关于分包

众所周知,小程序发包有2M的限制,所以你的项目肯定是以主包和分包的形式展开的,具体的配置是和微信小程序分包是一样的,我这里是将注册模块放进了主包,将其他业务模块划分进了分包里。

如果你想要把业务A模块抽离到分包里,可以参考下图的目录结构,其中root是模块的目录,subpackages是和主包pages目录是同级目录,A模块内部假如有3个(moduleOne Two Three),层级结构是和主包内也是一致的。

关于接入实时日志

为了关注线上小程序运行可能会出现的问题,我们应该将我们程序中一些较为关键的点输出到实时日志(实时日志的查询已移至We中,具体可查阅文档),这样如果遇到了线上的bug便于我们问题的溯源,taro也提供了和小程序类似的API,Taro.getRealtimeLogManager(),我们在工具函数中导出,在项目用到的时候导入使用即可。

图片的上传与回显

上传: Taro.chooseMedia结合Taro.uploadFile来实现的,单独封装了一下上传的方法,传入从chooseMedia里获取的path,从成功的回调里resolve出后端返回的结果。选中图片的回显是在chooseMedia里根据生成的临时路径进行回显的。 回显(是指从后端返回buffer回显图片): 这里目前是通过Taro.arrayBufferToBase64来处理从后端返回的buffer,转成base64之后拼接'data:image/jpeg;base64,' 赋给图片src,但是现在因为图片有点大,所以转base64后可能会有性能问题,这里后面再优化,如果你有更好的方案可以评论区告知我3Q。

最后再提一个需要注意的细节就是,如果你navigateTo跳转页面之后处理完通过Taro.navigateBack返回列表也,组件是不会销毁的,所以如果你把列表刷新的方法放在onMounted生命周期里是不会执行的,我这里是放在useDidShow中来处理的。

尾声

以上是我最近关于实际开发中用taro开发小程序的心得,从代码的可维护性,按业务进行主包分包的拆分,线上问题的溯源以及开发者常常会遇到的开发需求进行了总结,如果你也是Taro小程序的开发者欢迎一起交流。

相关推荐
小约翰仓鼠4 分钟前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in7 分钟前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴22 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼29 分钟前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计1 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇2 小时前
前端小tips
前端
小小小小宇2 小时前
二维数组按顺时针螺旋顺序
前端
安木夕2 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~2 小时前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html