1. 为什么选择UniApp开发微信扫码核销功能最近两年我在多个电商项目中都遇到了需要实现扫码核销的需求。比如一个线下烘焙店的小程序顾客线上下单后需要到店扫码核销提货又比如一个景区门票系统游客购票后扫码入园。这些场景都需要一个稳定可靠的核销方案。UniApp在这个领域有几个天然优势首先是跨平台能力一套代码可以同时生成小程序和H5页面这对需要多渠道核销的场景特别友好。其次是开发效率基于Vue的语法让前端开发者上手特别快。最重要的是UniApp的插件市场有丰富的二维码相关组件比如uQRCode这个插件就帮我们省去了自己实现二维码生成的麻烦。实际开发中我发现扫码核销最关键的三个技术点是动态二维码生成、页面参数传递和状态验证。这三个环节环环相扣任何一个环节出问题都会导致整个流程失败。下面我就结合具体案例把这套方案拆解给大家看。2. 动态二维码生成实战2.1 安装配置uQRCode插件首先在UniApp插件市场搜索uQRCode安装Sansnn开发的这个版本。这个插件我用过不下十次稳定性确实不错。安装后引入方式很简单import UQRCode from /uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js这里有个小技巧建议把插件放在/开头的绝对路径下这样即使项目结构调整也不会影响引用。我在一个项目中曾经因为路径问题调试了半天这个坑希望大家避开。2.2 二维码内容拼接技巧生成二维码的核心是构造正确的URL字符串。以电商订单核销为例我们需要携带这些参数:valuehttps://yourdomain.com/#/pages/verify/verify? orderId${item.orderId} goodsId${item.goodsId} status${item.status}这里有几个注意事项URL长度不宜过长微信扫码对二维码复杂度有限制必传参数要包括订单ID和商品IDstatus字段用来区分已核销/未核销状态参数值一定要用encodeURIComponent处理特殊字符我在一个生鲜配送项目中就遇到过因为商品名称包含符号导致参数解析错误的问题后来统一加编码处理就解决了。3. 核销页面开发详解3.1 页面参数接收与处理当用户扫码进入核销页面时我们需要先获取URL中的参数onLoad() { const options getCurrentPages().pop().options this.orderId options.orderId this.status parseInt(options.status) || 0 }这里特别注意三点status字段要显式转换为数字类型要做好参数缺失的默认值处理重要参数建议在onLoad阶段就完成校验3.2 核销状态视觉呈现根据状态码的不同我们需要给用户明确的视觉反馈view v-ifstatus 0 classvalid-card u-button clickhandleVerify立即核销/u-button /view view v-else classinvalid-card text该订单已完成核销/text /view样式设计上建议已核销状态使用置灰效果添加删除线等视觉提示不同状态使用对比明显的色系4. 后端验证接口设计4.1 核销API安全设计前端点击核销按钮后需要调用后端接口完成验证async handleVerify() { const res await this.$http.post(/api/verify, { orderId: this.orderId, operatorId: getApp().globalData.userId, timestamp: Date.now() }) if(res.code 200) { this.status 1 uni.showToast({ title: 核销成功 }) } }这里要特别注意的几个安全措施接口需要校验操作员权限重要操作要加时间戳防重放返回结果要包含明确的业务状态码4.2 并发处理方案在高并发场景下比如节假日景区入口需要考虑使用数据库乐观锁防止重复核销关键操作加分布式锁前端做防重复点击处理我在一个连锁药店项目中就遇到过同一订单被不同门店重复核销的问题后来通过Redis分布式锁解决了。5. 项目优化经验分享5.1 性能优化技巧经过多个项目实践我总结出几个优化点二维码生成使用canvas替代图片体积减小70%接口响应时间控制在200ms以内使用本地缓存减少重复请求5.2 异常处理方案完善的错误处理能让用户体验提升很多二维码失效时提供刷新按钮网络异常时自动重试机制关键操作记录日志便于排查记得在一次商场促销活动中我们提前准备了这些异常处理方案平稳度过了日均10万的核销高峰。