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

相关推荐
叶落阁主11 分钟前
Vue3 后台管理系统全局菜单搜索实战:Cmd/Ctrl + K、权限菜单与拼音过滤
前端·javascript·vue.js
卷帘依旧11 分钟前
setState是同步的还是异步的
前端·面试
卷帘依旧13 分钟前
讲一下useEffect和useLayoutEffect
前端·面试
wuhen_n13 分钟前
AI Agent 入门:从零实现 LangChain 基础智能体
前端·langchain·ai编程
MacroZheng26 分钟前
阿里Qoder + GLM-5.1,夯爆了!
前端·vue.js·人工智能
我是小胡胡34 分钟前
彦火APP-Flutter包体分析
前端
木斯佳1 小时前
前端八股文面经大全:腾讯音乐-前端一面(2026-05-27)·面经深度解析
前端
糖果店的幽灵1 小时前
Claude Code 完全实战指南 - 第四章:Skill 怎么写
java·服务器·前端
light blue bird1 小时前
MES/ERP 工序 BOM 协同场景调度维护组件
前端·信息可视化·桌面端winform·多节点端·gdi图表绘制开发
鱼人1 小时前
Vue 3 组合式 API 最佳实践:如何写出可维护的代码
前端