简介这是一套面向中小企业开发者与全栈工程师的开源多端电商系统聚焦移动电商快速落地场景提供微信/支付宝小程序、APP、公众号、H5、PC及抖音等10个终端的一体化解决方案。资源包共2000个文件主体为250个Vue页面组件uni-app前端、216个PHP后端逻辑文件ThinkPHP 5.1框架、449个JS交互脚本及418个PNG素材资源辅以CSS/WXSS样式、JSON配置与SQL数据库脚本完整覆盖前后端开发、UI适配与部署运维环节压缩包大小123.79MB。已有195人学习下载适合中高级前端与PHP开发者用于二次开发、多端发布实践或电商系统架构学习。用户可直接获取高可用后台管理模块、支持自由组合的促销引擎、跨平台渲染优化的uni-app简约模板以及含crontab定时任务、UEditor富文本、Layui组件等生产级功能的开箱即用代码体系。1. 小程序商城不是“一套代码跑五端”的幻觉而是多端协同的工程实践很多人看到“小程序商城开源电商系统含微信小程序、支付宝小程序、APP、公众号和H5端”第一反应是这不就是 uni-app 或 Taro 写一遍自动编译五端现实恰恰相反——真正能稳定支撑日均千单、支持营销活动、兼容各端支付与登录体系的开源商城从来不是靠“一次编写、到处运行”实现的而是靠分层架构 端适配抽象 统一后端服务落地的。它解决的不是“能不能跑”而是“微信小程序里用户点击立即下单不卡顿、支付宝小程序里优惠券实时核销、H5嵌入公众号时能正确获取用户openid、APP端离线缓存商品详情、公众号菜单跳转到对应商品页且保留UTM追踪”这一整套业务连续性问题。适合已有后端团队、需要快速搭建合规电商入口但拒绝黑盒SaaS绑定的中小技术团队也适合想深入理解多端协同边界、避免在uni-app条件编译里越陷越深的前端工程师。它不承诺零配置上线但承诺每条链路可查、每个端行为可控、每次升级有据可依。2. 构建统一能力底座后端服务必须剥离端逻辑只暴露标准API一个能同时喂饱微信小程序、支付宝小程序、H5、公众号和APP的商城其核心不在前端怎么写而在后端是否真正做到了“端无关”。常见误区是把登录态校验、支付回调、消息推送等逻辑硬编码进某个端的Controller里结果导致支付宝小程序调用不了微信支付接口H5嵌入公众号时拿不到unionidAPP更新版本后订单状态同步延迟。正确的做法是建立三层能力抽象身份层Identity、交易层Transaction、内容层Content全部通过RESTful API暴露且每个API明确标注支持的端类型与认证方式。2.1 身份层统一用户标识体系避免 openid / uid / account_id 混乱微信小程序用wx_login获取code换openid和unionid支付宝小程序用my.getAuthCode换auth_code再调支付宝OpenAPI取user_idH5在公众号内打开需静默获取openid独立访问则走手机号验证码登录。若后端直接存储各端原始ID后续做用户画像、订单归属、消息触达时必然崩盘。必须设计user_identity表CREATE TABLE user_identity ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL COMMENT 统一用户主键, platform ENUM(wechat, alipay, h5, app, mp) NOT NULL COMMENT 平台标识, external_id VARCHAR(64) NOT NULL COMMENT 各端原始ID如openid/user_id/phone_hash, bind_time DATETIME DEFAULT CURRENT_TIMESTAMP, is_primary TINYINT DEFAULT 0 COMMENT 是否为主身份1是, UNIQUE KEY uk_platform_ext (platform, external_id) );提示is_primary字段至关重要。当用户用微信小程序首次注册生成user_id1001并标记wechatopenid_xyz为 primary后续该用户用支付宝小程序登录后端查到alipayuser_abc未绑定就创建新user_id1002但若用户在H5端输入相同手机号完成实名则触发合并逻辑将user_id1002的所有订单、收藏、地址迁移至user_id1001并更新user_identity中对应记录的is_primary状态。此逻辑必须由后端统一实现前端只传platform和external_id。2.2 交易层支付网关必须解耦按平台路由而非硬编码微信小程序调用wx.requestPayment支付宝小程序调用my.tradePayH5调用支付宝网页支付或微信JSAPIAPP可能集成SDK直连。若后端支付Controller里写死if (platform wechat) { callWechatApi() } else if (platform alipay) { callAlipayApi() }不仅难以测试更无法应对微信支付V3升级或支付宝沙箱环境变更。应采用策略模式封装# payment/gateway/factory.py class PaymentGatewayFactory: staticmethod def get_gateway(platform: str, order_no: str) - BasePaymentGateway: if platform wechat: return WechatOfficialGateway(order_no) elif platform alipay: return AlipayOfficialGateway(order_no) elif platform h5: # H5场景需判断来源公众号内H5走JSAPI外部H5走Redirect referer request.headers.get(Referer, ) if mp.weixin.qq.com in referer: return WechatJSGateway(order_no) else: return AlipayWebGateway(order_no) else: raise ValueError(fUnsupported platform: {platform}) # payment/gateway/wechat.py class WechatJSGateway(BasePaymentGateway): def __init__(self, order_no: str): self.order_no order_no self.app_id current_app.config[WECHAT_JSAPP_ID] # 公众号JSAPI专用AppID self.mch_id current_app.config[WECHAT_MCH_ID] def generate_payment_params(self) - dict: # 调用微信统一下单API返回jsapi_parameters供前端调用wx.requestPayment # 注意此处必须使用公众号AppID而非小程序AppID return { appId: self.app_id, timeStamp: str(int(time.time())), nonceStr: generate_nonce_str(), package: fprepay_id{self.prepay_id}, signType: RSA, paySign: self._generate_sign() }2.2.1 关键参数表各端支付必需字段对照字段微信小程序公众号H5支付宝小程序APPAndroid/iOSH5外部appid小程序AppID公众号AppID支付宝AppID无SDK内置无跳转页携带mch_id微信商户号同上支付宝PID无无notify_url必须HTTPS且域名在微信后台白名单同上支付宝异步通知地址APP端无需由服务端接收同支付宝return_url不适用小程序内完成必填支付成功后跳转页不适用不适用必填同步返回页scene_info{payer_client_ip:127.0.0.1}需传{h5_info:{type:WAP,wap_url:https://xxx,wap_name:商城}}{pay_to_app:true}SDK自动填充同公众号H5注意notify_url是支付结果最终确认的唯一可信通道所有端必须指向同一后端地址且该地址必须校验签名、幂等处理、更新订单状态、触发发货通知。前端收到支付成功回调如wx.onPaymentSuccess仅作UI反馈不可作为订单完成依据。3. 端侧工程化uni-app 多端构建不是“写一次”而是“写五套适配逻辑”开源小程序商城常以 uni-app 为前端框架但这绝不意味着“一套代码五端通吃”。uni-app 的#ifdef条件编译只是起点真正的工程挑战在于如何让同一套业务逻辑在不同端呈现符合平台规范的交互、调用各自原生能力、规避审核雷区。例如微信小程序顶部导航栏高度为44px含状态栏而支付宝小程序为48pxH5嵌入公众号时需主动调用WeixinJSBridge获取定位但独立H5必须用navigator.geolocationAPP端需集成极光推送而小程序端用模板消息或订阅消息。3.1 导航与布局用 platform-config 驱动样式与组件不能在template里写view v-ifuni.getSystemInfoSync().platform ios而应提取平台配置到独立模块// utils/platform-config.js export const PLATFORM_CONFIG { wechat: { navHeight: 44, statusBarHeight: 20, safeAreaBottom: 34, useCustomNav: true, tabBar: { color: #7A7E83, selectedColor: #007AFF, backgroundColor: #ffffff, list: [ { pagePath: /pages/index/index, text: 首页, iconPath: /static/tabbar/home.png, selectedIconPath: /static/tabbar/home-active.png } ] } }, alipay: { navHeight: 48, statusBarHeight: 22, safeAreaBottom: 34, useCustomNav: false, // 支付宝原生导航栏更稳定 tabBar: { color: #999, selectedColor: #1677FF, backgroundColor: #F5F5F5, list: [/* 同上但图标尺寸需按支付宝规范 */] } }, h5: { navHeight: 0, // H5无原生导航栏 statusBarHeight: 0, safeAreaBottom: 0, useCustomNav: true, // H5 TabBar 用 div 实现需监听 hashchange } } // pages/index/index.vue template view :style{ height: ${navHeight}px } classcustom-nav view classnav-title{{ title }}/view /view /template script import { PLATFORM_CONFIG } from /utils/platform-config export default { data() { return { navHeight: PLATFORM_CONFIG[uni.getSystemInfoSync().platform]?.navHeight || 44, title: 首页 } } } /script3.2 原生能力调用封装 platform-api 层屏蔽底层差异微信小程序用wx.getLocation支付宝小程序用my.getLocationH5用navigator.geolocation.getCurrentPosition。若业务组件里直接调用会导致单元测试无法覆盖、端间逻辑割裂。应统一为platform-api/location.js// platform-api/location.js export async function getLocation(options {}) { const systemInfo uni.getSystemInfoSync() const platform systemInfo.platform try { if (platform ios || platform android) { // APP端调用 uni-app 原生插件或 plus.geolocation return await new Promise((resolve, reject) { uni.getLocation({ type: gcj02, success: resolve, fail: reject }) }) } else if (platform mp-weixin) { // 微信小程序需先调用 wx.authorize(scope.userLocation) await uni.authorize({ scope: scope.userLocation }) return await uni.getLocation({ type: wgs84 }) } else if (platform mp-alipay) { // 支付宝小程序my.getLocation 返回经纬度需转换为 gcj02 const res await my.getLocation({}) return { latitude: res.latitude, longitude: res.longitude, // 注意支付宝返回的是 wgs84需转 gcj02 才能和微信地图匹配 ...transformWGS84ToGCJ02(res.longitude, res.latitude) } } else if (platform h5) { // H5需判断是否在微信内置浏览器 const ua navigator.userAgent.toLowerCase() if (ua.includes(micromessenger)) { // 公众号H5调用 WeixinJSBridge return await new Promise((resolve, reject) { if (typeof WeixinJSBridge undefined) { document.addEventListener(WeixinJSBridgeReady, () { callWeixinBridge(resolve, reject) }, false) } else { callWeixinBridge(resolve, reject) } }) } else { // 普通H5用标准 API return await new Promise((resolve, reject) { navigator.geolocation.getCurrentPosition( pos resolve({ latitude: pos.coords.latitude, longitude: pos.coords.longitude }), err reject(err) ) }) } } } catch (err) { throw new Error([getLocation] ${platform} failed: ${err.message}) } } function callWeixinBridge(resolve, reject) { WeixinJSBridge.invoke(getNetworkType, {}, (res) { // 微信JSBridge不直接提供定位需引导用户点击“获取位置”按钮 // 实际项目中此处应弹出引导层或跳转到微信位置选择页 reject(new Error(WeixinJSBridge does not support direct location)) }) }3.2.1 多端调试技巧用 mock-data platform switch 快速验证开发阶段不可能同时真机调试五端。可在main.js注入全局 mock 开关// main.js const isMockMode process.env.NODE_ENV development window.location.hostname localhost if (isMockMode) { // 模拟不同平台行为 const mockPlatform localStorage.getItem(mock-platform) || wechat uni.getSystemInfoSync () ({ platform: mockPlatform, SDKVersion: 3.4.0, windowHeight: 600, windowWidth: 375 }) }然后在浏览器地址栏加?mock-platformalipay即可在Chrome里模拟支付宝小程序环境查看导航栏高度、TabBar样式、API调用路径是否正确。此法比反复真机预览高效十倍。4. H5深度集成公众号内嵌与独立访问的双模态处理H5端常被低估但它承担着“公众号流量承接”和“搜索引擎曝光”双重使命。开源商城若只把H5当作“小程序降级方案”必然在公众号内出现白屏、无法获取用户信息、分享卡片无标题等问题。关键在于区分公众号内H5和独立H5两种上下文并动态加载不同能力。4.1 上下文识别三重检测机制确保100%准确仅靠window.location.href.includes(mp.weixin.qq.com)不可靠URL可能被缩短。必须组合检测// utils/h5-context.js export function detectH5Context() { const ua navigator.userAgent.toLowerCase() const url window.location.href // 1. 微信内置浏览器特征 const isWechatBrowser /micromessenger/.test(ua) // 2. 公众号环境特征URL含 mp.weixin.qq.com 且存在 wxa_code 参数 const isOfficialAccount url.includes(mp.weixin.qq.com) (url.includes(wxa_code) || url.includes(fromsinglemessage)) // 3. JSBridge 可用性检测最权威 const hasWeixinJSBridge typeof WeixinJSBridge ! undefined || (window.WeixinJSBridge window.WeixinJSBridge.invoke) if (isWechatBrowser (isOfficialAccount || hasWeixinJSBridge)) { return official-account } else if (isWechatBrowser) { return wechat-h5 // 微信聊天窗口打开的H5 } else { return standalone-h5 // 独立访问 } } // main.js 中使用 const context detectH5Context() if (context official-account) { // 加载公众号专用SDKjweixin-1.6.0.js loadScript(https://res.wx.qq.com/open/js/jweixin-1.6.0.js).then(() { initWechatConfig() }) } else if (context standalone-h5) { // 加载地图SDK、支付SDK等 loadScript(https://unpkg.com/leaflet1.9.4/dist/leaflet.js) }4.2 公众号H5核心能力静默获取openid与自定义分享微信公众号H5必须拿到openid才能关联用户、查询订单、发送模板消息。不能依赖用户授权转化率暴跌而要用静默授权// api/wechat-auth.js export async function getOpenidFromOfficialAccount() { const code getQueryVariable(code) // URL中带的code if (code) { // 用code换openid后端API const res await uni.request({ url: /api/auth/wechat-official-code, method: POST, data: { code } }) return res.data.openid } else { // 无code跳转微信OAuth授权页scopesnsapi_base静默 const redirectUri encodeURIComponent(window.location.href) const appId your-official-account-appid window.location.href https://open.weixin.qq.com/connect/oauth2/authorize?appid${appId}redirect_uri${redirectUri}response_typecodescopesnsapi_basestateSTATE#wechat_redirect } } // 分享配置必须动态设置否则卡片无图无描述 export function setupWechatShare() { if (typeof WeixinJSBridge undefined) return const shareData { title: document.title || XX商城 - 好物尽在掌握, desc: 全场满199减30新人专享1元购, link: window.location.href, imgUrl: https://cdn.example.com/share-icon.png } WeixinJSBridge.on(menu:share:appmessage, function() { WeixinJSBridge.invoke(sendAppMessage, shareData) }) WeixinJSBridge.on(menu:share:timeline, function() { WeixinJSBridge.invoke(shareTimeline, shareData) }) }提示snsapi_base授权无需用户点击“允许”但只能获取openid若需nickname和headimgurl必须用snsapi_userinfo此时需弹窗授权。电商场景下静默授权 后端根据openid查询用户资料如有是平衡体验与功能的最佳实践。5. 构建与发布Docker化部署与多端CI/CD流水线设计开源商城.zip解压后往往包含server/、client/、docker-compose.yml等目录。但直接docker-compose up无法满足生产需求——微信小程序要求HTTPS、支付宝小程序要求域名备案、H5需CDN加速、APP需签名打包。必须设计分层CI/CD流水线。5.1 后端服务Docker镜像标准化与配置分离server/目录下通常为Spring Boot或Node.js项目。构建镜像时严禁将数据库密码、微信密钥写死在代码里# server/Dockerfile FROM openjdk:17-jdk-slim WORKDIR /app COPY target/*.jar app.jar # 配置文件挂载而非COPY进镜像 CMD [java, -Dspring.profiles.activeprod, -jar, app.jar]docker-compose.yml中通过 volume 挂载配置version: 3.8 services: app: image: my-shop-server:1.2.0 volumes: - ./config/application-prod.yml:/app/config/application-prod.yml - ./certs:/app/certs # SSL证书 environment: - SPRING_PROFILES_ACTIVEprod - WECHAT_APPID${WECHAT_APPID} - WECHAT_SECRET${WECHAT_SECRET}注意.env文件不应提交到GitCI流程中由Secret Manager注入环境变量。Kubernetes集群中则用Secret对象挂载。5.2 前端多端构建uni-app 的 CI 脚本必须分端触发uni-app 的npm run build:mp-weixin生成微信小程序包npm run build:mp-alipay生成支付宝包npm run build:h5生成H5静态文件。CI脚本需并行构建并归档# .github/workflows/build.yml name: Build Multi-Platform on: [push, pull_request] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - name: Setup Node.js uses: actions/setup-nodev3 with: node-version: 18 - name: Install dependencies run: npm ci - name: Build WeChat Mini Program run: npm run build:mp-wexin env: NODE_ENV: production - name: Upload WeChat Build Artifacts uses: actions/upload-artifactv3 with: name: wechat-miniprogram path: dist/build/mp-weixin/ - name: Build Alipay Mini Program run: npm run build:mp-alipay - name: Upload Alipay Artifacts uses: actions/upload-artifactv3 with: name: alipay-miniprogram path: dist/build/mp-alipay/ - name: Build H5 run: npm run build:h5 - name: Deploy H5 to CDN run: | cd dist/build/h5 aws s3 sync . s3://your-h5-bucket --delete5.3 APP端特殊处理签名与渠道包自动化uni-app 打包APP需*.jks签名文件和渠道配置。CI中应加密存储签名文件并用keytool验证# CI中验证签名有效性 keytool -list -v -keystore ./secrets/app-release.jks -alias my-key-alias -storepass $KEYSTORE_PASS # 然后执行打包 npm run build:app-plus -- --release --keystore./secrets/app-release.jks --keystorePass$KEYSTORE_PASS --aliasmy-key-alias --password$KEY_PASSWORD生成的apk文件需附加渠道标识如shop-wechat-release-1.2.0-oppo.apk便于数据统计。可用zip命令向APK注入渠道信息# 向APK添加渠道文件 echo oppo channel.txt zip -r your-app.apk channel.txt rm channel.txt最后一步将各端产物上传至对应平台微信小程序管理后台、支付宝开放平台、苹果App Store Connect、安卓应用市场、CDN服务商。整个流程必须可重复、可审计、失败自动告警——这才是开源商城真正落地的终点。本文还有配套的精品资源点击获取