微信小程序商城全栈开发：从架构到支付实战

1. 项目概述微信小程序商城全栈开发实战微信小程序商城全栈开发是当前移动电商领域的热门技术方向。作为一名全栈开发者我最近完成了一个从零到一的微信小程序商城项目涵盖了前后端完整技术栈。这个项目不仅实现了商品展示、购物车、订单支付等核心电商功能还深入解决了微信支付回调、库存管理等业务难点。在开发过程中我采用了微信小程序原生框架作为前端技术栈后端使用PHPThinkPHP5框架数据库选用MySQL并整合了微信支付、用户授权等微信生态能力。整个项目从架构设计到具体实现都遵循了高内聚低耦合的原则确保系统可维护性和扩展性。2. 核心架构设计2.1 技术栈选型前端技术栈微信小程序原生框架ES6JavaScript自定义组件和模板系统本地缓存管理后端技术栈PHP 7.4ThinkPHP5框架MySQL 5.7RESTful API设计JWT令牌认证2.2 系统模块划分整个商城系统分为以下几个核心模块用户模块处理用户登录、授权、个人信息管理商品模块商品分类、详情、搜索功能实现购物车模块本地缓存管理、商品增删改查订单模块订单创建、状态管理、支付流程支付模块微信支付集成、回调处理后台管理商品、订单、用户数据管理2.3 数据流设计系统采用典型的前后端分离架构数据流动如下小程序前端 - HTTP API - ThinkPHP后端 - MySQL数据库 - JSON响应 -前端通过wx.request发起API请求后端返回统一格式的JSON数据。为提高性能部分高频但非实时性要求高的数据如商品分类使用本地缓存。3. 关键功能实现细节3.1 微信支付集成微信支付是商城核心功能其实现流程如下小程序端调用统一下单API服务端生成预付单并签名小程序端调起支付接口处理支付结果回调关键代码示例服务端预付单生成private function makeWxPreOrder($totalPrice){ $openid Token::getCurrentTokenVar(openid); if (!$openid){ throw new TokenException(); } $wxOrderData new \WxPayUnifiedOrder(); $wxOrderData-SetOut_trade_no($this-orderNO); $wxOrderData-SetTrade_type(JSAPI); $wxOrderData-SetTotal_fee($totalPrice*100); $wxOrderData-SetBody(商品描述); $wxOrderData-SetOpenid($openid); $wxOrderData-SetNotify_url(config(secure.pay_back_url)); return $this-getPaySignature($wxOrderData); }3.2 支付回调处理支付回调是支付流程中最复杂的部分需要注意微信会异步通知支付结果通知频率为15/15/30/180/1800...秒必须正确处理并返回响应否则会重复通知核心处理逻辑public function receiveNotify(){ $notify new WxNotify(); $notify-Handle(); } class WxNotify extends WxPayNotify { public function NotifyProcess($data, $msg){ if ($data[result_code] SUCCESS){ Db::startTrans(); try { $orderNo $data[out_trade_no]; $order OrderModel::where(order_no, $orderNo) -lock(true) -find(); if ($order-status OrderStatusEnum::UNPAID){ $service new OrderService(); $stockStatus $service-checkOrderStock($order-id); if ($stockStatus[pass]){ $this-updateOrderStatus($order-id, true); $this-reduceStock($stockStatus); } else { $this-updateOrderStatus($order-id, false); } } Db::commit(); return true; } catch(Exception $ex){ Db::rollback(); Log::error($ex); return false; } } return true; } }3.3 库存管理库存管理需要解决超卖问题我们采用数据库事务乐观锁实现下单时检查库存支付时再次检查库存使用数据库事务保证操作原子性更新库存时使用setDec方法避免并发问题关键代码private function reduceStock($stockStatus){ foreach ($stockStatus[pStatusArray] as $singlePStatus){ Product::where(id, $singlePStatus[id]) -setDec(stock, $singlePStatus[count]); } }4. 前端架构与实现4.1 前端工程结构├── pages │ ├── home // 首页 │ ├── product // 商品详情 │ ├── theme // 专题页 │ ├── category // 分类页 │ ├── cart // 购物车 │ └── my // 个人中心 ├── utils │ ├── base.js // 请求基类 │ └── config.js // 配置 └── tpls // 公共模板4.2 请求封装封装统一的请求基类处理token、错误码等通用逻辑class Base { constructor() { this.baseRequestUrl Config.restUrl; } request(params) { let url this.baseRequestUrl params.url; if (!params.type) { params.type GET; } wx.request({ url: url, data: params.data, method: params.type, header: { content-type: application/json, token: wx.getStorageSync(token) }, success: (res) { params.sCallBack params.sCallBack(res.data); }, fail: (err) { console.log(err); } }); } }4.3 购物车实现购物车使用小程序本地缓存存储关键方法class Cart extends Base { constructor() { super(); this._storageKeyName cart; } add(item, counts) { let cartData this.getCartDataFromLocal(); let isHasInfo this._isHasThatOne(item.id, cartData); if (isHasInfo.index -1) { item.counts counts; item.selectStatus true; cartData.push(item); } else { cartData[isHasInfo.index].counts counts; } wx.setStorageSync(this._storageKeyName, cartData); } getCartTotalCounts() { let data this.getCartDataFromLocal(); let counts 0; for (let i 0; i data.length; i) { counts data[i].counts; } return counts; } }5. 开发经验与避坑指南5.1 微信支付常见问题回调通知处理不完整必须正确处理微信支付回调并返回正确的响应否则微信会持续通知内网调试问题开发阶段可使用ngrok等工具将本地服务暴露到公网签名错误确保参与签名的参数与文档一致特别注意参数名大小写金额单位微信支付金额单位为分需将元转换为分5.2 性能优化建议图片懒加载商品图片较多时使用懒加载提升渲染性能数据缓存合理使用小程序本地缓存减少网络请求请求合并首页多个请求可考虑合并为一个分页加载商品列表采用分页加载避免一次性加载过多数据5.3 安全注意事项敏感信息保护切勿在前端存储或传输敏感信息如密钥等接口权限控制所有API接口必须进行权限验证参数校验所有用户输入必须进行严格校验防XSS攻击对用户输入内容进行转义处理6. 项目扩展与进阶完成基础商城功能后可以考虑以下扩展方向秒杀功能使用Redis实现高并发秒杀优惠券系统实现多种优惠券类型和规则分销系统基于社交关系的分销功能数据分析用户行为分析和商品推荐多端适配使用uni-app等框架实现多端兼容这个微信小程序商城项目涵盖了从需求分析到部署上线的完整流程涉及前后端多项关键技术。通过这个项目我深刻理解了全栈开发的要点和微信生态的开发模式。在实际开发中支付流程和库存管理是最具挑战性的部分需要特别注意事务处理和并发控制。