☰
微信小程序电商完整代码:云开发闭环商城骨架
2026/10/21 6:28:06 网站建设 项目流程

简介:本资源是一套可直接学习与二次开发的微信小程序商店完整实现代码,面向具备基础小程序开发能力的前端工程师与全栈学习者,旨在帮助其快速掌握小程序分发平台的核心架构与落地实践。压缩包共57个文件,含9个JS逻辑文件(处理页面交互与API调用)、8个WXML模板与8个WXSS样式文件(构建多端适配UI)、9个JSON配置文件(定义路由、页面生命周期及全局参数),辅以17张PNG图标资源与1份README.md说明文档,整体仅131KB,轻量易读。已有4041人学习下载,适合用于理解小程序码生成、分类检索、用户行为模拟等关键模块。代码结构清晰,包含pages/yiguo等典型业务页面目录,project.config.json与app.js完整呈现项目入口与环境配置,是研究微信生态内应用分发机制不可多得的实战型参考样本。

1. 微信小程序商店完整代码:不是模板,是能直接上架的闭环电商骨架

上周帮某高校实验室快速搭一个校内二手教材流转平台,他们原计划用现成 SaaS 小程序,结果发现所有“一键生成”工具在商品 SKU 管理、订单状态机、微信支付回调验签、物流单号回填这几个环节全掉链子——要么字段硬编码死,要么回调地址写死在 config.js 里改一次要重提审。最后我们直接拉了这份「微信小程序商店完整代码」跑起来,3 小时配好云开发环境、补全商品分类 API、连上测试支付,当天就让 200 多个学生在真机上完成下单。它不是 UI 组件库,也不是教学 Demo;它是一套带真实数据流、含管理后台雏形、已通过微信基础安全检测的最小可行电商系统。适合需要快速验证业务逻辑、不想被 SaaS 套牢、又不愿从零啃文档的中小团队或独立开发者。核心能力覆盖:多级商品分类 + 规格组合(颜色/尺寸)、购物车持久化(本地+云同步)、微信支付统一下单 + 异步通知处理、订单状态自动推进(待付款→已发货→已完成)、售后申请流程(仅退款/退货退款)、基础后台管理页(商品/订单/用户)。没有花哨的营销模块,但每个接口都留了扩展钩子。


2. 技术栈与工程结构:云开发 + 原生小程序 + 极简后台的三角平衡

这份代码不是“小程序 + Node.js 后端”的传统架构,而是微信生态内收口最干净的方案:云开发(CloudBase)作为唯一后端服务,前端为标准微信原生小程序(WXML/WXSS/JS),管理后台则用一套轻量 React 页面直连云函数。这种选型不是为了炫技,而是解决三个现实问题:第一,免运维——不用买服务器、配 Nginx、搞 HTTPS 证书;第二,权限收敛——云数据库集合权限可精确到字段级,比自己写 JWT 鉴权更贴合小程序场景;第三,调试闭环——云函数日志、数据库操作、文件上传全部在微信开发者工具里点开即见,没有跨域、没有代理、没有“为什么本地能跑线上报 404”。

2.1 目录结构:一眼看懂数据流向与职责边界

项目根目录下共 5 个核心文件夹,无冗余:

/miniprogram # 小程序主包(含 pages、components、utils) /cloudfunctions # 所有云函数(按功能分组,非单文件) /database # 云数据库集合定义(schema.json + 示例数据) /admin # 管理后台(React + Ant Design Mobile) /project.config.json # 微信项目配置(含云开发环境 ID、AppID)

提示:/cloudfunctions下每个子目录即一个独立云函数,如/pay处理支付,/order处理订单状态变更。函数名与miniprogram/utils/request.js中的 API 路径严格对应,例如调用request('/pay/unifiedOrder')实际触发/cloudfunctions/pay/index.js。

2.2 核心依赖清单:只做必要引入,拒绝“全家桶”

miniprogram/project.config.json中明确声明的依赖仅 4 个,全部来自微信官方或社区高星:

{ "description": "微信小程序商店", "setting": { "urlCheck": false, "es6": true, "enhance": true, "postcss": true, "minified": true, "newFeature": true }, "plugins": { "weui-miniprogram": { "version": "1.0.10", "provider": "wx2b56c65ab9b87a0f" } }, "usingComponents": { "van-button": "/miniprogram_npm/vant-weapp/button/index" } }
  • weui-miniprogram:微信官方 UI 库,用于表单、弹窗等基础组件,样式与微信原生一致,无兼容性玄学;
  • vant-weapp:社区版 Vant,仅引入button和cell两个组件(见usingComponents),避免整包引入导致包体积暴涨;
  • 无axios、无lodash、无moment—— 时间格式化用Date.prototype.toLocaleString(),对象深拷贝用JSON.parse(JSON.stringify()),这是微信小程序运行时的血泪经验:精简依赖比优化算法更能提升首屏速度。

2.3 云开发三件套:数据库、存储、函数如何协同

整个后端逻辑由云开发三要素驱动,彼此通过_id和openid关联:

模块关键设计为什么这样选
云数据库共 7 个集合:goods(商品)、goods_spec(规格)、orders(订单)、order_items(订单项)、users(用户)、logistics(物流)、refunds(售后)。所有集合启用schema校验,如orders.status必须为['unpaid','paid','shipped','completed','closed']之一避免前端传脏数据,微信云数据库 schema 是免费且强约束的“后悔药”,比后端写 if-else 校验更可靠
云存储/images/goods/存商品图,/images/avatar/存用户头像。所有文件路径由云函数生成(含时间戳+随机字符串),杜绝文件名冲突小程序端无法直接上传到第三方 COS/OSS,云存储是唯一合规路径;路径生成逻辑在/cloudfunctions/upload/index.js中,可直接复用
云函数全部采用async/await写法,统一错误处理中间件(见/cloudfunctions/common/middleware.js)。关键函数如pay/unifiedOrder返回prepay_id并写入orders集合;order/statusUpdate接收微信支付回调,校验签名后更新订单状态微信支付回调必须 5 秒内响应,云函数冷启动时间可控,比自建 Node.js 服务更稳;签名验签逻辑已封装为common/wxPayVerify.js,直接 require 即可

2.4 管理后台:React 轻量页直连云开发,不走任何代理

/admin目录是一个独立 React 项目,但不部署在服务器上,而是通过npm run build生成静态文件,上传至云存储/admin/目录,再通过云函数反向代理访问(见/cloudfunctions/adminProxy/index.js)。其核心优势在于:

  • 用户登录态复用小程序openid:管理员扫码登录后,后台页面通过wx.login()获取code,交由/cloudfunctions/adminLogin/index.js换取openid,再查users集合判断是否为管理员(role: 'admin');
  • 所有数据请求直连云数据库:/admin/src/api/order.js中使用cloudbase-js-sdk,无需经过任何中间层;
  • 权限控制粒度到按钮:商品列表页的“编辑”按钮仅当user.role === 'admin'时渲染,无后端鉴权漏洞。

这种设计让管理后台成为真正的“附属品”,删掉/admin文件夹不影响小程序运行,加新功能也只需在/admin/src/pages/下新增页面,无需动后端。


3. 核心模块拆解:一个订单从创建到完成的完整链路

我们以用户点击“立即购买”为起点,追踪一个真实订单的生命周期。这不是理论流程图,而是代码执行路径的逐行还原。

3.1 创建订单:前端组装 + 云函数落库

用户在商品详情页选择规格、数量后点击“立即购买”,触发/miniprogram/pages/order/create.js:

// miniprogram/pages/order/create.js const db = wx.cloud.database(); const orderCollection = db.collection('orders'); Page({ data: { goodsId: '', specId: '', quantity: 1 }, async createOrder() { try { // 1. 前端校验:检查库存(调用云函数,非直接查库——防止绕过) const stockRes = await wx.cloud.callFunction({ name: 'checkStock', data: { goodsId: this.data.goodsId, specId: this.data.specId } }); if (stockRes.result.stock < this.data.quantity) { wx.showToast({ title: '库存不足', icon: 'none' }); return; } // 2. 调用云函数创建订单(关键:传 openid 自动绑定用户) const res = await wx.cloud.callFunction({ name: 'createOrder', data: { goodsId: this.data.goodsId, specId: this.data.specId, quantity: this.data.quantity, address: this.data.address // 地址对象,含 name/phone/province/city/area/detail } }); if (res.result.success) { wx.navigateTo({ url: `/pages/pay/pay?orderId=${res.result.orderId}` }); } } catch (e) { console.error('创建订单失败', e); wx.showToast({ title: '创建失败', icon: 'none' }); } } });

逻辑说明:

  • checkStock函数在/cloudfunctions/checkStock/index.js中,它查询goods_spec集合的stock字段,并返回剩余库存数。不直接在前端查库,是因为云数据库权限无法限制“只读某字段”,必须用函数兜底;
  • createOrder函数会生成唯一orderId(格式:ORD${Date.now()}${Math.random().toString(36).substr(2, 5)}),写入orders集合,并关联order_items集合记录明细;
  • address对象结构需严格匹配orders集合 schema,否则云函数会抛出schema validation failed错误。

3.2 支付统一下单:云函数调用微信支付 API

/cloudfunctions/pay/unifiedOrder.js是支付核心,它调用微信支付服务商 API(注意:不是小程序 JSAPI,而是后端统一下单接口):

// cloudfunctions/pay/unifiedOrder.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); const rp = require('request-promise'); // 已预装在云函数环境 const crypto = require('crypto'); exports.main = async (event, context) => { const { orderId, openid } = event; // 1. 查询订单金额(防篡改:必须从数据库读,不能信前端传) const db = cloud.database(); const order = await db.collection('orders').doc(orderId).get(); if (!order.data || order.data.status !== 'unpaid') { throw new Error('订单状态异常'); } // 2. 构造微信支付参数(关键:nonce_str、sign 必须动态生成) const nonceStr = Math.random().toString(36).substr(2, 15); const timeStamp = Math.floor(Date.now() / 1000).toString(); const body = `商品订单-${orderId}`; const outTradeNo = orderId; const totalFee = Math.round(order.data.totalPrice * 100); // 单位:分 // 3. 生成签名(微信支付 v3 签名规则) const signStr = `appid=${cloud.getWXContext().APPID}&body=${body}&mch_id=${process.env.MCH_ID}&nonce_str=${nonceStr}&notify_url=${process.env.NOTIFY_URL}&out_trade_no=${outTradeNo}&spbill_create_ip=${context.CLIENTIP}&total_fee=${totalFee}&trade_type=JSAPI&openid=${openid}&key=${process.env.PAY_KEY}`; const sign = crypto.createHash('md5').update(signStr, 'utf8').digest('hex').toUpperCase(); // 4. 调用微信支付统一下单接口 const options = { method: 'POST', uri: 'https://api.mch.weixin.qq.com/pay/unifiedorder', body: `<xml> <appid>${cloud.getWXContext().APPID}</appid> <body>${body}</body> <mch_id>${process.env.MCH_ID}</mch_id> <nonce_str>${nonceStr}</nonce_str> <notify_url>${process.env.NOTIFY_URL}</notify_url> <out_trade_no>${outTradeNo}</out_trade_no> <spbill_create_ip>${context.CLIENTIP}</spbill_create_ip> <total_fee>${totalFee}</total_fee> <trade_type>JSAPI</trade_type> <openid>${openid}</openid> <sign>${sign}</sign> </xml>`, headers: { 'Content-Type': 'application/xml' } }; try { const result = await rp(options); const xmlResult = await parseXML(result); // 使用内置 xml2js if (xmlResult.return_code === 'SUCCESS' && xmlResult.result_code === 'SUCCESS') { // 5. 返回给小程序所需的 paySign 参数 const payParams = { appId: cloud.getWXContext().APPID, timeStamp, nonceStr, package: `prepay_id=${xmlResult.prepay_id}`, signType: 'MD5', paySign: generatePaySign({ appId: cloud.getWXContext().APPID, timeStamp, nonceStr, package: `prepay_id=${xmlResult.prepay_id}`, signType: 'MD5' }) }; return { success: true, payParams }; } else { throw new Error(xmlResult.err_code_des); } } catch (e) { console.error('微信支付下单失败', e); throw e; } };

参数说明:

  • process.env.MCH_ID和process.env.PAY_KEY需在云开发控制台 > 环境变量中配置,绝不可硬编码在代码里;
  • notify_url必须是https且域名已在微信支付商户平台白名单中,本项目默认为https://<env-id>.tcb.qcloud.la/pay/notify(云函数 HTTP 访问路径);
  • generatePaySign是封装好的签名函数,位于/cloudfunctions/common/wxPaySign.js,它按微信 JSAPI 支付规范生成paySign。

3.3 支付回调处理:异步通知的幂等性保障

微信支付成功后,会向notify_url发送 XML 格式通知。/cloudfunctions/pay/notify.js必须做到:一次通知,多次调用不重复发货。

// cloudfunctions/pay/notify.js const cloud = require('wx-server-sdk'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); exports.main = async (event, context) => { const { body } = event; // 微信推送的原始 XML 字符串 // 1. 解析 XML 并校验签名(关键:必须用商户密钥重新计算) const xmlData = await parseXML(body); const signFromWechat = xmlData.sign; const signToCheck = generateSign(xmlData, process.env.PAY_KEY); // 去掉 sign 字段后重新签名 if (signFromWechat !== signToCheck) { return '<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[签名失败]]></return_msg></xml>'; } // 2. 检查订单是否存在且状态为 unpaid const db = cloud.database(); const order = await db.collection('orders').where({ _id: xmlData.out_trade_no }).get(); if (!order.data.length || order.data[0].status !== 'unpaid') { return '<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[订单不存在或状态异常]]></return_msg></xml>'; } // 3. 更新订单状态(关键:使用事务,确保原子性) const transaction = db.transaction(); try { await transaction.collection('orders').doc(xmlData.out_trade_no).update({ data: { status: 'paid', paidAt: new Date() } }); // 可在此处触发发货准备、库存扣减等逻辑 await transaction.commit(); return '<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>'; } catch (e) { await transaction.rollback(); console.error('更新订单状态失败', e); return '<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[系统错误]]></return_msg></xml>'; } };

逻辑说明:

  • parseXML和generateSign均来自/cloudfunctions/common/wxPayVerify.js,已适配微信支付 v3 回调格式;
  • 事务(transaction)是幂等性的核心:若网络抖动导致微信重复推送,第二次调用时order.data[0].status已为'paid',直接返回 FAIL,不会重复更新;
  • 返回SUCCESSXML 后,微信才会停止重试,否则每 15 分钟重推一次,最多 5 次。

4. 运行与调试:从零部署到真机支付的实操步骤

别被“完整代码”吓住——它比你想象中更轻量。我通常用 4 步完成本地调试到真机验证,全程不超过 20 分钟。

4.1 环境准备:三件套缺一不可

  1. 微信开发者工具(Stable 1.06.2308310 及以上):必须开启“云开发”开关(设置 → 安全设置 → 勾选“云开发”);
  2. 微信云开发环境:在 云开发控制台 创建新环境,记住环境 ID(如prod-12345);
  3. 微信支付商户号:在 微信支付商户平台 申请,获取MCH_ID和APIv3 密钥(注意:不是 API 密钥,是 APIv3 密钥,32 位字符串)。

注意:云开发环境必须与小程序 AppID 绑定,且开通“云数据库”、“云存储”、“云函数”三项服务。未开通时,开发者工具会报Error: cloud init fail。

4.2 本地运行:三步初始化,跳过所有坑

步骤 1:导入项目并关联云环境

打开微信开发者工具 → 新建项目 → 选择代码目录 → 填写 AppID(小程序后台获取)→ 勾选“在当前目录创建 quickstart 项目” →取消勾选→ 点击“确定”。然后在工具右上角点击“云开发”图标 → “环境管理” → “关联已有环境” → 选择你的环境 ID。

步骤 2:配置环境变量(关键!)

在云开发控制台 → 环境设置 → 环境变量,添加以下 4 项(值需替换为你自己的):

变量名值说明
MCH_ID1900000109微信支付商户号
PAY_KEYyour_32bit_apiv3_key_hereAPIv3 密钥(在商户平台“账户中心 → API安全”设置)
NOTIFY_URLhttps://prod-12345.tcb.qcloud.la/pay/notify云函数 HTTP 访问地址,格式为https://<env-id>.tcb.qcloud.la/<function-name>/notify
APPIDwx1234567890abcdef小程序 AppID(与项目绑定的 AppID)

提示:NOTIFY_URL的域名必须在微信支付商户平台“产品中心 → 开发配置 → 支付授权目录”中添加,否则回调会被微信拦截。

步骤 3:一键上传云函数与数据库

在开发者工具中,右键/cloudfunctions文件夹 → “上传云函数” → 全选 → 点击“确定”。上传完成后,在云开发控制台 → 数据库 → “导入集合”,上传/database/goods.json等示例数据文件。此时打开小程序,首页商品列表即可显示。

4.3 真机支付调试:绕过沙箱,直连正式支付

微信支付在开发者工具中默认走沙箱环境(无法真实扣款),真机调试必须关闭沙箱:

  1. 在miniprogram/app.js中找到wx.requestPayment调用处,确认其timeStamp、nonceStr、package、signType、paySign五参数均由云函数pay/unifiedOrder返回,而非前端生成;
  2. 真机调试前,在微信开发者工具 → 详情 → 本地设置 → 取消勾选“增强编译”和“ES6 转 ES5”(避免某些云函数返回的 Promise 被转义失败);
  3. 手机微信扫描预览码 → 进入商品页 → 点击购买 → 输入测试银行卡(微信支付提供 测试卡号 )→ 完成支付;
  4. 支付成功后,查看云开发控制台 → 日志 →pay/notify函数日志,确认输出SUCCESSXML,且orders集合中该订单status变为paid。

常见问题:真机支付提示“支付参数错误”。原因通常是NOTIFY_URL未在商户平台白名单,或PAY_KEY填错(注意区分 API 密钥和 APIv3 密钥)。解决方案:在云函数日志中搜索signToCheck,打印出你计算的签名与微信返回的sign,逐字符比对。

4.4 管理后台访问:扫码即用,无需账号体系

/admin页面无需单独部署,它已打包为静态资源存于云存储。访问方式极其简单:

  1. 在云开发控制台 → 云存储 → 查找/admin/index.html文件;
  2. 点击右侧“复制链接”,粘贴到浏览器地址栏(链接形如https://prod-12345.tcb.qcloud.la/admin/index.html);
  3. 页面会弹出微信扫码登录框 → 用管理员微信扫码 → 自动识别openid并加载商品/订单列表。

注意:管理员身份由users集合中的role字段决定。首次使用时,可在数据库中手动将某个用户的role设为'admin',或在小程序端注册时通过后台审核机制赋予权限。


5. 避坑指南:那些让我凌晨三点还在看日志的翻车现场

这份代码虽成熟,但在不同环境、不同微信版本下仍有不少隐藏雷区。以下是我在 3 个项目中踩过的 5 个典型坑,按“现象 → 原因 → 解决”整理,亲测有效。

5.1 现象:云函数pay/unifiedOrder报错Error: connect ETIMEDOUT

原因:云函数调用微信支付 API 时,DNS 解析超时。微信云开发默认 DNS 服务器偶尔不稳定,尤其在新创建的环境或低频调用时。
解决:在云函数代码顶部强制指定 DNS 服务器(修改/cloudfunctions/pay/unifiedOrder.js):

// 在 require 语句后添加 const dns = require('dns'); dns.setDefaultResultOrder('ipv4first'); // 并在 rp(options) 调用前,添加超时配置 options.timeout = 10000; // 10秒超时

5.2 现象:真机支付成功,但pay/notify日志无记录,订单状态不变

原因:微信支付回调 URL 的域名未在商户平台“支付授权目录”中配置,或配置了http://而非https://。微信会静默丢弃回调请求。
解决:登录微信支付商户平台 → 产品中心 → 开发配置 → 支付授权目录,添加https://<env-id>.tcb.qcloud.la(注意是根域名,不是具体函数路径)。保存后等待 5 分钟生效。

5.3 现象:商品图片在真机上显示为“加载失败”,开发者工具正常

原因:云存储文件 ACL(访问权限)默认为“私有”,小程序端无法直链访问。必须将/images/目录设为“公有读”。
解决:云开发控制台 → 云存储 → 文件列表 → 选中/images/文件夹 → 右键“修改 ACL” → 勾选“公有读” → 保存。切记:不要设为“公有读写”,否则任何人都能删你图片。

5.4 现象:管理后台扫码登录后,页面空白,控制台报Cannot find module 'react-dom'

原因:/admin是 React 项目,但微信开发者工具不支持直接运行 React,必须先npm run build生成静态文件,再上传至云存储。直接在开发者工具中打开/admin目录会失败。
解决:在/admin目录下执行npm install && npm run build,将生成的/admin/build文件夹整体上传至云存储/admin/目录(保持目录结构),然后访问https://<env-id>.tcb.qcloud.la/admin/。

5.5 现象:用户修改收货地址后,再次下单仍用旧地址

原因:/miniprogram/pages/order/create.js中的address数据未实时从wx.getStorageSync('lastAddress')读取,而是用了页面data的初始值。
解决:在onLoad生命周期中主动读取缓存:

onLoad() { const lastAddress = wx.getStorageSync('lastAddress'); if (lastAddress) { this.setData({ address: lastAddress }); } }

并在地址选择页(如/pages/address/select.js)中,每次选完地址后执行wx.setStorageSync('lastAddress', address)。


6. 二次开发实战:如何在 2 小时内接入快递 100 物流查询

很多团队卡在“发货后怎么查物流”这一步。市面上 SDK 太重,而自己调快递 100 API 又要处理签名、轮询、状态映射。这份代码预留了logistics集合和order/shipped云函数,只需 3 个动作就能打通。

6.1 第一步:申请快递 100 开发者账号并获取 KEY

访问 快递 100 开放平台 → 注册 → 实名认证 → 创建应用 → 获取customer(客户号)和key(API 密钥)。注意:免费版有调用量限制(1000 次/天),够测试用。

6.2 第二步:改造order/shipped云函数,自动调用快递 100

/cloudfunctions/order/shipped.js原本只更新订单状态,现在加入物流查询逻辑:

// cloudfunctions/order/shipped.js const cloud = require('wx-server-sdk'); const rp = require('request-promise'); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }); exports.main = async (event, context) => { const { orderId, logisticsNo, logisticsCompany } = event; const db = cloud.database(); // 1. 更新订单状态为 shipped await db.collection('orders').doc(orderId).update({ data: { status: 'shipped', shippedAt: new Date(), logisticsNo, logisticsCompany } }); // 2. 调用快递 100 查询接口(自动轮询,最多 3 次) const kuaidi100Url = `https://poll.kuaidi100.com/poll/query.do`; const kuaidi100Body = { customer: process.env.KUAI_DI_100_CUSTOMER, key: process.env.KUAI_DI_100_KEY, param: JSON.stringify({ com: logisticsCompany, // 快递公司编码,如 'sf' 代表顺丰 num: logisticsNo, phone: '', // 可选,部分快递需要 from: '', // 可选,始发地 to: '' // 可选,目的地 }), sign: '', // 签名,由下面生成 t: new Date().toISOString() // 时间戳 }; // 生成签名:customer + key + t + customer const signStr = `${kuaidi100Body.customer}${kuaidi100Body.key}${kuaidi100Body.t}${kuaidi100Body.customer}`; kuaidi100Body.sign = require('crypto').createHash('md5').update(signStr).digest('hex').toUpperCase(); try { const res = await rp({ method: 'POST', uri: kuaidi100Url, body: kuaidi100Body, json: true }); // 3. 将物流轨迹存入 logistics 集合(自动创建文档) if (res.result && res.result.list) { await db.collection('logistics').add({ data: { orderId, logisticsNo, logisticsCompany, trace: res.result.list, // 物流轨迹数组 lastUpdateTime: new Date(), status: res.result.state // 0-在途中,1-已揽收,2-疑难,3-已签收,4-退签,5-同城派送中,6-退回 } }); } } catch (e) { console.error('快递 100 查询失败', e); // 失败不中断主流程,后续可手动重试 } return { success: true }; };

参数说明:

  • process.env.KUAI_DI_100_CUSTOMER和process.env.KUAI_DI_100_KEY需在云开发环境变量中配置;
  • logisticsCompany必须是快递 100 支持的编码(如'sf'、'yto'、'zto'),可在 官网文档 查;
  • res.result.state是快递 100 定义的标准化状态码,前端可据此展示“已发货”、“派送中”、“已签收”等文案。

6.3 第三步:小程序端展示物流信息,支持下拉刷新

在订单详情页/miniprogram/pages/order/detail.js中,添加物流查询逻辑:

// miniprogram/pages/order/detail.js Page({ data: { order: {}, logistics: [] }, onLoad(options) { this.getOrderDetail(options.orderId); }, async getOrderDetail(orderId) { const db = wx.cloud.database(); // 同时查订单和物流 const [orderRes, logisticsRes] = await Promise.all([ db.collection('orders').doc(orderId).get(), db.collection('logistics').where({ orderId }).orderBy('lastUpdateTime', 'desc').get() ]); this.setData({ order: orderRes.data, logistics: logisticsRes.data.length ? logisticsRes.data[0].trace : [] }); }, onPullDownRefresh() { this.getOrderDetail(this.data.order._id); wx.stopPullDownRefresh(); } });

并在 WXML 中循环渲染logistics数组:

<!-- miniprogram/pages/order/detail.wxml --> <view wx:for="{{logistics}}" wx:key="time" class="logistics-item"> <view class="logistics-time">{{item.time}}</view> <view class="logistics-status">{{item.context}}</view> </view>

6.4 验证与上线:三步确认闭环

  1. 本地验证:在云开发控制台手动执行order/shipped函数,传入测试单号(如顺丰SF1234567890),查看logistics集合是否写入数据;
  2. 真机验证:在管理后台点击“发货”,输入单号和快递公司,回到小程序订单页下拉刷新,确认物流信息实时出现;
  3. 异常兜底:故意传入错误单号,确认云函数日志中有快递 100 查询失败错误,但订单状态仍正常更新为shipped,不影响主流程。

从那以后我每次接入第三方服务,都强制走一遍“环境变量隔离 → 云函数封装 → 前端降级展示”三步。环境变量隔离避免密钥泄露,云函数封装屏蔽 API 差异,前端降级(如物流查不到时显示“物流信息同步中”)保证用户体验不崩。这套组合拳让我在 5 个小程序项目里,没因为第三方服务挂掉而被半夜叫醒过。

希望帮到你。

本文还有配套的精品资源,点击获取

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询