单商户H5商城搭建：UNIAPP+小程序源码开源

以下是基于UniApp框架的单商户H5商城+小程序全栈搭建指南，包含核心技术实现和商业级优化方案：

一、基础架构设计

1. 技术栈组合

• 前端：UniApp（Vue3+TS）+ uView UI
• 后端：Node.js（NestJS）/PHP（ThinkPHP6）
• 数据库：MySQL 8.0+Redis 7
• 实时通信：WebSocket/Socket.IO

2. 项目初始化

# 创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-mall
# 安装uView UI
npm install uview-ui@2.0.34

二、核心功能模块实现

1. 商品系统

<!-- 商品SKU选择器组件示例 -->
<template>
  <u-sku 
    v-model="showSku" 
    :sku="skuData" 
    @add-cart="handleAddCart"
  ></u-sku>
</template>

<script setup>
const skuData = {
  tree: [
    {
      k: '颜色', 
      v: [
        {id: 1, name: '红色'},
        {id: 2, name: '蓝色'}
      ]
    }
  ],
  stock_num: 100 // 总库存
}
</script>

2. 支付闭环方案

// 微信支付封装（支持H5+小程序）
const wxPay = (orderNo) => {
  uni.requestPayment({
    provider: 'wxpay',
    orderInfo: await getPaymentParams(orderNo), // 后端生成支付参数
    success: () => updateOrderStatus(orderNo, 'paid')
  })
}

三、性能优化专项

1. 首屏加速方案

• 分包加载配置（manifest.json）：

"optimization": {
  "subPackages": true,
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

2. 图片优化策略

<!-- 智能图片组件 -->
<template>
  <u-image 
    :src="imgUrl" 
    mode="aspectFill"
    webp="true"
    :lazy-load="true"
    @error="handleImageError"
  ></u-image>
</template>

四、多端适配方案

1. 环境判断逻辑

const platform = {
  isH5: uni.getSystemInfoSync().platform === 'h5',
  isMP: !!uni.getSystemInfoSync().SDKVersion
}

// 路由跳转适配
function navTo(url) {
  if(platform.isMP) {
    uni.navigateTo({ url })
  } else {
    window.location.href = url
  }
}

2. 小程序特有配置

// app.js 注册微信支付
App({
  onLaunch() {
    wx.request({
      url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
      method: 'POST'
    })
  }
})

五、开源项目二次开发建议

1. 安全加固措施

• 接口签名验证：

// 请求拦截器示例
uni.addInterceptor('request', {
  invoke(args) {
    args.url = signRequest(args.url) // 添加签名参数
  }
})

2. 后台管理系统对接

graph LR
  A[UniApp客户端] -->|API| B[NestJS服务]
  B --> C[(MySQL)]
  B --> D[(Redis)]
  E[Vue3管理后台] --> B

六、部署上线流程

1. 多平台发布

# 编译H5
npm run build:h5
# 小程序编译
npm run build:mp-weixin

2. CI/CD配置示例（GitHub Actions）

name: Deploy
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build:h5
      - uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./dist/build/h5

七、商业扩展建议

1. 增值功能模块

• 分销系统：

  // 佣金计算逻辑
  calcCommission(price) {
    return price * this.userLevel.rate
  }
  

• 直播带货：接入腾讯云直播SDK

2. 数据分析体系

• 用户行为埋点：

uni.reportEvent('商品浏览', {
  item_id: '123',
  duration: 15
})

常见问题解决方案：

1. 跨域问题：配置nginx反向代理

location /api/ {
  proxy_pass http://backend:3000;
  add_header Access-Control-Allow-Origin *;
}

2. 微信登录失败：检查开放平台应用关联状态

项目维护建议：

• 使用lerna管理多包依赖
• 建立error-boundary全局错误捕获
• 小程序定期清理无用图片（通过CI自动化）

注：实际开发时应根据业务需求调整架构，推荐使用uniCloud简化后端开发。对于高并发场景建议引入Elasticsearch优化商品搜索。