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小程序的开发者欢迎一起交流。

相关推荐
Sc Turing几秒前
【Vue3-Bug】中路由加载页面直接显示空白
前端·bug
好_快2 分钟前
Lodash源码阅读-baseDifference
前端·javascript·源码阅读
云之兕4 分钟前
Spring Boot 中多线程的基础使用
java·前端·spring boot
LaughingZhu1 小时前
PH热榜 | 2025-04-26
前端·数据库·人工智能·mysql·开源
萌萌哒草头将军7 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中7 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊8 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj8 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝8 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3119 小时前
react必备JavaScript知识点(二)——类
前端·javascript