🔥商城小程序系统源码 ｜H5+微信+抖音三端打通 🆕｜源码开源 🔓

　　bash
　　商城后端/
　　├──app/应用核心
　　│├──controllers/控制器层
　　│├──models/数据模型
　　│├──routes/路由定义
　　│└──services/业务逻辑层
　　├──config/配置文件
　　├──middleware/中间件
　　├──utils/工具函数
　　└──server.js服务入口

　　javascript
　　//商品数据模型（MongoDB）
　　{
　　_id:ObjectId,
　　title:String,//商品标题
　　description:String,//描述
　　price:{//价格体系
　　original:Number,//原价
　　current:Number,//现价
　　discount:Number//折扣率
　　},
　　specs:[//规格属性（支持多端差异化）
　　{
　　name:"颜色",
　　values:["红色","蓝色","黑色"],
　　miniProgram:{icon:true},//小程序端显示图标
　　h5:{colorPicker:true}//H5端显示颜色选择器
　　}
　　],
　　images:[String],//图片URL
　　crossPlatform:{//三端特有配置
　　wechat:{shareTitle:String},
　　douyin:{hotTag:Boolean},
　　h5:{pcLayout:Object}
　　}
　　}

　　javascript
　　//购物车同步核心代码
　　class CartService{
　　//初始化WebSocket连接
　　initWebSocket(){
　　if(this.ws)return;
　　this.ws=new WebSocket(`ws://${API_HOST}/cart/sync`);
　　this.ws.onmessage=(e)=>{
　　const data=JSON.parse(e.data);
　　if(data.type==='update'){
　　this.updateLocalCart(data.cart);
　　}
　　};
　　}
　　//省略添加商品、删除商品等方法...
　　}

　vue
　　<!-商品卡片组件（支持三端自定义）-->
　　<template>
　　<view class="product-card">
　　<!-图片展示抖音端显示热门标签-->
　　<view class="img-container">
　　<image:src="product.images[0]"mode="aspectFill"></image>
　　<view v-if="isDouyin&&product.crossPlatform.douyin.hotTag"class="douyin-tag">热门</view>
　　<view v-if="isWechat&&product.soldOut"class="wechat-tag">售罄</view>
　　</view>
　　<!-价格区域H5端显示促销动画-->
　　<view class="price-area">
　　<text class="price">¥{{product.price.current}}</text>
　　<text v-if="isH5&&product.discount>0"class="discount-animate">
　　立减¥{{product.price.original product.price.current}}
　　</text>
　　</view>
　　<!-规格选择小程序端使用弹窗，H5端使用下拉-->
　　<view class="spec-area"click="showSpecModal">
　　<text>选择规格</text>
　　<text v-if="selectedSpecs"class="selected-spec">{{selectedSpecs}}</text>
　　</view>
　　</view>
　　</template>
　　<script>
　　export default{
　　data(){
　　return{
　　selectedSpecs:''
　　};
　　},
　　computed:{
　　//自动识别当前端类型
　　isWechat(){
　　return process.env.NODE_ENV==='wechat';
　　},
　　isDouyin(){
　　return process.env.NODE_ENV==='douyin';
　　},
　　isH5(){
　　return process.env.NODE_ENV==='h5';
　　}
　　},
　　//省略方法实现...
　　}
　　</script>　

　　javascript
　　//支付服务核心代码（uniapp）
　　class PaymentService{
　　constructor(){
　　this.gateway={
　　wechat:null,
　　douyin:null,
　　h5:null
　　};
　　this.initGateway();
　　}
　　initGateway(){
　　if(uni.getSystemInfoSync().platform==='wechat'){
　　this.gateway.wechat=require('/utils/wechat-payment');
　　}else if(uni.getSystemInfoSync().platform==='toutiao'){
　　this.gateway.douyin=require('/utils/douyin-payment');
　　}else{
　　this.gateway.h5=require('/utils/h5-payment');
　　}
　　}
　　//统一支付接口
　　async pay(orderId){
　　const order=await this.getOrderInfo(orderId);
　　let payResult;
　　if(this.gateway.wechat){
　　payResult=await this.gateway.wechat.pay(order);
　　}else if(this.gateway.douyin){
　　payResult=await this.gateway.douyin.pay(order);
　　}else{
　　payResult=await this.gateway.h5.pay(order);
　　}
　　return payResult;
　　}
　　}

　　javascript
　　{
　　_id:ObjectId,
　　name:String,//优惠券名称
　　type:"discount"|"full减",//类型
　　value:Number,//面值
　　minAmount:Number,//满减门槛
　　validPeriod:{//有效期
　　start:Date,
　　end:Date
　　},
　　distribution:{//发放策略
　　wechat:{
　　templateId:String,//微信模板消息ID
　　maxPerUser:3//每人限领3张
　　},
　　douyin:{
　　videoTrigger:Boolean,//短视频触发发放
　　shareRequired:2//需分享2次
　　}
　　}
　　}

　　javascript
　　//生命周期统一处理
　　class AppLifeCycle{
　　constructor(){
　　this.initWechatLifeCycle();
　　this.initDouyinLifeCycle();
　　this.initH5LifeCycle();
　　}
　　initWechatLifeCycle(){
　　if(process.env.NODE_ENV==='wechat'){
　　App({
　　onLaunch:()=>{
　　this.commonOnLaunch();
　　//微信特有逻辑
　　this.wechatOnLaunch();
　　},
　　//省略其他生命周期...
　　});
　　}
　　}
　　initDouyinLifeCycle(){
　　if(process.env.NODE_ENV==='douyin'){
　　tt.app({
　　onLaunch:()=>{
　　this.commonOnLaunch();
　　//抖音特有逻辑
　　this.douyinOnLaunch();
　　},
　　//省略其他生命周期...
　　});
　　}
　　}
　　//公共生命周期逻辑
　　commonOnLaunch(){
　　//三端共用逻辑
　　this.checkLoginStatus();
　　this.syncUserInfo();
　　}
　　}

　　bash
　　商城小程序源码/
　　├──backend/后端源码
　　│├──...
　　├──frontend/前端源码
　　│├──h5/H5端
　　│├──wechat/微信小程序
　　│├──douyin/抖音小程序
　　│└──common/三端公共代码
　　│├──components/公共组件
　　│├──utils/工具函数
　　│├──services/服务层
　　│└──stores/状态管理
　　├──docs/文档
　　├──config/配置文件
　　├──.gitignore忽略文件
　　├──package.json依赖管理
　　└──LICENSE开源协议（MIT）

　　mermaid
　　graph TD
　　A[Fork仓库]-->B[创建功能分支]
　　B-->C[开发并测试]
　　C-->D[提交Pull Request]
　　D-->E[维护者审核]
　　E-->F[合并到主分支]
　　5.2.2版本迭代计划
　　v1.0：基础商城功能（商品展示、购物车、支付）
　　v1.1：营销系统（优惠券、秒杀）
　　v1.2：多商户入驻功能
　　v1.3：AI推荐系统集成