简介这是一套面向微信小程序初学者与电商项目实践者的完整商城源码覆盖商品管理、用户中心、购物车、微信支付等核心模块界面设计专业、布局合理可作为小程序开发入门与实战参考。资源共188个文件包含110张界面素材图png、29个逻辑脚本js、17个视图结构文件wxml、17个样式定义文件wxss及11个配置文件json整体结构清晰便于理解小程序的MVVM分层实现压缩包仅726KB轻量易解压学习。已有1688人下载学习适合希望快速掌握小程序组件化开发、API调用如amap-wx地理服务、es6-promise异步处理及电商类业务流程整合的学习者。源码中已集成常用工具库regenerator-runtime、then.js等并附有README说明与Git规范配置开箱即用利于对照调试与二次开发。1. 微信商城小程序完整实例源代码一个能直接跑通、改完就能上线的电商闭环工程上周帮某高校实验室带学生做毕业设计有个同学拿着「微信商城小程序源码」压缩包发来消息“老师这项目点开就是404app.json里pages数组空着云函数连region都没填……”——结果解压后发现这不是半成品而是典型的“结构完整但配置剥离”型教学级工程它把登录态管理、商品列表分页、购物车持久化、订单生成与支付回调这五条主链路全写实了连微信支付的异步通知验签逻辑都封装成了独立工具类。适合两类人一是刚学完小程序基础、卡在“怎么把API串成业务流”的新手二是需要快速搭个MVP验证电商流程、又不想从wxml空文件开始抠的前端开发者。它不追求炫酷UI但每个页面的data初始化、事件绑定、setData时机都经得起真机调试它没上TS或Taro就用原生小程序语法反而让逻辑更透明。你今天下午花两小时配好appid和云环境明天就能在自己手机里完成一次真实下单。2. 环境准备与项目启动从零配置到首页渲染的完整链路2.1 微信开发者工具版本与基础依赖确认这个项目基于微信小程序基础库 2.28.0 构建必须使用微信开发者工具 Stable 版本 1.06.2307070 或更高。低于此版本会出现wx.cloud.database()报错旧版工具对云开发API兼容性差。安装后第一步不是导入项目而是打开设置 → 安全 → 勾选「启用服务端渲染SSR支持」——虽然本项目未用SSR但该选项影响云函数本地调试时的临时域名解析逻辑不勾选会导致cloud.callFunction调用超时。提示不要用 Canary 版本某次更新后 Canary 版对wx.getStorageSync的沙箱隔离策略变更导致购物车数据在模拟器里正常、真机上为空排查了3小时才发现是工具链bug。依赖方面项目采用纯云开发模式无需 npm install但需在微信开发者工具中完成三步初始化顶部菜单栏 → 云开发 → 开通云开发环境选择按量付费测试阶段0元开通后点击「云开发控制台」→ 在「数据库」Tab 创建product、order、user三个集合collection全部设为「仅创建者可读写」回到工具 → 右侧「云开发」面板 → 点击「上传部署」→ 全选所有云函数共7个勾选「上传并部署」等待状态变为「部署成功」此时项目目录下的cloudfunctions/文件夹即为真实运行环境后续所有云函数调用均走此路径。2.2 项目结构与核心配置文件解析解压后的目录结构非常清晰没有冗余文件wechat-mall/ ├── app.js # 全局App实例含onLaunch中用户登录态检查 ├── app.json # 页面路由定义注意pages数组顺序决定tabBar显示顺序 ├── project.config.json # 工具配置关键字段miniprogramRoot: ./, cloudfunctionRoot: ./cloudfunctions/ ├── sitemap.json # 搜索引擎收录配置已预置商品页路径规则 ├── cloudfunctions/ # 云函数根目录7个函数见下表 │ ├── login/ # 用户登录code2session 自定义token生成 │ ├── getProductList/ # 商品分页支持category筛选、price排序、limit/offset分页 │ ├── addToCart/ # 加入购物车原子操作避免并发覆盖 │ ├── getCart/ # 获取购物车聚合查询库存实时校验 │ ├── createOrder/ # 创建订单事务性操作扣库存写订单清购物车 │ ├── payOrder/ # 支付回调接收微信支付结果更新订单状态 │ └── getUserInfo/ # 用户信息读取云数据库user集合 ├── pages/ │ ├── index/ # 首页轮播图分类导航商品瀑布流 │ ├── product/ # 商品详情页SKU选择规格弹窗加入购物车 │ ├── cart/ # 购物车页多选结算数量编辑库存提示 │ ├── order/ # 订单确认页地址选择优惠券应用支付按钮 │ └── mine/ # 个人中心订单列表收藏夹设置入口 └── utils/ ├── request.js # 封装wx.request自动携带header.token └── payment.js # 微信支付统一下单签名生成含HMAC-SHA256实现重点看app.json中的tabBar配置tabBar: { list: [ { pagePath: pages/index/index, text: 首页, iconPath: assets/icons/home.png, selectedIconPath: assets/icons/home-active.png }, { pagePath: pages/cart/cart, text: 购物车, iconPath: assets/icons/cart.png, selectedIconPath: assets/icons/cart-active.png }, { pagePath: pages/mine/mine, text: 我的, iconPath: assets/icons/mine.png, selectedIconPath: assets/icons/mine-active.png } ] }这里决定了底部TabBar的三个固定入口。注意pages/order/order不在tabBar中它是通过wx.navigateTo跳转的非 tabBar 页面符合电商场景中订单页“一次性操作”的定位。2.3 首页渲染的关键数据流从onLoad到setData首页pages/index/index.js的onLoad是整个数据流的起点。我们拆解其核心逻辑// pages/index/index.js Page({ data: { banners: [], // 轮播图数组 categories: [], // 分类导航 products: [], // 商品列表 loading: true, // 加载状态 hasMore: true // 是否还有更多商品 }, onLoad() { this.loadBanners() this.loadCategories() this.loadProducts({ offset: 0 }) }, loadBanners() { wx.cloud.callFunction({ name: getBanners, // 注意此函数未在上述7个云函数中列出需手动创建 success: res { this.setData({ banners: res.result.data }) } }) }, loadProducts(params) { wx.cloud.callFunction({ name: getProductList, data: params, success: res { const newProducts [...this.data.products, ...res.result.data] this.setData({ products: newProducts, loading: false, hasMore: res.result.data.length params.limit }) } }) } })关键点在于getBanners函数需自行在云开发控制台创建返回格式为{ data: [{ id, url, link }] }getProductList云函数接收offset和limit参数内部使用db.collection(product).skip(offset).limit(limit)实现分页hasMore判断逻辑若本次查询返回数量等于limit则认为可能还有下一页实际是否还有需后端查总数此处简化处理提示loadProducts中的setData必须用展开运算符合并新旧数据否则滚动加载时会覆盖已渲染的商品。这是新手最常翻车的点——直接this.setData({ products: res.result.data })会导致首页只显示最后一页数据。3. 核心模块拆解购物车与订单生成的原子性保障3.1 购物车数据持久化云数据库事务 vs 本地缓存权衡本项目采用「云数据库存储 本地缓存加速」双写策略。购物车数据存在云数据库cart集合中结构如下{ _id: cart_abc123, userId: user_xyz789, items: [ { productId: prod_001, skuId: sku_blue_s, count: 2, updatedAt: 2023-10-05T12:34:56Z } ], updatedAt: 2023-10-05T12:34:56Z }pages/cart/cart.js中的onShow方法负责同步onShow() { // 1. 优先读本地缓存提升响应速度 const cachedCart wx.getStorageSync(cart) || { items: [] } // 2. 并发请求云数据避免本地过期 wx.cloud.callFunction({ name: getCart, data: { userId: getApp().globalData.userId }, success: res { if (res.result res.result.items) { // 3. 以云数据为准更新本地缓存 wx.setStorageSync(cart, res.result) this.setData({ cart: res.result }) } } }) }为什么不用纯本地存储因为购物车需跨设备同步如用户在iPad加购手机端要实时显示且涉及库存校验——本地无法保证库存准确性。而纯云存储又会导致每次进入购物车都白屏等待。双写是折中方案本地提供瞬时反馈云端保证最终一致性。3.2 创建订单的云函数事务实现cloudfunctions/createOrder/index.js是整个电商链路最核心的函数它必须保证「扣库存、写订单、清购物车」三步原子执行。微信云开发不支持传统数据库事务因此采用云函数内手动回滚 最终一致性校验const cloud require(wx-server-sdk) cloud.init() const db cloud.database() const _ db.command exports.main async (event, context) { const { userId, addressId, cartItems } event try { // 步骤1批量检查库存原子操作 const stockCheckRes await db.collection(product).where({ _id: _.in(cartItems.map(i i.productId)) }).field({ stock: true, _id: true }).get() const stockMap {} stockCheckRes.data.forEach(p stockMap[p._id] p.stock) for (const item of cartItems) { if ((stockMap[item.productId] || 0) item.count) { throw new Error(商品${item.productId}库存不足) } } // 步骤2批量扣减库存使用updateinc await db.collection(product).where({ _id: _.in(cartItems.map(i i.productId)) }).update({ data: { stock: _.inc(cartItems.filter(i i.productId db.command.eq).map(i -i.count)) } }) // 步骤3写入订单含时间戳、状态 const orderId ORD_${Date.now()}_${Math.random().toString(36).substr(2, 9)} await db.collection(order).add({ data: { _id: orderId, userId, addressId, items: cartItems, status: unpaid, createdAt: new Date(), totalAmount: cartItems.reduce((sum, i) sum i.price * i.count, 0) } }) // 步骤4清空购物车 await db.collection(cart).where({ userId }).remove() return { success: true, orderId } } catch (err) { // 关键库存扣减失败时记录错误日志并抛出 console.error(createOrder failed:, err) throw err } }注意_.inc是云数据库的原子递增操作避免并发下单导致超卖。但此代码有优化空间——当前对每个商品ID单独查库存高并发时可能因网络延迟导致「查时有货扣时售罄」。生产环境应改用db.collection(product).doc(productId).update({ data: { stock: _.inc(-count) } })并捕获update返回的stats.updated字段判断是否扣减成功。3.3 支付回调的安全验签绕过微信支付坑点cloudfunctions/payOrder/index.js处理微信支付异步通知。绝不能信任通知中的任何字段必须严格验签并主动查询订单状态const crypto require(crypto) // 从微信支付后台获取的APIv3密钥32位 const API_V3_KEY your_api_v3_key_here exports.main async (event, context) { const { resource } event // 微信支付通知的加密payload try { // 1. 解密resource.ciphertext const associatedData resource.associated_data const nonce resource.nonce const ciphertext resource.ciphertext const cipher crypto.createDecipheriv(aes-256-gcm, API_V3_KEY, Buffer.from(nonce, base64)) cipher.setAuthTag(Buffer.from(resource.ciphertext, base64)) cipher.setAAD(Buffer.from(associatedData, utf8)) const decrypted cipher.update(ciphertext, base64, utf8) cipher.final(utf8) const notifyData JSON.parse(decrypted) // 2. 验证通知中的订单号是否真实存在且状态为unpaid const orderRes await db.collection(order).where({ _id: notifyData.out_trade_no, status: unpaid }).get() if (orderRes.data.length 0) { throw new Error(订单不存在或状态异常) } // 3. 更新订单状态为paid await db.collection(order).doc(notifyData.out_trade_no).update({ data: { status: paid, paidAt: new Date(), transactionId: notifyData.transaction_id } }) return { code: SUCCESS, message: OK } } catch (err) { console.error(payOrder verify failed:, err) return { code: FAIL, message: err.message } } }关键避坑点微信支付V3接口要求使用AES-256-GCM解密且必须校验associated_data和nonce。很多开发者直接用MD5或SHA256验签导致永远返回FAIL。4. 常见问题排查那些让你怀疑人生的5个报错4.1 现象首页轮播图空白控制台报Cannot read property data of undefined原因getBanners云函数未创建或创建后未部署。wx.cloud.callFunction调用失败时返回res对象无result字段代码中直接访问res.result.data导致崩溃。解决在云开发控制台新建云函数getBanners内容为exports.main async (event, context) { return { data: [ { id: 1, url: https://example.com/banner1.jpg, link: /pages/product/product?id1 } ] } }然后右键 → 「上传并部署」。同时在前端加健壮性判断success: res { if (res.result Array.isArray(res.result.data)) { this.setData({ banners: res.result.data }) } }4.2 现象加入购物车后数量不增加真机调试显示cart is null原因getApp().globalData.userId为空。app.js中onLaunch未完成登录但pages/cart/cart.js的onShow已执行导致userId未初始化。解决在app.js的onLaunch中强制登录onLaunch() { wx.login({ success: res { wx.cloud.callFunction({ name: login, data: { code: res.code }, success: loginRes { this.globalData.userId loginRes.result.userId wx.setStorageSync(userId, loginRes.result.userId) } }) } }) }并在cart.js的onShow开头加判空onShow() { if (!getApp().globalData.userId) { wx.navigateTo({ url: /pages/login/login }) return } // 后续逻辑... }4.3 现象支付按钮点击无反应控制台报request:fail url not in domain list原因微信支付统一下单接口https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi未添加到小程序后台的「request合法域名」。解决登录微信公众平台 → 开发管理 → 开发设置 → 服务器域名 → 在「request 合法域名」中添加api.mch.weixin.qq.com注意不是https://api.mch.weixin.qq.com协议头不能带。此域名需企业资质认证后才可添加个人开发者账号无法配置此时需改用「微信支付 JSAPI」的替代方案在云函数中调用统一下单前端只接收prepay_id。4.4 现象商品详情页SKU选择后价格不更新setData无效果原因product.js中selectSku方法修改的是局部变量this.sku未触发this.setData。常见错误写法selectSku(sku) { this.sku sku // ❌ 错误未触发视图更新 }解决必须通过setData更新 data 中的对应字段selectSku(e) { const sku e.detail.sku this.setData({ selectedSku: sku, currentPrice: sku.price, stock: sku.stock }) }且 wxml 中需绑定>{ _id: cpn_001, title: 满100减20, minAmount: 100, discount: 20, validFrom: 2023-10-01, validTo: 2023-12-31, usedCount: 0, maxUseCount: 1000 }步骤2新增云函数getCouponsexports.main async (event, context) { const { userId, totalAmount } event const now new Date() return await db.collection(coupon).where({ validFrom: db.command.lte(now), validTo: db.command.gte(now), minAmount: db.command.lte(totalAmount), usedCount: db.command.lt(1000) }).field({ title: true, discount: true, _id: true }).get() }步骤3改造pages/order/order.js// 在data中增加 data: { coupons: [], selectedCoupon: null, finalAmount: 0 }, onLoad() { this.loadAddress() this.loadCoupons() // 新增 }, loadCoupons() { const total this.data.totalAmount wx.cloud.callFunction({ name: getCoupons, data: { userId: getApp().globalData.userId, totalAmount: total }, success: res { this.setData({ coupons: res.result.data }) } }) }, applyCoupon(e) { const coupon e.detail.value const discount coupon.discount || 0 const final Math.max(0.01, this.data.totalAmount - discount) // 保底0.01元 this.setData({ selectedCoupon: coupon, finalAmount: final }) }wxml 中添加选择器view classcoupon-section picker bindchangeapplyCoupon value{{couponIndex}} range{{coupons}} range-keytitle view classpicker选择优惠券{{selectedCoupon ? selectedCoupon.title : 暂无可用}}/view /picker text classamount立减{{selectedCoupon ? selectedCoupon.discount : 0}}元/text /view血泪经验优惠券金额不能直接减必须校验finalAmount 0否则微信支付会拒单。我曾因没加Math.max(0.01, ...)导致支付接口返回INVALID_TOTAL_FEE调试了2小时才发现是金额为0。5.2 商品搜索功能增强支持模糊匹配与拼音首字母检索原项目商品列表仅支持分类筛选搜索功能弱。我们利用云数据库的正则能力增强修改getProductList云函数// 增加search参数支持 if (event.search) { const regex new RegExp(event.search, i) // i表示忽略大小写 query Object.assign(query, { $or: [ { name: regex }, { pinyin: regex } // 需提前为商品添加pinyin字段如iphone-iph ] }) }在商品录入时自动生成拼音使用pinyinnpm 包需在云函数中npm install pinyinconst pinyin require(pinyin) // 录入商品时 const productName iPhone 14 Pro const pinyinStr pinyin(productName, { style: pinyin.STYLE_NORMAL, heteronym: false }).join() // 存入数据库 db.collection(product).add({ data: { name: productName, pinyin: pinyinStr, // iphone 14 pro // ... } })这样用户搜“pingguo”或“苹果”都能匹配到 iPhone 商品大幅提升搜索体验。5.3 真机调试必备本地代理抓包与云函数日志追踪开发中最痛苦的是「真机上能用开发者工具里报错」。我一般会强制走三步验证开启微信开发者工具的「条件编译」在project.config.json中添加setting: { enableWeappTailwind: true, enableAutoPreprocess: true, useCompilerPlugins: [tarojs/plugin-platform-weapp] }, compileType: miniprogram, libVersion: 2.28.0, debugOptions: { enableDebug: true, enableNetworkLog: true // 关键开启网络日志 }在云函数中打印关键路径日志console.log([createOrder] start, { userId, cartItems: cartItems.length }) console.log([createOrder] stock check passed, stockMap) console.log([createOrder] order created, orderId)然后在云开发控制台 → 日志查询 → 选择对应函数 → 时间范围设为最近5分钟即可看到每一步执行详情。真机抓包用 Charles手机WiFi设置代理指向电脑IP:8888微信开发者工具 → 详情 → 本地设置 → 勾选「安全域名校验」否则HTTPS请求被拦截在Charles中过滤cloud.weixin.qq.com查看callFunction请求体和响应比控制台日志更直观。从那以后我每次改完云函数都强制走一遍「开发者工具 → 真机扫码 → Charles抓包 → 云日志核对」四步闭环。少一次就可能埋一个线上bug。希望帮到你。本文还有配套的精品资源点击获取