微信小程序实战，vue3开发全流程指南

说实话，我第一次在微信小程序里用vue3的时候，心里是有点犯嘀咕的。毕竟小程序的官方框架是原生那一套，突然引入一个前端框架，总觉得有点“跨界”的味道。但真正跑通第一个页面之后，我发现自己回不去了。那种组合式API带来的逻辑复用、setup语法糖带来的简洁，跟原生开发比起来，简直像从手动挡换到了自动挡。今天就把我这几个月蹚出来的路，原原本本分享给你，从环境搭建到上线发布，每一步都给你讲透。

先说说环境这块儿。很多人一上来就卡在“用哪个脚手架”上，我试过好几个，锁定了uni-app。倒不是说它多完美，而是它对vue3的支持最成熟，而且一键编译到微信小程序，省去了自己折腾webpack的功夫。你只需要装好HBuilderX，新建项目的时候选“uni-app + vue3”模板，剩下的就交给工具链。但这里有个坑得提醒你：微信开发者工具里得把“ES6转ES5”关掉，不然vue3的某些语法（比如可选链）会报错。我当时在这上面浪费了整整一个下午，后来发现是默认设置的问题，改一下就好。

接下来是页面结构。vue3在uniapp里的写法和纯web端有些区别，最明显的就是生命周期。小程序的onLoad、onShow这些，在vue3里需要通过@dcloudio/uni-app提供的onLoad、onShow来调用，不能直接用vue的onMounted。举个例子，你有一个页面需要拉取用户信息，放在onShow里最合适，因为每次从后台切回来都会触发。但如果你用onMounted，只在首次加载时执行一次，用户切出去再回来，数据就过期了。这个细节不注意，后面调试起来会很头疼。

再说说状态管理。小程序里页面间通信，官方推荐用globalData，但项目一复杂就乱了。我习惯用Pinia，它是vue3官方推荐的状态库，在uniapp里也能用。安装的时候记得用npm install pinia，然后在main.js里注册。这里有个小技巧：把用户登录态、购物车这些全局数据放进Pinia，页面里用storeToRefs取出来，响应式更新非常丝滑。但要注意，Pinia的store在小程序里是模块级别的，不同页面共享同一个store实例没问题，但如果你用了分包，不同分包之间的store是隔离的，得通过uni.$emit或者storage来同步。

样式这块儿，小程序和web最大的区别就是rpx单位。vue3里写样式，我习惯用scss，配合uni-app内置的rpx转换，开发效率很高。但有个坑：vue3的scoped样式在小程序里有时候会失效，尤其是当你用了第三方组件库的时候。我的解决办法是，给组件最外层加一个自定义的class命名空间，比如“my-comp-”，然后样式写在全局里，不依赖scoped。虽然麻烦点，但至少不会出现样式穿透的诡异问题。

组件通信是另一个容易翻车的地方。vue3里父子组件用props和emit没问题，但小程序里跨页面通信就得靠eventBus或者全局事件。uniapp提供了uni.$emit和uni.$on，用起来很像vue2的eventBus，但要注意在页面onUnload里移除监听，不然会内存泄漏。我踩过一个坑：在tabBar页面里用uni.$on监听一个事件，然后切换到其他页面触发，结果tabBar页面的监听还在，导致重复执行。后来我在onHide里也做了移除，才彻底解决。

网络请求这块儿，微信小程序要求域名必须备案且配到request合法域名里，开发阶段可以勾选“不校验合法域名”，但上线前一定要配好。我封装了一个request工具，基于uni.request，统一处理token、错误码、超时重试。这里有个vue3带来的好处：可以用async/await配合Promise，代码读起来非常清爽，再也不用写一堆.then的嵌套了。而且，配合Pinia里的token状态，请求拦截器里可以直接获取，不用每次手动传。

说说调试和上线。vue3在微信开发者工具里的调试体验，比原生稍微差一点，因为多了层编译，有时候断点会跳错位置。我的建议是，多用console.log，少用debugger，特别是涉及异步流程的时候。另外，小程序的上传和发布，建议用CI脚本自动化，我写了个Node脚本，调用微信的miniprogram-ci库，自动上传代码并生成体验版，省去手动点上传的麻烦。发布前记得在详情里勾选“将JS编译成ES5”，不然低版本微信会白屏。

回头想想，vue3开发小程序这条路，其实没想象中那么难，但也确实有不少坑。最核心的心得是：别把小程序当成普通网页来写，要尊重它的生命周期和运行环境。vue3带来的开发体验提升是实实在的，尤其是组合式API，让逻辑复用变得特别自然。如果你正打算用vue3做小程序，我的建议是：先拿一个小页面练手，把生命周期、状态管理、组件通信这几个核心点跑通，再铺开做整个项目。别一上来就套复杂架构，小程序本身就强调轻量，保持代码简单，比什么都重要。