简介萤火商城小程序V1.1.41独立开源版是一套面向单商家的微信小程序商业解决方案源码完全开放且无加密适合中小型企业、实体店主及个人创业者搭建线上商城也可作为开发者深度二次开发的基础项目。包体共2454个文件压缩包大小约10.78MB以1639个php后端逻辑文件、162个js脚本、91个wxml页面模板与101个wxss样式文件为主另含139个json配置、32个sql数据库脚本及多张图片资源目录结构完整能够支撑从商品管理、订单处理、微信支付、物流追踪到会员营销、数据统计的全流程运营。目前已有1279人浏览学习。借助这套源码开发者可自由修改前后端功能添加直播带货、社区论坛等扩展模块后端PHP与前端小程序分层清晰配合sql数据库脚本便于快速部署、理解业务逻辑并培养电商项目开发能力。1. 萤火商城小程序V1.1.41独立开源版解决的不只是“上个小程序”拿到萤火商城小程序V1.1.41独立开源版前端源码这个压缩包我建议先不要急着双击运行。独立开源版和演示版的最大差别在于前端 uniapp 代码、后端服务代码和数据库脚本都完整交给你但演示环境的账号、OSS、支付参数全部作废。你需要自己准备 MySQL、对象存储、小程序 AppID 和微信支付商户号再按真实业务跑一遍。V1.1.41 是一个普通迭代版本真正决定项目上限的不是版本号而是你怎么处理用户、订单、会员这几个基础模块之间的业务关系。适合有开发能力或至少能看懂日志的中小团队目标是把通用电商场景快速落地。2. 本地跑通萤火商城小程序 V1.1.41 的目录、环境与三条命令2.1 先把前端源码和后端源码分开避免路径空格解压后第一件事不是配置数据库而是确认目录结构。以同类项目的通行做法来看压缩包里通常包含后端 API 目录、前台 uniapp 目录、后台管理目录和数据库脚本。前端源码一般放在client或uniapp后端在server或api。不要直接双击index.html去访问uniapp 编译后跑的是微信小程序产物链路完全不同。目录/文件作用落地时怎么处理server/后端接口与定时任务拷贝到独立 PHP/Java 环境配好伪静态client/或uniapp/小程序前端源码单独用 HBuilderX 或 VSCode 打开database.sql初始化表结构与演示数据导入 MySQL不在原表上直接改字段README.md部署参数说明当成检查项不当作唯一依据注意不要把这个工程放在带空格的路径下比如C:\Users\My Documents\萤火商城新版本。部分可视化组件在编译时会把绝对路径写进资源引用空格会导致字体或图片资源 404。我习惯先建一个纯英文目录再把前后端各自放进去。cd /opt mkdir -p yhshop/{server,client,docs} unzip 萤火商城小程序V1.1.41独立开源版前端源码.zip -d yhshop ls -l yhshop/client这段命令先把压缩包解压到/opt/yhshop再确认client目录是否存在。后续所有操作都在/opt/yhshop下进行避免中文目录名和权限问题。mkdir -p会一次性创建两级目录{server,client,docs}是 bash 的花括号展开不适用于 fish shell在 fish 下要写成三条mkdir。2.2 数据库初始化与 .env 里最值得检查的五个参数后端服务起来之前先把数据库准备好。我习惯用命令行导入 SQL 文件。假设 MySQL 8.0可以用下面两条命令完成建库和导入mysql -u root -p -e CREATE DATABASE yhshop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; mysql -u root -p yhshop /opt/yhshop/server/database.sql第一条命令创建数据库指定utf8mb4和unicode_ci排序规则否则商品标题里的 Emoji 会出现问号。第二条把初始表结构和演示数据导入。如果这份 SQL 文件的definer指向了某个特定用户名导入时报权限错可以在导入前临时执行SET GLOBAL log_bin_trust_function_creators1;导入完成后关闭。接着打开后端根目录的.env.example复制成.env。我一般只关注五个参数参数名要确认的信息APP_DEBUG本地设true上线必须falseDB_HOST不要写localhost优先127.0.0.1省去 socket 解析差异WX_APPID / WX_APPSECRET来自微信公众平台的移动应用不是普通小程序 IDWX_MCH_ID微信支付商户号与 AppID 必须绑定在同一主体STORAGE_DRIVER本地为local上生产换成阿里云 OSS 或腾讯云 COS.env不需要进 Git改完要重启 PHP-FPM 或重新php think run才生效。这里最容易犯的错误是把线上数据库连接信息也写进前端源码uniapp 编译后的包会被抓包工具直接读到等于泄露凭据。2.3 用 HBuilderX 运行 uniapp 到微信开发者工具的完整流程前端源码是 uniapp 工程常规运行方式有两种。如果你习惯命令行依赖安装完成后直接执行cd /opt/yhshop/client npm install npm run dev:mp-weixinnpm install安装package.json里的依赖包括dcloudio/uni-app相关库。npm run dev:mp-weixin相当于调用uni build -p mp-weixin --watch产物默认输出到dist/dev/mp-weixin。随后打开微信开发者工具导入这个目录。需要提醒的是uniapp 对 Node 版本有要求报Cannot find module时先删除node_modules和package-lock.json再重新安装不要直接升级 Node 大版本。如果你一直用 HBuilderX 开发微信小程序流程也能直接走通。菜单栏选择“文件 — 打开目录”定位到client目录再选择“运行 — 运行到小程序模拟器 — 微信开发者工具”。HBuilderX 会自己编译并调用已安装的微信开发者工具 CLI。这一步会连带检查manifest.json里的mp-weixin配置如果没有填 AppID编译不会失败但模拟器里会看到“appid is not defined”。提示运行到模拟器时如果提示“未配置 AppID”页面渲染未必报错但登录、支付、获取用户信息这些依赖微信能力的接口会全部失败。先填一个测试 AppID真机预览再换正式值。3. 微信小程序接入萤火商城AppID、登录和加载页改造3.1 manifest.json 里修改 AppID 与 request 合法域名萤火商城前端源码的manifest.json在 HBuilderX 里双击打开后能看到微信小程序配置。模板里默认带的 AppID 是touristappid必须改成你申请的正式 AppID。涉及微信支付和订阅消息必须使用企业主体认证后的 AppID并在“小程序后台 — 开发管理 — 开发设置”里配置服务器域名。关键参数我先列一个清单上线前逐一核对manifest 配置项示例值说明mp-weixin.appidwx1234567890abcdef替换 touristappidmp-weixin.setting.urlCheckfalse本地调试可关闭域名校验mp-weixin.usingComponentstrue使用原生组件不要关mp-weixin.mergeVirtualHostAttributestrue解决资源地址生成错乱除此之外代码里通常有一个utils/config.js定义BASE_URL。我在处理这套源码时会把BASE_URL指到开发机的局域网 IP例如http://192.168.1.8:8082/api/。原因在于微信开发者工具里localhost指向电脑手机预览时localhost却指向手机自己局域网 IP 两边都能访问。// utils/config.js const isProd process.env.NODE_ENV production const BASE_URL isProd ? https://shop.example.com/api/ : http://192.168.1.8:8082/api/ export { BASE_URL }这段代码通过NODE_ENV切换接口地址。本地开发用局域网 IP打包发布后自动切到 HTTPS 域名。isProd由 uniapp 编译过程注入不需要手动改。生产环境的BASE_URL协议必须是https微信原生wx.request在真机上会拦截明文 HTTP 请求。3.2 修改刚进入的加载页面取消两段式跳转关于“修改刚进入的加载页面”这里有两种常见理解一种是改启动后第一个显示的页面另一种是给页面加独立 loading 组件。前者最简单在pages.json的pages数组里把目标页面的path放到第一项即可。萤火商城默认首页是pages/index/index但调试登录逻辑时我更习惯把pages/member/login临时放到第一位减少重复跳转。{ pages: [ { path: pages/index/index, style: { navigationBarTitleText: 首页 } } ], tabBar: { list: [ { pagePath: pages/index/index, text: 首页 } ] } }当pages/index/index放在首项时小程序冷启动会直接进入首页不再先闪启动屏再跳转。这里要注意 tabBar 页面必须被声明在pages数组里如果你把一个非 tabBar 页面放到第一位底部导航可能空白。更常见的做法是新增一个 loading 页在页面里完成 token 校验再决定去向。onLoad() { const token uni.getStorageSync(token) if (token) { uni.switchTab({ url: /pages/index/index }) } else { uni.redirectTo({ url: /pages/member/login }) } }这段代码先读本地缓存里的 token有值就切到首页没有就跳登录页。使用switchTab是因为 tabBar 页面不能被navigateTo打开。注意uni.getStorageSync返回空串时旧版本可能会进入死循环判断时要同时排除空串。3.3 uni.setNavigationBarTitle 动态设置小程序头部标题与导航栏高度商城小程序里到处要用动态标题商品详情页标题从商品名读出订单列表页根据订单状态变化。pages.json里写死的navigationBarTitleText不够用要在页面onLoad或onShow里调用uni.setNavigationBarTitle。onLoad(query) { if (query.name) { uni.setNavigationBarTitle({ title: decodeURIComponent(query.name) }) } }decodeURIComponent在这里很必要因为小程序页面路径里传中文参数时会被 URL 编码直接使用会显示成乱码。标题长度不要超过 16 个中文字符超长部分微信会在导航栏里直接省略。如果你要自定义导航栏高度需要把页面navigationStyle改成custom再手动计算状态栏高度。计算顶部导航栏高度是高频调试点。我把适配代码写在common/navbar.js里核心是拿到微信胶囊按钮的位置export function getNavBarHeight() { const system uni.getSystemInfoSync() const capsule uni.getMenuButtonBoundingClientRect() const statusBarHeight system.statusBarHeight const navBarHeight (capsule.top - statusBarHeight) * 2 capsule.height return { statusBarHeight, navBarHeight } }这段代码计算的是“状态栏高度 胶囊区域高度”能适配大部分安卓和 iPhone。注意uni.getMenuButtonBoundingClientRect只有微信小程序可用在 H5 端不存在使用前必须做#ifdef MP-WEIXIN条件编译否则 H5 调试控制台会直接报错。4. 萤火商城前端源码二次开发登录态、支付、SKU 联动避坑4.1 封装 request 并处理登录态失效的 401萤火商城独立版里每个接口基本都会校验Authorization头。最省事的做法不是每个页面都写uni.request而是统一封装一层 request。我在utils目录下新建request.js统一注入 token 和业务码判断const request (options) { const token uni.getStorageSync(token) const header { Content-Type: application/json, Authorization: token ? Bearer ${token} : } return new Promise((resolve, reject) { uni.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header, success: (res) { if (res.data.code 401) { uni.removeStorageSync(token) uni.navigateTo({ url: /pages/member/login }) reject(res) } else { resolve(res.data) } }, fail: reject }) }) }这里的code字段是后端返回的业务状态码不是 HTTP 状态码。独立开源版后端接口常见约定是 HTTP 200 但code: 401只在 token 过期时区分为 401。如果误把 HTTP 401 当作业务码判断控制台已经报 401前端却拿不到业务失败信息。每次请求都带Authorization头后端验证通过后才返回商品、订单等数据。一个常见的登录态问题是 token 缓存时间设置过长表格里列几个高频报错报错信息最常见原因处理方式token has expired后端 JWT 过期时间太长调短JWT_TTL并增加自动续期invalid tokenAppSecret 被重置在小程序后台重置 secret 后同步到.env登录页跳转死循环登录页也判断了 token登录页 onLoad 里不再触发 request4.2 小程序支付与独立开源版的后端签名校验微信支付在二次开发中是最容易出问题的部分。小程序端流程是点击支付 - 调用后端创建订单 - 后端调用微信支付下单接口 - 返回支付参数 - 前端用uni.requestPayment拉起收银台。独立开源版通常有“模拟支付”开关开发时可以用但上线前必须关闭。uni.requestPayment({ provider: wxpay, timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.package, signType: RSA, paySign: res.data.paySign, success: () { uni.showToast({ title: 支付成功 }) } })上面代码里的signType: RSA要和统一下单接口里使用的签名算法一致否则会一直弹“支付验证签名失败”。另外package是 JS 的保留字作为对象 key 没问题但建议先用const pack res.data.package解构避免部分代码压缩工具处理出错。支付结果不能只以前端回调为准。后端收到微信回调后会对参数做签名校验校验通过才把订单改成已支付。如果你发现“微信支付已扣款小程序订单还是待付款”大概率是回调地址没有设置为外网可访问的 HTTPS URL或者回调路径被 Nginx 重写规则拦截。排查时先看后端 access log 里有没有来自微信支付 IP 的请求没有就说明回调地址根本没通。4.3 uniapp 平台差异和 ES6 兼容的坑uniapp 编译到微信小程序时官方会自动处理大部分语法转换但 V1.1.41 的前端源码里仍可能残留旧的 promise 写法。开发时我在微信开发者工具里关闭“ES6 转 ES5”后出现regeneratorRuntime is not defined原因是代码里用了async/await而编译配置没有把 runtime 打进去。遇到这种问题可以在manifest.json的mp-weixin配置里打开“ES6 转 ES5”或者统一改用 promise 链。平台差异同样要关注。萤火商城前端源码使用uni.login获取 code在小程序端没问题但在 H5 端uni.login不存在需要改成微信网页授权。我的经验是给utils/auth.js做一个默认导出内部用条件编译处理export function login() { return new Promise((resolve, reject) { // #ifdef MP-WEIXIN uni.login({ provider: weixin, success: (res) resolve(res.code) }) // #endif // #ifdef H5 resolve(location.search.split(code)[1]) // #endif }) }条件编译会在打包前把不属于当前平台的代码直接删除所以能避免 H5 编译时执行到不存在的 API。商品 SKU 联动也一样小程序端可以用原生 picker 实现但选完规格后要自己组装skuKey不能依赖 HTML 的select。SKU 联动一旦挂掉常见现象是“切换规格后价格没变”或“库存判断失效”。排查顺序是先看规格维度数据是否回填再看选中项是否做了深拷贝避免 Vue 响应式系统检测不到变化。症状出现场合定位方向真机可用模拟器白屏微信基础库版本不同看 console 里的 API 兼容性警告支付成功但订单未更新回调地址不可达检查后端 access log 是否有微信 IPSKU 切换价格不变数据对象被直接修改确认提交参数时用的是深拷贝后的新对象5. 萤火商城小程序上线前的真机预览与版本迭代验证5.1 上线前逐项核对接口、域名和缓存真机预览能覆盖大部分模拟器看不见的问题。我的顺序是先打开“不校验合法域名”跑通从首页到支付的完整链路再关闭该选项逐项验证白名单。这个步骤建议在真机上做因为模拟器对 referer 校验和隐私弹窗的处理更宽松。核心核对项如下核对项一手信号失败时先看哪接口协议所有请求是 HTTPS证书未过期Nginx 证书链是否只配置了站点证书图片域名首页图片全部能打开COS 或 OSS 是否开启了防盗链登录态过期跳转登录页而不是弹错误框request.js里的 401 分支支付回调订单状态 30 秒内变已支付后端 access log 里是否有微信回调 IP隐私权限开发者工具提示“隐私接口未声明”小程序后台更新《用户隐私保护指引》隐私这一项不处理微信会在提交审核时直接驳回。回调地址没生效时最常见原因是回调 URL 带了/index.php这类伪静态后缀微信商户平台回调地址必须去掉它。5.2 用本地缓存回显加速萤火商城首页冷启动最后给一个对小程序商城体验提升明显的技巧首页完成首次请求后把数据缓存到本地冷启动时先回显缓存再用最新接口数据覆盖。代码很简单const CACHE_KEY HOME_CACHE_V1141 onLoad() { const cached uni.getStorageSync(CACHE_KEY) if (cached) { this.list cached } this.fetchHome() }缓存键带着版本号V1141发版后数据不冲突。fetchHome成功之后把this.list写入同键缓存。配合前面说的 loading 页冷启动时用户几乎感觉不到网络等待。下一次冷启动用户看到的是上一次的完整首页接口数据在后台无声刷新。这个技巧的价值就在于减少首屏网络往返同时给你的接口限流留出更多余量。本文还有配套的精品资源点击获取 萤火商城小程序V1.1.41独立开源版部署与二次开发实战指南
简介萤火商城小程序V1.1.41独立开源版是一套面向单商家的微信小程序商业解决方案源码完全开放且无加密适合中小型企业、实体店主及个人创业者搭建线上商城也可作为开发者深度二次开发的基础项目。包体共2454个文件压缩包大小约10.78MB以1639个php后端逻辑文件、162个js脚本、91个wxml页面模板与101个wxss样式文件为主另含139个json配置、32个sql数据库脚本及多张图片资源目录结构完整能够支撑从商品管理、订单处理、微信支付、物流追踪到会员营销、数据统计的全流程运营。目前已有1279人浏览学习。借助这套源码开发者可自由修改前后端功能添加直播带货、社区论坛等扩展模块后端PHP与前端小程序分层清晰配合sql数据库脚本便于快速部署、理解业务逻辑并培养电商项目开发能力。1. 萤火商城小程序V1.1.41独立开源版解决的不只是“上个小程序”拿到萤火商城小程序V1.1.41独立开源版前端源码这个压缩包我建议先不要急着双击运行。独立开源版和演示版的最大差别在于前端 uniapp 代码、后端服务代码和数据库脚本都完整交给你但演示环境的账号、OSS、支付参数全部作废。你需要自己准备 MySQL、对象存储、小程序 AppID 和微信支付商户号再按真实业务跑一遍。V1.1.41 是一个普通迭代版本真正决定项目上限的不是版本号而是你怎么处理用户、订单、会员这几个基础模块之间的业务关系。适合有开发能力或至少能看懂日志的中小团队目标是把通用电商场景快速落地。2. 本地跑通萤火商城小程序 V1.1.41 的目录、环境与三条命令2.1 先把前端源码和后端源码分开避免路径空格解压后第一件事不是配置数据库而是确认目录结构。以同类项目的通行做法来看压缩包里通常包含后端 API 目录、前台 uniapp 目录、后台管理目录和数据库脚本。前端源码一般放在client或uniapp后端在server或api。不要直接双击index.html去访问uniapp 编译后跑的是微信小程序产物链路完全不同。目录/文件作用落地时怎么处理server/后端接口与定时任务拷贝到独立 PHP/Java 环境配好伪静态client/或uniapp/小程序前端源码单独用 HBuilderX 或 VSCode 打开database.sql初始化表结构与演示数据导入 MySQL不在原表上直接改字段README.md部署参数说明当成检查项不当作唯一依据注意不要把这个工程放在带空格的路径下比如C:\Users\My Documents\萤火商城新版本。部分可视化组件在编译时会把绝对路径写进资源引用空格会导致字体或图片资源 404。我习惯先建一个纯英文目录再把前后端各自放进去。cd /opt mkdir -p yhshop/{server,client,docs} unzip 萤火商城小程序V1.1.41独立开源版前端源码.zip -d yhshop ls -l yhshop/client这段命令先把压缩包解压到/opt/yhshop再确认client目录是否存在。后续所有操作都在/opt/yhshop下进行避免中文目录名和权限问题。mkdir -p会一次性创建两级目录{server,client,docs}是 bash 的花括号展开不适用于 fish shell在 fish 下要写成三条mkdir。2.2 数据库初始化与 .env 里最值得检查的五个参数后端服务起来之前先把数据库准备好。我习惯用命令行导入 SQL 文件。假设 MySQL 8.0可以用下面两条命令完成建库和导入mysql -u root -p -e CREATE DATABASE yhshop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; mysql -u root -p yhshop /opt/yhshop/server/database.sql第一条命令创建数据库指定utf8mb4和unicode_ci排序规则否则商品标题里的 Emoji 会出现问号。第二条把初始表结构和演示数据导入。如果这份 SQL 文件的definer指向了某个特定用户名导入时报权限错可以在导入前临时执行SET GLOBAL log_bin_trust_function_creators1;导入完成后关闭。接着打开后端根目录的.env.example复制成.env。我一般只关注五个参数参数名要确认的信息APP_DEBUG本地设true上线必须falseDB_HOST不要写localhost优先127.0.0.1省去 socket 解析差异WX_APPID / WX_APPSECRET来自微信公众平台的移动应用不是普通小程序 IDWX_MCH_ID微信支付商户号与 AppID 必须绑定在同一主体STORAGE_DRIVER本地为local上生产换成阿里云 OSS 或腾讯云 COS.env不需要进 Git改完要重启 PHP-FPM 或重新php think run才生效。这里最容易犯的错误是把线上数据库连接信息也写进前端源码uniapp 编译后的包会被抓包工具直接读到等于泄露凭据。2.3 用 HBuilderX 运行 uniapp 到微信开发者工具的完整流程前端源码是 uniapp 工程常规运行方式有两种。如果你习惯命令行依赖安装完成后直接执行cd /opt/yhshop/client npm install npm run dev:mp-weixinnpm install安装package.json里的依赖包括dcloudio/uni-app相关库。npm run dev:mp-weixin相当于调用uni build -p mp-weixin --watch产物默认输出到dist/dev/mp-weixin。随后打开微信开发者工具导入这个目录。需要提醒的是uniapp 对 Node 版本有要求报Cannot find module时先删除node_modules和package-lock.json再重新安装不要直接升级 Node 大版本。如果你一直用 HBuilderX 开发微信小程序流程也能直接走通。菜单栏选择“文件 — 打开目录”定位到client目录再选择“运行 — 运行到小程序模拟器 — 微信开发者工具”。HBuilderX 会自己编译并调用已安装的微信开发者工具 CLI。这一步会连带检查manifest.json里的mp-weixin配置如果没有填 AppID编译不会失败但模拟器里会看到“appid is not defined”。提示运行到模拟器时如果提示“未配置 AppID”页面渲染未必报错但登录、支付、获取用户信息这些依赖微信能力的接口会全部失败。先填一个测试 AppID真机预览再换正式值。3. 微信小程序接入萤火商城AppID、登录和加载页改造3.1 manifest.json 里修改 AppID 与 request 合法域名萤火商城前端源码的manifest.json在 HBuilderX 里双击打开后能看到微信小程序配置。模板里默认带的 AppID 是touristappid必须改成你申请的正式 AppID。涉及微信支付和订阅消息必须使用企业主体认证后的 AppID并在“小程序后台 — 开发管理 — 开发设置”里配置服务器域名。关键参数我先列一个清单上线前逐一核对manifest 配置项示例值说明mp-weixin.appidwx1234567890abcdef替换 touristappidmp-weixin.setting.urlCheckfalse本地调试可关闭域名校验mp-weixin.usingComponentstrue使用原生组件不要关mp-weixin.mergeVirtualHostAttributestrue解决资源地址生成错乱除此之外代码里通常有一个utils/config.js定义BASE_URL。我在处理这套源码时会把BASE_URL指到开发机的局域网 IP例如http://192.168.1.8:8082/api/。原因在于微信开发者工具里localhost指向电脑手机预览时localhost却指向手机自己局域网 IP 两边都能访问。// utils/config.js const isProd process.env.NODE_ENV production const BASE_URL isProd ? https://shop.example.com/api/ : http://192.168.1.8:8082/api/ export { BASE_URL }这段代码通过NODE_ENV切换接口地址。本地开发用局域网 IP打包发布后自动切到 HTTPS 域名。isProd由 uniapp 编译过程注入不需要手动改。生产环境的BASE_URL协议必须是https微信原生wx.request在真机上会拦截明文 HTTP 请求。3.2 修改刚进入的加载页面取消两段式跳转关于“修改刚进入的加载页面”这里有两种常见理解一种是改启动后第一个显示的页面另一种是给页面加独立 loading 组件。前者最简单在pages.json的pages数组里把目标页面的path放到第一项即可。萤火商城默认首页是pages/index/index但调试登录逻辑时我更习惯把pages/member/login临时放到第一位减少重复跳转。{ pages: [ { path: pages/index/index, style: { navigationBarTitleText: 首页 } } ], tabBar: { list: [ { pagePath: pages/index/index, text: 首页 } ] } }当pages/index/index放在首项时小程序冷启动会直接进入首页不再先闪启动屏再跳转。这里要注意 tabBar 页面必须被声明在pages数组里如果你把一个非 tabBar 页面放到第一位底部导航可能空白。更常见的做法是新增一个 loading 页在页面里完成 token 校验再决定去向。onLoad() { const token uni.getStorageSync(token) if (token) { uni.switchTab({ url: /pages/index/index }) } else { uni.redirectTo({ url: /pages/member/login }) } }这段代码先读本地缓存里的 token有值就切到首页没有就跳登录页。使用switchTab是因为 tabBar 页面不能被navigateTo打开。注意uni.getStorageSync返回空串时旧版本可能会进入死循环判断时要同时排除空串。3.3 uni.setNavigationBarTitle 动态设置小程序头部标题与导航栏高度商城小程序里到处要用动态标题商品详情页标题从商品名读出订单列表页根据订单状态变化。pages.json里写死的navigationBarTitleText不够用要在页面onLoad或onShow里调用uni.setNavigationBarTitle。onLoad(query) { if (query.name) { uni.setNavigationBarTitle({ title: decodeURIComponent(query.name) }) } }decodeURIComponent在这里很必要因为小程序页面路径里传中文参数时会被 URL 编码直接使用会显示成乱码。标题长度不要超过 16 个中文字符超长部分微信会在导航栏里直接省略。如果你要自定义导航栏高度需要把页面navigationStyle改成custom再手动计算状态栏高度。计算顶部导航栏高度是高频调试点。我把适配代码写在common/navbar.js里核心是拿到微信胶囊按钮的位置export function getNavBarHeight() { const system uni.getSystemInfoSync() const capsule uni.getMenuButtonBoundingClientRect() const statusBarHeight system.statusBarHeight const navBarHeight (capsule.top - statusBarHeight) * 2 capsule.height return { statusBarHeight, navBarHeight } }这段代码计算的是“状态栏高度 胶囊区域高度”能适配大部分安卓和 iPhone。注意uni.getMenuButtonBoundingClientRect只有微信小程序可用在 H5 端不存在使用前必须做#ifdef MP-WEIXIN条件编译否则 H5 调试控制台会直接报错。4. 萤火商城前端源码二次开发登录态、支付、SKU 联动避坑4.1 封装 request 并处理登录态失效的 401萤火商城独立版里每个接口基本都会校验Authorization头。最省事的做法不是每个页面都写uni.request而是统一封装一层 request。我在utils目录下新建request.js统一注入 token 和业务码判断const request (options) { const token uni.getStorageSync(token) const header { Content-Type: application/json, Authorization: token ? Bearer ${token} : } return new Promise((resolve, reject) { uni.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header, success: (res) { if (res.data.code 401) { uni.removeStorageSync(token) uni.navigateTo({ url: /pages/member/login }) reject(res) } else { resolve(res.data) } }, fail: reject }) }) }这里的code字段是后端返回的业务状态码不是 HTTP 状态码。独立开源版后端接口常见约定是 HTTP 200 但code: 401只在 token 过期时区分为 401。如果误把 HTTP 401 当作业务码判断控制台已经报 401前端却拿不到业务失败信息。每次请求都带Authorization头后端验证通过后才返回商品、订单等数据。一个常见的登录态问题是 token 缓存时间设置过长表格里列几个高频报错报错信息最常见原因处理方式token has expired后端 JWT 过期时间太长调短JWT_TTL并增加自动续期invalid tokenAppSecret 被重置在小程序后台重置 secret 后同步到.env登录页跳转死循环登录页也判断了 token登录页 onLoad 里不再触发 request4.2 小程序支付与独立开源版的后端签名校验微信支付在二次开发中是最容易出问题的部分。小程序端流程是点击支付 - 调用后端创建订单 - 后端调用微信支付下单接口 - 返回支付参数 - 前端用uni.requestPayment拉起收银台。独立开源版通常有“模拟支付”开关开发时可以用但上线前必须关闭。uni.requestPayment({ provider: wxpay, timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.package, signType: RSA, paySign: res.data.paySign, success: () { uni.showToast({ title: 支付成功 }) } })上面代码里的signType: RSA要和统一下单接口里使用的签名算法一致否则会一直弹“支付验证签名失败”。另外package是 JS 的保留字作为对象 key 没问题但建议先用const pack res.data.package解构避免部分代码压缩工具处理出错。支付结果不能只以前端回调为准。后端收到微信回调后会对参数做签名校验校验通过才把订单改成已支付。如果你发现“微信支付已扣款小程序订单还是待付款”大概率是回调地址没有设置为外网可访问的 HTTPS URL或者回调路径被 Nginx 重写规则拦截。排查时先看后端 access log 里有没有来自微信支付 IP 的请求没有就说明回调地址根本没通。4.3 uniapp 平台差异和 ES6 兼容的坑uniapp 编译到微信小程序时官方会自动处理大部分语法转换但 V1.1.41 的前端源码里仍可能残留旧的 promise 写法。开发时我在微信开发者工具里关闭“ES6 转 ES5”后出现regeneratorRuntime is not defined原因是代码里用了async/await而编译配置没有把 runtime 打进去。遇到这种问题可以在manifest.json的mp-weixin配置里打开“ES6 转 ES5”或者统一改用 promise 链。平台差异同样要关注。萤火商城前端源码使用uni.login获取 code在小程序端没问题但在 H5 端uni.login不存在需要改成微信网页授权。我的经验是给utils/auth.js做一个默认导出内部用条件编译处理export function login() { return new Promise((resolve, reject) { // #ifdef MP-WEIXIN uni.login({ provider: weixin, success: (res) resolve(res.code) }) // #endif // #ifdef H5 resolve(location.search.split(code)[1]) // #endif }) }条件编译会在打包前把不属于当前平台的代码直接删除所以能避免 H5 编译时执行到不存在的 API。商品 SKU 联动也一样小程序端可以用原生 picker 实现但选完规格后要自己组装skuKey不能依赖 HTML 的select。SKU 联动一旦挂掉常见现象是“切换规格后价格没变”或“库存判断失效”。排查顺序是先看规格维度数据是否回填再看选中项是否做了深拷贝避免 Vue 响应式系统检测不到变化。症状出现场合定位方向真机可用模拟器白屏微信基础库版本不同看 console 里的 API 兼容性警告支付成功但订单未更新回调地址不可达检查后端 access log 是否有微信 IPSKU 切换价格不变数据对象被直接修改确认提交参数时用的是深拷贝后的新对象5. 萤火商城小程序上线前的真机预览与版本迭代验证5.1 上线前逐项核对接口、域名和缓存真机预览能覆盖大部分模拟器看不见的问题。我的顺序是先打开“不校验合法域名”跑通从首页到支付的完整链路再关闭该选项逐项验证白名单。这个步骤建议在真机上做因为模拟器对 referer 校验和隐私弹窗的处理更宽松。核心核对项如下核对项一手信号失败时先看哪接口协议所有请求是 HTTPS证书未过期Nginx 证书链是否只配置了站点证书图片域名首页图片全部能打开COS 或 OSS 是否开启了防盗链登录态过期跳转登录页而不是弹错误框request.js里的 401 分支支付回调订单状态 30 秒内变已支付后端 access log 里是否有微信回调 IP隐私权限开发者工具提示“隐私接口未声明”小程序后台更新《用户隐私保护指引》隐私这一项不处理微信会在提交审核时直接驳回。回调地址没生效时最常见原因是回调 URL 带了/index.php这类伪静态后缀微信商户平台回调地址必须去掉它。5.2 用本地缓存回显加速萤火商城首页冷启动最后给一个对小程序商城体验提升明显的技巧首页完成首次请求后把数据缓存到本地冷启动时先回显缓存再用最新接口数据覆盖。代码很简单const CACHE_KEY HOME_CACHE_V1141 onLoad() { const cached uni.getStorageSync(CACHE_KEY) if (cached) { this.list cached } this.fetchHome() }缓存键带着版本号V1141发版后数据不冲突。fetchHome成功之后把this.list写入同键缓存。配合前面说的 loading 页冷启动时用户几乎感觉不到网络等待。下一次冷启动用户看到的是上一次的完整首页接口数据在后台无声刷新。这个技巧的价值就在于减少首屏网络往返同时给你的接口限流留出更多余量。本文还有配套的精品资源点击获取