手把手实战：微信小程序+SpringBoot+Vue3全栈开发指南（二）

1. 从Vue2升级到Vue3的核心变化很多开发者还在使用Vue2进行微信小程序开发但Vue3已经带来了许多革命性的改进。我在最近的一个电商小程序项目中完成了技术栈升级实测下来性能提升非常明显。Vue3最大的变化是引入了Composition API这让我们的代码组织方式发生了根本性改变。在HBuilderX中新建uni-app项目时现在可以直接选择Vue3版本。与Vue2相比Vue3的模板语法基本保持兼容但底层实现完全不同。我建议新手可以从setup语法糖开始尝试这是Vue3最友好的入门方式。比如原来的data和methods可以这样改写script setup import { ref } from vue const count ref(0) const itemize ref([]) function itemIze(index, id) { // 方法实现 } /script性能方面Vue3的虚拟DOM重写使得更新性能提升了2-3倍。在我的测试中一个包含200个商品列表的页面Vue3的渲染速度比Vue2快40%。对于微信小程序这种对性能要求极高的场景这个提升非常关键。2. 微信小程序前端架构优化在实际项目中我推荐使用uni-app的easycom组件模式。这样可以自动按需引入组件不需要在components中显式注册。在pages.json中配置easycom: { autoscan: true, custom: { ^uni-(.*): dcloudio/uni-ui/lib/uni-$1/uni-$1.vue } }对于页面滚动联动这种复杂交互Vue3的响应式系统表现得更加出色。我们可以使用computed属性来优化之前的实现const scrollIntoView computed(() { return trigger.value ? item${selectedId.value} : })网络请求方面建议使用uni-app封装的uni.request配合Vue3的reactiveconst requestState reactive({ loading: false, error: null, data: null }) async function fetchData() { requestState.loading true try { const res await uni.request({url: /api/data}) requestState.data res.data } catch (err) { requestState.error err } finally { requestState.loading false } }3. SpringBoot后端接口优化后端接口设计要特别注意微信小程序的特性。我总结了几点经验接口响应要尽量轻量建议使用DTO而不是直接返回Entity分页参数要兼容微信的下拉加载更多图片等静态资源要配置CDN加速在SpringBoot中可以这样优化分页接口GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { PageHelper.startPage(page, size); ListDish list dishService.list(); PageInfoDish pageInfo new PageInfo(list); return Result.success(pageInfo); }对于图片上传接口建议使用阿里云OSS等云存储服务PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { String url ossClient.upload(file); return Result.success(url); }4. 前后端数据交互最佳实践在实际项目中我强烈推荐使用WebSocket实现实时通信。比如购物车数量变化、订单状态更新等场景。SpringBoot中可以这样实现Configuration EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker(/topic); config.setApplicationDestinationPrefixes(/app); } Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint(/ws).setAllowedOrigins(*); } }前端使用uni-app的SocketTaskconst socket uni.connectSocket({ url: wss://yourdomain.com/ws }) socket.onOpen(() { console.log(WebSocket连接已打开) }) socket.onMessage((res) { console.log(收到消息:, res.data) })对于常规的HTTP请求建议统一错误处理。我在项目中通常会封装一个拦截器uni.addInterceptor(request, { invoke(args) { args.url baseUrl args.url args.header { ...args.header, Authorization: Bearer ${token} } }, success(res) { if (res.data.code ! 200) { uni.showToast({title: res.data.message, icon: none}) return Promise.reject(res.data) } return res.data }, fail(err) { uni.showToast({title: 网络错误, icon: none}) return Promise.reject(err) } })5. 性能优化实战技巧微信小程序的性能优化是个系统工程。我总结了几点关键经验图片优化使用webp格式合理控制尺寸数据缓存合理使用storage和memory缓存代码分包按需加载控制主包大小对于图片加载可以使用uni-app的image组件优化image :srcitem.image modeaspectFill lazy-load webp loadonImageLoad /image数据请求方面建议实现分级缓存策略async function getData() { // 先检查内存缓存 if (memoryCache.has(key)) { return memoryCache.get(key) } // 再检查本地存储 try { const data uni.getStorageSync(cache_key) if (data) { memoryCache.set(key, data) return data } } catch (e) {} // 最后请求网络 const res await request({url: /api/data}) memoryCache.set(key, res.data) uni.setStorage({key: cache_key, data: res.data}) return res.data }对于复杂页面可以使用虚拟列表优化渲染性能。uni-app的scroll-view配合Vue3的响应式性能表现很好scroll-view scroll-y :scroll-topscrollTop scrollhandleScroll view v-foritem in visibleItems :keyitem.id :style{height: itemHeight px} {{ item.name }} /view /scroll-view6. 调试与错误处理经验在开发过程中我遇到最多的问题是跨端兼容性问题。比如在微信开发者工具中正常但在真机上异常。这时候需要特别注意真机调试一定要开启使用try-catch包裹可能出错的代码合理使用uni-app的条件编译对于常见的滚动问题我建议这样调试function handleScroll(e) { // #ifdef MP-WEIXIN console.log(微信小程序滚动信息:, e.detail) // #endif // #ifdef H5 console.log(H5滚动信息:, e.target.scrollTop) // #endif }网络请求错误处理要特别注意微信小程序的超时设置uni.request({ url: /api/data, timeout: 10000, success(res) { // 处理响应 }, fail(err) { if (err.errMsg.includes(timeout)) { uni.showToast({title: 请求超时, icon: none}) } else { uni.showToast({title: 网络错误, icon: none}) } } })对于图片加载失败的情况建议使用默认图占位image :srcitem.image :onerrordefaultImage /imageconst defaultImage this.srchttps://example.com/default.png this.onerrornull 7. 项目构建与部署现代前端项目离不开良好的构建配置。在uni-app中我通常会做这些优化配置环境变量开启压缩和分包配置CDN资源在vue.config.js中可以这样配置const isProd process.env.NODE_ENV production module.exports { configureWebpack: { externals: isProd ? { vue: Vue, vuex: Vuex } : {} }, chainWebpack(config) { config.plugin(define).tap(args { args[0][process.env].API_BASE JSON.stringify( isProd ? https://api.example.com : http://localhost:8080 ) return args }) } }对于SpringBoot后端我推荐使用Docker部署FROM openjdk:11-jre COPY target/app.jar /app.jar EXPOSE 8080 ENTRYPOINT [java,-jar,/app.jar]在微信小程序发布前一定要做好这些检查所有API域名都已配置到小程序后台所有图片资源都使用HTTPS已关闭调试模式已进行真机全面测试8. 进阶功能实现思路在基础功能完成后可以考虑实现这些进阶功能用户登录与权限控制微信支付集成消息订阅与推送性能监控以微信支付为例后端可以这样实现PostMapping(/pay) public Result createPayment(RequestBody Order order) { WxPayUnifiedOrderRequest request new WxPayUnifiedOrderRequest(); request.setBody(order.getDescription()); request.setOutTradeNo(order.getNo()); request.setTotalFee(order.getAmount()); request.setSpbillCreateIp(order.getIp()); request.setNotifyUrl(https://yourdomain.com/api/pay/notify); request.setTradeType(JSAPI); request.setOpenid(order.getOpenid()); WxPayUnifiedOrderResult result wxPayService.unifiedOrder(request); return Result.success(result); }前端调用支付uni.requestPayment({ provider: wxpay, timeStamp: res.timeStamp, nonceStr: res.nonceStr, package: res.package, signType: res.signType, paySign: res.paySign, success(res) { console.log(支付成功, res) }, fail(err) { console.error(支付失败, err) } })对于性能监控可以使用uni-app的统计API// 页面性能统计 onLoad() { this.startTime Date.now() }, onReady() { const loadTime Date.now() - this.startTime uni.reportAnalytics(page_performance, { page: this.$route.path, loadTime }) }在最近的一个项目中我通过这种全链路监控将页面平均加载时间从2.1秒优化到了1.3秒。关键是要建立完整的监控体系找出真正的性能瓶颈。