微信小程序商城全栈开发：从架构到支付实战-尧图网络科技

1. 项目概述：微信小程序商城全栈开发实战

微信小程序商城全栈开发是当前移动电商领域的热门技术方向。作为一名全栈开发者，我最近完成了一个从零到一的微信小程序商城项目，涵盖了前后端完整技术栈。这个项目不仅实现了商品展示、购物车、订单支付等核心电商功能，还深入解决了微信支付回调、库存管理等业务难点。

在开发过程中，我采用了微信小程序原生框架作为前端技术栈，后端使用PHP+ThinkPHP5框架，数据库选用MySQL，并整合了微信支付、用户授权等微信生态能力。整个项目从架构设计到具体实现，都遵循了高内聚低耦合的原则，确保系统可维护性和扩展性。

2. 核心架构设计

2.1 技术栈选型

前端技术栈：

微信小程序原生框架
ES6+JavaScript
自定义组件和模板系统
本地缓存管理

后端技术栈：

PHP 7.4+
ThinkPHP5框架
MySQL 5.7+
RESTful 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; } }