简介一套面向中小电商卖家或开发者的完整移动端商城系统源码基于经典的Nginx加PHP加MySQL服务器环境亲测可用覆盖网站配置、短信与支付对接、商品管理、工单处理、订单管理、分站与提现等核心业务模块并附有上手教程适合需要快速搭建或二次开发移动商城的用户。压缩包内共三百余个文件以PHP业务脚本、JS前端交互、CSS样式表和GIF演示图为主另含SQL数据库文件与伪静态配置目录结构清晰整包大小仅十余兆便于下载部署。目前已有两百余人学习下载对入行电商开发或运营自建商城具备实际参考价值。通过教程与完整源码用户可掌握从环境部署、后台配置到支付通知与售后流程的关键环节有效降低从零搭建移动商城的门槛。1. 把“全新完整版H5商城系统源码”先当黑盒处理“亲测”这两个字只能说明打包者在自己的环境里跑通过一次不代表你解压后双击就能看到商城界面。H5商城系统源码一般由三块组成前端工程、后端接口和数据库脚本教程的作用是把这三块黏起来。“完整版”的完整通常指页面模块不缺、支付流程有注释、数据库表结构能导入。作为接手源码的人第一件事不是去看商品页多漂亮而是确认技术栈、定位接口入口、把最小闭环跑通。这篇文章顺着这条路往下走先识别包内工程类型再配置运行环境跑通首屏后补齐微信公众号定位与授权最后摸到商品和支付的核心代码位置。读完你可以照着做一次“二次开发前的验收”判断这套H5商城源码到底值不值得继续投入。2. 解压H5商城系统源码后先用目录识别技术栈与依赖2.1 看根目录里的特征文件判断前端与后端分别用了什么H5商城源码不像普通静态网页那样打开index.html就能看它往往是一个需要编译的工程。解压后先别看业务代码先用命令行把目录结构拉出来找出几个关键特征文件再决定后面用什么工具跑。unzip H5_mall_full.zip -d ./h5shop cd ./h5shop find . -maxdepth 2 \( -name manifest.json -o -name package.json -o \ -name composer.json -o -name *.sql -o -name README* -o \ -name vite.config.js \) -print这段命令把深度控制在两层防止node_modules这类大目录干扰判断。manifest.json是 uni-app 项目的标志package.json说明是 npm 工程composer.json意味着后端是 PHP 且依赖 Composer 管理.sql是数据库初始化脚本。把这些文件全部找出来你就能在没看教程的情况下推断出源码的大致构成同时也可以评估随包说明文档是否齐全。拿到结构后我一般会把可能对应的技术栈和运行要求放到一张表里做对照确认自己本机还缺哪些运行环境。源码特征常见技术栈启动前需要准备manifest.jsonpages.jsonuni-app 框架HBuilderX 或 Node.js 环境package.json且 script 里有dev:h5Vue3 Vite或 Vue2 WebpackNode 16 以上composer.jsonthinkphp目录PHP 后端PHP 7.4/8.0 MySQL*.sql文件数据库MySQL 5.7/8.0README.md中写“先导入数据库”前后端分离架构先建库再连后端这里有个容易踩的坑有些 H5商城源码为了演示方便后端接口已经部署在某个公网域名上数据库脚本只是备用。你拿到手后如果直接跑前端页面能打开但商品列表全部报跨域或 404。此时不要急着改代码先看README.md或随包教程里有没有给出默认接口地址再决定是连远程接口还是本地重建后端。2.2 先把前端依赖装起来再处理后端与数据库确认技术栈之后前端依赖安装是最容易卡住的步骤。如果是 uni-app 项目但没有用 HBuilderX 的“运行到浏览器”按钮终端从package.json所在目录安装依赖并启动 H5 开发服务即可。node -v npm install --registryhttps://registry.npmmirror.com npm run dev:h5npm install指定--registry参数可以避免默认源下载过慢这在依赖数量多的商城项目里能节省不少时间。npm run dev:h5是拉取源码后最常用的启动指令但要注意有些项目把脚本命名为npm run serve或npm run dev如果启动报“missing script”打开package.json的scripts字段确认实际写法。后端部分常见做法是用 PHPStudy 或 Docker 跑 MySQL 和 PHP 服务把源码包中的server目录放进站点根目录导入.sql文件到本地数据库。导入时先看 SQL 文件头部有没有CREATE DATABASE如果有则直接导入如果没有需要手动建库并修改后端数据库连接配置。这里建议先完成前端依赖安装因为后端的 PHP 扩展版本问题通常是第二步才暴露。2.3 启动第一个页面时优先看浏览器 Console 而不是页面效果H5商城源码第一次启动经常出现两种假象一种是页面白屏但控制台没有报错另一种是页面有布局但接口区域空白。前者要检查manifest.json中h5.router.base是否设为/如果你用npm run dev:h5启动devServer 通常没有路径问题但如果是把编译后的dist包放到子目录路由基础路径必须同步修改否则加载不到 JS 文件。实在怀疑源码有隐藏问题可以在浏览器 Network 面板里看首屏请求了哪些 JS 和 CSS再搜索页面里第一个请求的 API 地址。这样能确定问题是出在“代码没编译成功”还是“接口没通”后面的排查方向就不会偏。3. H5商城系统源码最小启动路径先配接口再跑通首屏3.1 从源码里找到所有接口地址的定义位置对策是把“找不到接口地址”的工程问题拆开看。大多数 H5商城源码会有一个全局配置文件专门保存请求地址、图片地址和版本号。通过一行命令把所有可能出现基地址的文件全部找出来。grep -rn baseURL\|BASE_URL\|baseUrl\|apiUrl\|VITE_API_BASE --include*.js --include*.ts --include*.vue . | grep -v node_modules执行后你会看到几类结果config.js里写着baseURL.env.development里写着VITE_API_BASE 或者request.js封装里直接process.env.VUE_APP_BASE_URL。这些都指向同一个位置所有请求的公共前缀。改这一处全站接口都会跟着换而不是去每个页面里找几十个绝对路径。3.2 用配置文件把接口指向本地后端找到基地址后按前端构建方式不同修改的位置也不同。下面是一个典型config.js的修改方式。// src/config.js 或 utils/config.js export default { // 原来的远程接口地址可能已失效改为本机后端 baseURL: http://192.168.1.100:8080/api, // 修改后需要重启 dev:h5修改.env文件也需要重启 timeout: 10000 }注意这里的baseURL必须和后端路由前缀一致。如果后端接口入口本身是http://192.168.1.100:8080/index.php/api那baseURL就要写成完整路径而不是只到端口。修改完配置后建议关闭 dev 服务重新npm run dev:h5不要依赖热更新的.env重载避免接口地址没生效造成误判。还有一个实践细节本地联调时手机和电脑必须在同一个局域网。H5商城最终要放在微信里打开如果只在电脑浏览器里测试无法验证定位和微信授权。微信浏览器对局域网 IP 访问通常没有问题但你要保证电脑防火墙放行了端口否则手机会一直转圈加载失败。3.3 首屏请求失败的三个高频原因和处理表接口配置完成后浏览器的 Console 依然可能红字一片。针对 H5商城源码这类前后端分离项目我整理过一张排错优先级表按从高到低的顺序排查。现象直接原因处理方式HTML 文件被当作 JS 返回前端路由拦截了 API 请求或后端伪静态没设置浏览器打开接口地址看源码如果是 HTML 则检查后端 Nginx 配置接口请求 CORS 报错后端未允许跨域在入口文件加跨域头或使用 Web Server 反向代理请求返回 404/405基地址与实际路由不一致查看后端路由文件确认是否需要index.php/前缀白屏且 Console 无输出路由模式为 history刷新时找不到资源修改前端路由为 hash或配置 Nginxtry_files数据拿到但渲染为空字段名不匹配查看返回 JSON 字段名与商品页模板里引用的字段对比其中路由模式最值得注意。许多 H5商城源码为了兼容微信公众号默认启用 history 路由发布后必须配合服务端重写规则否则用户刷新当前页就 404。Nginx 配置写法如下location / { try_files $uri $uri/ /index.html; }这里try_files的含义是先按 URL 路径找真实文件找不到就把所有请求归到index.html由前端路由接管。这段配置对单页应用是标配对 H5商城源码来说少了它会导致商品详情页无法直接分享。4. H5商城在微信里的三个硬需求定位、授权与 webview 通信4.1 uniapp 开发 H5 嵌入微信公众号时获取定位不能在浏览器里直接调H5商城大多需要有收货地址或门店定位功能很多源代码里用的是uni.getLocation。这个 API 在 devtools 里没问题但部署到微信浏览器后必须借助微信 JS-SDK 的定位能力否则授权弹窗会在“允许”后依然 fail。原因是uni.getLocation在 H5 端走的是浏览器 Geolocation而 iOS 的 WKWebView 对定位权限策略收得很紧必须由微信 JS-SDK 提供身份签名浏览器才会放行。// #ifdef H5 uni.getLocation({ type: gcj02, success: (res) { console.log(经度, res.longitude, 纬度, res.latitude) this.latitude res.latitude this.longitude res.longitude }, fail: (err) { // 微信内定位失败常见于 JS-SDK 签名错误 console.error(定位失败, err) } }) // #endif代码里type: gcj02是必须要用的坐标类型微信定位返回的是国测局坐标和常见地图 API 能直接对接。失败时注意检查三个点公众号的 JS 安全域名是否覆盖当前页面域名、后端签名接口是否把URL参数原样上传、以及页面是否在微信客户端里访问。缺任何一项这个定位回调都会走进fail。4.2 uniapp H5 微信授权用 OAuth 而不是uni.loginH5商城源码里经常能看到uni.login的调用但它在 H5 端没有任何返回值。正确做法是跳转微信 OAuth 授权链接拿到code后再换取 openid。这里涉及一个容易混淆的概念小程序登录用的是uni.loginH5 微信内登录用的是网页授权两套接口完全不同。// 员工登录页的跳转逻辑 const appid wx1234567890abcdef const redirect_uri encodeURIComponent(window.location.href.split(#)[0]) const scope snsapi_userinfo // 或 snsapi_base只拿 openid 时用后者 window.location.href https://open.weixin.qq.com/connect/oauth2/authorize?appid appid redirect_uri redirect_uri response_typecodescope scope statemall_login#wechat_redirect这段代码中的state参数用于防 CSRF推荐在跳转前生成一个随机字符串并在回调时校验。snsapi_base是静默授权用户无感知但只能拿到 openidsnsapi_userinfo可以弹出授权框拿到头像昵称但需要服务号资质且用户手动同意。H5商城在做“一键登录”时通常先snsapi_base如果后端提示用户不存在再升级为snsapi_userinfo避免首次进入就弹授权框导致用户流失。code 换 openid 的操作必须在后端完成前端只负责把 code 交给后端接口。源码里如果看到前端直接请求 openid 的地址说明打包者处理得比较粗糙正式使用前要调整。4.3 App 内嵌 H5 页面与微信小程序 webview 的通信差异H5商城源码经常被二次封装成 App也经常被塞进微信小程序的web-view组件里。这两种场景的通信 API 正好走两条截然不同的路线。App 厂商自定义 webview 用的是postMessage小程序 webview 则是wx.miniProgram.postMessage而且后者消息只能在特定时机回传。// H5页面里兼容 App 与小程序 if (window.wx window.wx.miniProgram) { window.wx.miniProgram.postMessage({ data: { cartCount: 3 } }) } else if (window.parent) { window.parent.postMessage({ type: cartUpdate, value: 3 }, *) }解析这段兼容逻辑的作用window.wx.miniProgram存在说明当前容器是微信小程序 webview数据通过小程序侧绑定的bindmessage接收否则走标准 H5 postMessage 给 App 壳层。这里的*在生产环境建议改成 App 的 scheme 域名避免信息被无关页面监听。如果你拿到的 H5商城源码需要嵌进微信小程序还要额外处理顶部返回箭头样式。部分小程序 webview 会默认带一个返回按钮H5 页面内如果自己有头部导航两层返回叠加会显得很冗余。常见做法是在 H5 页面通过 UA 或wx.miniProgram存在性判断环境然后隐藏自己的导航栏只保留小程序原生返回。5. 改 H5商城业务代码的入手点商品、购物车到支付5.1 按路由路径快速定位商城的核心页面源码H5商城源码虽然有差异但页面结构基本遵循固定的划分方式。拿到源码后不要用编辑器全文件搜索中文关键词效率太低。第一件事是打开前端路由配置文件把页面路径和商城功能建立对应关系。路由/页面文件对应功能常见的可改点pages/index/index.vue商城首页轮播图数据源、金刚区入口pages/goods/list.vue商品列表筛选条件、排序字段pages/goods/detail.vue商品详情价格展示、SKU 选择pages/cart/cart.vue购物车失效商品判断逻辑pages/order/confirm.vue订单确认配送方式、优惠券计算pages/user/login.vue微信登录绑定手机号快速验证路由里如果有goods/detail这种命名直接根据文件名就能跳转过去。真正的二次开发多半是在这些页面里加入自己的后端字段比如商品详情页增加“划线价”展示时先去后端确认返回数据里有没有market_price再加到模板里而不是直接硬编码。改完页面后要确认pages.json注册了页面路径否则 uni-app 会直接无法跳转。5.2 购物车模块是典型的“本地缓存 服务端同步”双轨结构H5商城源码里的购物车常做成退出登录不清空这是因为源码默认把购物车数据存在uni.setStorageSync里。改这个模块时要注意商品数量加减只改本地缓存不会通知后端订单确认页读到的价格可能与商品详情页不一致。// 购物车添加商品的核心封装 function addToCart(goodsId, goodsNum 1) { const key cart_${this.userId} // 用户维度区分购物车 let cart uni.getStorageSync(key) || {} if (cart[goodsId]) { cart[goodsId].num goodsNum // 已存在则累加数量 } else { cart[goodsId] { num: goodsNum, checked: true } } uni.setStorageSync(key, cart) }这里把key拼上userId是很多源码很容易忽略的点不加用户 ID 会导致切换账号后购物车串数据。更稳的做法是同时把checked状态也存下来因为购物车的全选、单选逻辑需要这个字段刷新页面后才能保持勾选状态。至于同步服务端一般放在进入结算页时统一提交而不是每次点击加号都请求接口。5.3 支付链路H5商城支付其实是后端生成订单前端只负责调起支付是 H5商城源码里最容易出问题的模块。浏览器调起微信支付前前端必须拿到timeStamp、nonceStr、package和paySign四个参数这些参数由后端统一下单后返回。前端代码只负责把这些参数转交给微信 JSBridge。// 调起微信支付的兼容封装 function wxPay(params) { return new Promise((resolve, reject) { if (typeof WeixinJSBridge undefined) { // 微信内的老版本浏览需要等待bridge注入 document.addEventListener(WeixinJSBridgeReady, () executePay(params), false) } else { executePay(params) } }) } function executePay(params) { WeixinJSBridge.invoke(getBrandWCPayRequest, { appId: params.appId, timeStamp: String(params.timeStamp), // 必须是字符串 nonceStr: params.nonceStr, package: params.package, // 参数名就是 package signType: MD5, paySign: params.paySign }, (res) { if (res.err_msg get_brand_wcpay_request:ok) { // 前端以为支付成功最终以后端回调为准 } }) }这里有两个必须强调的错误点。timeStamp必须转成字符串部分安卓机型传数字会导致拉起支付失败WeixinJSBridge在页面刚加载时可能不存在需要等待WeixinJSBridgeReady事件。此外H5商城源码很容易把支付成功判断写成res.err_msg ok这是错误写法微信要求完整比较get_brand_wcpay_request:ok这个值。最后一个关键点是支付回调决定订单是否成功永远以后端收到微信支付通知为准前端跳转成功页只是用户体验层。6. 构建前自检H5商城上线前要做的验证项把 H5商城源码二开完成后最后一步是用生产模式构建并做一次冒烟测试。这里按照“本地构建 - 静态检查 - 微信环境验证”的顺序来收尾。先执行构建命令确认能正常产出静态文件npm run build:h5 ls -la ./dist/build/h5uni-app 项目的 H5 构建产物默认在dist/build/h5目录。检查目录里是否同时存在index.html和static文件夹别急着把这个目录直接扔到服务器先用本地静态服务器做最终验证。cd ./dist/build/h5 npx serve -s .用npx serve模拟静态托管环境能提前暴露两类问题刷新子页面后是否 404以及接口请求是否出现跨域。接着用下面这张清单逐项验收。检查项验证方法达标标准路由可刷新在/pages/goods/detail子页手动刷新页面不白屏接口跨域浏览器 Console 无 CORS 报错所有请求正常返回微信授权关闭浏览器清除缓存后重新进入能跳授权并回跳登录定位功能在微信内点击定位按钮弹窗允许后拿到经纬度支付流程下单并拉起支付但不真实付款支付面板正常出现页面分享分享到聊天后打开分享链接商品详情能正常加载服务端托管上线后还需要再用curl -I看一次首页响应头确认不是被框架拦截。分享链接打开时H5商城页面通过 JS-SDK 获取定位和用户信息前提前提是微信公众平台里的“JS 安全域名”已经加入当前域名。把这一步做完亲测才算真正完成。本文还有配套的精品资源点击获取
简介一套面向中小电商卖家或开发者的完整移动端商城系统源码基于经典的Nginx加PHP加MySQL服务器环境亲测可用覆盖网站配置、短信与支付对接、商品管理、工单处理、订单管理、分站与提现等核心业务模块并附有上手教程适合需要快速搭建或二次开发移动商城的用户。压缩包内共三百余个文件以PHP业务脚本、JS前端交互、CSS样式表和GIF演示图为主另含SQL数据库文件与伪静态配置目录结构清晰整包大小仅十余兆便于下载部署。目前已有两百余人学习下载对入行电商开发或运营自建商城具备实际参考价值。通过教程与完整源码用户可掌握从环境部署、后台配置到支付通知与售后流程的关键环节有效降低从零搭建移动商城的门槛。1. 把“全新完整版H5商城系统源码”先当黑盒处理“亲测”这两个字只能说明打包者在自己的环境里跑通过一次不代表你解压后双击就能看到商城界面。H5商城系统源码一般由三块组成前端工程、后端接口和数据库脚本教程的作用是把这三块黏起来。“完整版”的完整通常指页面模块不缺、支付流程有注释、数据库表结构能导入。作为接手源码的人第一件事不是去看商品页多漂亮而是确认技术栈、定位接口入口、把最小闭环跑通。这篇文章顺着这条路往下走先识别包内工程类型再配置运行环境跑通首屏后补齐微信公众号定位与授权最后摸到商品和支付的核心代码位置。读完你可以照着做一次“二次开发前的验收”判断这套H5商城源码到底值不值得继续投入。2. 解压H5商城系统源码后先用目录识别技术栈与依赖2.1 看根目录里的特征文件判断前端与后端分别用了什么H5商城源码不像普通静态网页那样打开index.html就能看它往往是一个需要编译的工程。解压后先别看业务代码先用命令行把目录结构拉出来找出几个关键特征文件再决定后面用什么工具跑。unzip H5_mall_full.zip -d ./h5shop cd ./h5shop find . -maxdepth 2 \( -name manifest.json -o -name package.json -o \ -name composer.json -o -name *.sql -o -name README* -o \ -name vite.config.js \) -print这段命令把深度控制在两层防止node_modules这类大目录干扰判断。manifest.json是 uni-app 项目的标志package.json说明是 npm 工程composer.json意味着后端是 PHP 且依赖 Composer 管理.sql是数据库初始化脚本。把这些文件全部找出来你就能在没看教程的情况下推断出源码的大致构成同时也可以评估随包说明文档是否齐全。拿到结构后我一般会把可能对应的技术栈和运行要求放到一张表里做对照确认自己本机还缺哪些运行环境。源码特征常见技术栈启动前需要准备manifest.jsonpages.jsonuni-app 框架HBuilderX 或 Node.js 环境package.json且 script 里有dev:h5Vue3 Vite或 Vue2 WebpackNode 16 以上composer.jsonthinkphp目录PHP 后端PHP 7.4/8.0 MySQL*.sql文件数据库MySQL 5.7/8.0README.md中写“先导入数据库”前后端分离架构先建库再连后端这里有个容易踩的坑有些 H5商城源码为了演示方便后端接口已经部署在某个公网域名上数据库脚本只是备用。你拿到手后如果直接跑前端页面能打开但商品列表全部报跨域或 404。此时不要急着改代码先看README.md或随包教程里有没有给出默认接口地址再决定是连远程接口还是本地重建后端。2.2 先把前端依赖装起来再处理后端与数据库确认技术栈之后前端依赖安装是最容易卡住的步骤。如果是 uni-app 项目但没有用 HBuilderX 的“运行到浏览器”按钮终端从package.json所在目录安装依赖并启动 H5 开发服务即可。node -v npm install --registryhttps://registry.npmmirror.com npm run dev:h5npm install指定--registry参数可以避免默认源下载过慢这在依赖数量多的商城项目里能节省不少时间。npm run dev:h5是拉取源码后最常用的启动指令但要注意有些项目把脚本命名为npm run serve或npm run dev如果启动报“missing script”打开package.json的scripts字段确认实际写法。后端部分常见做法是用 PHPStudy 或 Docker 跑 MySQL 和 PHP 服务把源码包中的server目录放进站点根目录导入.sql文件到本地数据库。导入时先看 SQL 文件头部有没有CREATE DATABASE如果有则直接导入如果没有需要手动建库并修改后端数据库连接配置。这里建议先完成前端依赖安装因为后端的 PHP 扩展版本问题通常是第二步才暴露。2.3 启动第一个页面时优先看浏览器 Console 而不是页面效果H5商城源码第一次启动经常出现两种假象一种是页面白屏但控制台没有报错另一种是页面有布局但接口区域空白。前者要检查manifest.json中h5.router.base是否设为/如果你用npm run dev:h5启动devServer 通常没有路径问题但如果是把编译后的dist包放到子目录路由基础路径必须同步修改否则加载不到 JS 文件。实在怀疑源码有隐藏问题可以在浏览器 Network 面板里看首屏请求了哪些 JS 和 CSS再搜索页面里第一个请求的 API 地址。这样能确定问题是出在“代码没编译成功”还是“接口没通”后面的排查方向就不会偏。3. H5商城系统源码最小启动路径先配接口再跑通首屏3.1 从源码里找到所有接口地址的定义位置对策是把“找不到接口地址”的工程问题拆开看。大多数 H5商城源码会有一个全局配置文件专门保存请求地址、图片地址和版本号。通过一行命令把所有可能出现基地址的文件全部找出来。grep -rn baseURL\|BASE_URL\|baseUrl\|apiUrl\|VITE_API_BASE --include*.js --include*.ts --include*.vue . | grep -v node_modules执行后你会看到几类结果config.js里写着baseURL.env.development里写着VITE_API_BASE 或者request.js封装里直接process.env.VUE_APP_BASE_URL。这些都指向同一个位置所有请求的公共前缀。改这一处全站接口都会跟着换而不是去每个页面里找几十个绝对路径。3.2 用配置文件把接口指向本地后端找到基地址后按前端构建方式不同修改的位置也不同。下面是一个典型config.js的修改方式。// src/config.js 或 utils/config.js export default { // 原来的远程接口地址可能已失效改为本机后端 baseURL: http://192.168.1.100:8080/api, // 修改后需要重启 dev:h5修改.env文件也需要重启 timeout: 10000 }注意这里的baseURL必须和后端路由前缀一致。如果后端接口入口本身是http://192.168.1.100:8080/index.php/api那baseURL就要写成完整路径而不是只到端口。修改完配置后建议关闭 dev 服务重新npm run dev:h5不要依赖热更新的.env重载避免接口地址没生效造成误判。还有一个实践细节本地联调时手机和电脑必须在同一个局域网。H5商城最终要放在微信里打开如果只在电脑浏览器里测试无法验证定位和微信授权。微信浏览器对局域网 IP 访问通常没有问题但你要保证电脑防火墙放行了端口否则手机会一直转圈加载失败。3.3 首屏请求失败的三个高频原因和处理表接口配置完成后浏览器的 Console 依然可能红字一片。针对 H5商城源码这类前后端分离项目我整理过一张排错优先级表按从高到低的顺序排查。现象直接原因处理方式HTML 文件被当作 JS 返回前端路由拦截了 API 请求或后端伪静态没设置浏览器打开接口地址看源码如果是 HTML 则检查后端 Nginx 配置接口请求 CORS 报错后端未允许跨域在入口文件加跨域头或使用 Web Server 反向代理请求返回 404/405基地址与实际路由不一致查看后端路由文件确认是否需要index.php/前缀白屏且 Console 无输出路由模式为 history刷新时找不到资源修改前端路由为 hash或配置 Nginxtry_files数据拿到但渲染为空字段名不匹配查看返回 JSON 字段名与商品页模板里引用的字段对比其中路由模式最值得注意。许多 H5商城源码为了兼容微信公众号默认启用 history 路由发布后必须配合服务端重写规则否则用户刷新当前页就 404。Nginx 配置写法如下location / { try_files $uri $uri/ /index.html; }这里try_files的含义是先按 URL 路径找真实文件找不到就把所有请求归到index.html由前端路由接管。这段配置对单页应用是标配对 H5商城源码来说少了它会导致商品详情页无法直接分享。4. H5商城在微信里的三个硬需求定位、授权与 webview 通信4.1 uniapp 开发 H5 嵌入微信公众号时获取定位不能在浏览器里直接调H5商城大多需要有收货地址或门店定位功能很多源代码里用的是uni.getLocation。这个 API 在 devtools 里没问题但部署到微信浏览器后必须借助微信 JS-SDK 的定位能力否则授权弹窗会在“允许”后依然 fail。原因是uni.getLocation在 H5 端走的是浏览器 Geolocation而 iOS 的 WKWebView 对定位权限策略收得很紧必须由微信 JS-SDK 提供身份签名浏览器才会放行。// #ifdef H5 uni.getLocation({ type: gcj02, success: (res) { console.log(经度, res.longitude, 纬度, res.latitude) this.latitude res.latitude this.longitude res.longitude }, fail: (err) { // 微信内定位失败常见于 JS-SDK 签名错误 console.error(定位失败, err) } }) // #endif代码里type: gcj02是必须要用的坐标类型微信定位返回的是国测局坐标和常见地图 API 能直接对接。失败时注意检查三个点公众号的 JS 安全域名是否覆盖当前页面域名、后端签名接口是否把URL参数原样上传、以及页面是否在微信客户端里访问。缺任何一项这个定位回调都会走进fail。4.2 uniapp H5 微信授权用 OAuth 而不是uni.loginH5商城源码里经常能看到uni.login的调用但它在 H5 端没有任何返回值。正确做法是跳转微信 OAuth 授权链接拿到code后再换取 openid。这里涉及一个容易混淆的概念小程序登录用的是uni.loginH5 微信内登录用的是网页授权两套接口完全不同。// 员工登录页的跳转逻辑 const appid wx1234567890abcdef const redirect_uri encodeURIComponent(window.location.href.split(#)[0]) const scope snsapi_userinfo // 或 snsapi_base只拿 openid 时用后者 window.location.href https://open.weixin.qq.com/connect/oauth2/authorize?appid appid redirect_uri redirect_uri response_typecodescope scope statemall_login#wechat_redirect这段代码中的state参数用于防 CSRF推荐在跳转前生成一个随机字符串并在回调时校验。snsapi_base是静默授权用户无感知但只能拿到 openidsnsapi_userinfo可以弹出授权框拿到头像昵称但需要服务号资质且用户手动同意。H5商城在做“一键登录”时通常先snsapi_base如果后端提示用户不存在再升级为snsapi_userinfo避免首次进入就弹授权框导致用户流失。code 换 openid 的操作必须在后端完成前端只负责把 code 交给后端接口。源码里如果看到前端直接请求 openid 的地址说明打包者处理得比较粗糙正式使用前要调整。4.3 App 内嵌 H5 页面与微信小程序 webview 的通信差异H5商城源码经常被二次封装成 App也经常被塞进微信小程序的web-view组件里。这两种场景的通信 API 正好走两条截然不同的路线。App 厂商自定义 webview 用的是postMessage小程序 webview 则是wx.miniProgram.postMessage而且后者消息只能在特定时机回传。// H5页面里兼容 App 与小程序 if (window.wx window.wx.miniProgram) { window.wx.miniProgram.postMessage({ data: { cartCount: 3 } }) } else if (window.parent) { window.parent.postMessage({ type: cartUpdate, value: 3 }, *) }解析这段兼容逻辑的作用window.wx.miniProgram存在说明当前容器是微信小程序 webview数据通过小程序侧绑定的bindmessage接收否则走标准 H5 postMessage 给 App 壳层。这里的*在生产环境建议改成 App 的 scheme 域名避免信息被无关页面监听。如果你拿到的 H5商城源码需要嵌进微信小程序还要额外处理顶部返回箭头样式。部分小程序 webview 会默认带一个返回按钮H5 页面内如果自己有头部导航两层返回叠加会显得很冗余。常见做法是在 H5 页面通过 UA 或wx.miniProgram存在性判断环境然后隐藏自己的导航栏只保留小程序原生返回。5. 改 H5商城业务代码的入手点商品、购物车到支付5.1 按路由路径快速定位商城的核心页面源码H5商城源码虽然有差异但页面结构基本遵循固定的划分方式。拿到源码后不要用编辑器全文件搜索中文关键词效率太低。第一件事是打开前端路由配置文件把页面路径和商城功能建立对应关系。路由/页面文件对应功能常见的可改点pages/index/index.vue商城首页轮播图数据源、金刚区入口pages/goods/list.vue商品列表筛选条件、排序字段pages/goods/detail.vue商品详情价格展示、SKU 选择pages/cart/cart.vue购物车失效商品判断逻辑pages/order/confirm.vue订单确认配送方式、优惠券计算pages/user/login.vue微信登录绑定手机号快速验证路由里如果有goods/detail这种命名直接根据文件名就能跳转过去。真正的二次开发多半是在这些页面里加入自己的后端字段比如商品详情页增加“划线价”展示时先去后端确认返回数据里有没有market_price再加到模板里而不是直接硬编码。改完页面后要确认pages.json注册了页面路径否则 uni-app 会直接无法跳转。5.2 购物车模块是典型的“本地缓存 服务端同步”双轨结构H5商城源码里的购物车常做成退出登录不清空这是因为源码默认把购物车数据存在uni.setStorageSync里。改这个模块时要注意商品数量加减只改本地缓存不会通知后端订单确认页读到的价格可能与商品详情页不一致。// 购物车添加商品的核心封装 function addToCart(goodsId, goodsNum 1) { const key cart_${this.userId} // 用户维度区分购物车 let cart uni.getStorageSync(key) || {} if (cart[goodsId]) { cart[goodsId].num goodsNum // 已存在则累加数量 } else { cart[goodsId] { num: goodsNum, checked: true } } uni.setStorageSync(key, cart) }这里把key拼上userId是很多源码很容易忽略的点不加用户 ID 会导致切换账号后购物车串数据。更稳的做法是同时把checked状态也存下来因为购物车的全选、单选逻辑需要这个字段刷新页面后才能保持勾选状态。至于同步服务端一般放在进入结算页时统一提交而不是每次点击加号都请求接口。5.3 支付链路H5商城支付其实是后端生成订单前端只负责调起支付是 H5商城源码里最容易出问题的模块。浏览器调起微信支付前前端必须拿到timeStamp、nonceStr、package和paySign四个参数这些参数由后端统一下单后返回。前端代码只负责把这些参数转交给微信 JSBridge。// 调起微信支付的兼容封装 function wxPay(params) { return new Promise((resolve, reject) { if (typeof WeixinJSBridge undefined) { // 微信内的老版本浏览需要等待bridge注入 document.addEventListener(WeixinJSBridgeReady, () executePay(params), false) } else { executePay(params) } }) } function executePay(params) { WeixinJSBridge.invoke(getBrandWCPayRequest, { appId: params.appId, timeStamp: String(params.timeStamp), // 必须是字符串 nonceStr: params.nonceStr, package: params.package, // 参数名就是 package signType: MD5, paySign: params.paySign }, (res) { if (res.err_msg get_brand_wcpay_request:ok) { // 前端以为支付成功最终以后端回调为准 } }) }这里有两个必须强调的错误点。timeStamp必须转成字符串部分安卓机型传数字会导致拉起支付失败WeixinJSBridge在页面刚加载时可能不存在需要等待WeixinJSBridgeReady事件。此外H5商城源码很容易把支付成功判断写成res.err_msg ok这是错误写法微信要求完整比较get_brand_wcpay_request:ok这个值。最后一个关键点是支付回调决定订单是否成功永远以后端收到微信支付通知为准前端跳转成功页只是用户体验层。6. 构建前自检H5商城上线前要做的验证项把 H5商城源码二开完成后最后一步是用生产模式构建并做一次冒烟测试。这里按照“本地构建 - 静态检查 - 微信环境验证”的顺序来收尾。先执行构建命令确认能正常产出静态文件npm run build:h5 ls -la ./dist/build/h5uni-app 项目的 H5 构建产物默认在dist/build/h5目录。检查目录里是否同时存在index.html和static文件夹别急着把这个目录直接扔到服务器先用本地静态服务器做最终验证。cd ./dist/build/h5 npx serve -s .用npx serve模拟静态托管环境能提前暴露两类问题刷新子页面后是否 404以及接口请求是否出现跨域。接着用下面这张清单逐项验收。检查项验证方法达标标准路由可刷新在/pages/goods/detail子页手动刷新页面不白屏接口跨域浏览器 Console 无 CORS 报错所有请求正常返回微信授权关闭浏览器清除缓存后重新进入能跳授权并回跳登录定位功能在微信内点击定位按钮弹窗允许后拿到经纬度支付流程下单并拉起支付但不真实付款支付面板正常出现页面分享分享到聊天后打开分享链接商品详情能正常加载服务端托管上线后还需要再用curl -I看一次首页响应头确认不是被框架拦截。分享链接打开时H5商城页面通过 JS-SDK 获取定位和用户信息前提前提是微信公众平台里的“JS 安全域名”已经加入当前域名。把这一步做完亲测才算真正完成。本文还有配套的精品资源点击获取
