微信小程序商城

基于uniapp和Vue3开发的微信小程序商城项目，使用uniCloud作为后端云服务。

项目特点

• 🚀 基于Vue3 Composition API开发
• 📱 支持微信小程序平台
• ☁️ 使用uniCloud云服务作为后端
• 🎨 现代化UI设计，用户体验优良
• 📦 完整的电商功能模块

功能模块

用户端功能

• 首页: 商品轮播、分类导航、热销商品展示
• 商品分类: 多级分类浏览、商品筛选
• 商品详情: 商品图片展示、规格选择、加入购物车
• 购物车: 商品管理、数量调整、结算
• 订单管理: 订单列表、订单详情、订单状态跟踪
• 用户中心: 个人信息、收货地址、优惠券等

后端功能

• 用户管理: 微信登录、用户信息管理
• 商品管理: 商品CRUD、分类管理
• 订单管理: 订单处理、状态更新
• 购物车: 购物车数据同步

技术栈

前端

• 框架: uniapp + Vue3
• 状态管理: Vue3 Composition API
• UI组件: uni-ui
• 构建工具: Vite

后端

• 云服务: uniCloud (阿里云版)
• 数据库: uniCloud DB
• 云函数: Node.js
• 身份认证: uni-id

项目结构

mini_shop/
├── pages/                  # 页面文件
│   ├── index/             # 首页
│   ├── category/          # 分类页
│   ├── cart/              # 购物车
│   ├── profile/           # 个人中心
│   ├── product/           # 商品详情
│   └── order/             # 订单相关
├── components/            # 组件
│   ├── ProductCard/       # 商品卡片
│   └── LoadingMore/       # 加载更多
├── utils/                 # 工具类
│   └── request.js         # 网络请求封装
├── cloudfunctions-aliyun/ # 云函数
│   ├── login/             # 登录
│   ├── product-list/      # 商品列表
│   └── cart-add/          # 添加购物车
├── static/                # 静态资源
├── uni_modules/           # uni模块
├── App.vue               # 应用入口
├── main.js               # 主入口文件
├── pages.json            # 页面配置
├── manifest.json         # 应用配置
└── package.json          # 依赖配置

开发环境搭建

前置要求

• Node.js 16+
• HBuilderX 或 Visual Studio Code
• 微信开发者工具

安装步骤

1. 克隆项目

git clone <项目地址>
cd mini_shop

2. 安装依赖

npm install

3. 配置云服务

• 在HBuilderX中创建uniCloud项目
• 配置云服务空间
• 上传云函数和数据库初始化数据

4. 配置小程序

• 在微信公众平台注册小程序
• 获取AppID并填入manifest.json
• 配置服务器域名

5. 运行项目

# 开发环境
npm run dev:mp-weixin

# 生产构建
npm run build:mp-weixin

云服务配置

1. 创建云服务空间

在uniCloud控制台创建阿里云服务空间

2. 配置uni-id

修改 cloudfunctions-aliyun/common/uni-config-center/uni-id/config.json:

{
  "passwordSecret": "your-password-secret",
  "tokenSecret": "your-token-secret",
  "app": {
    "oauth": {
      "weixin": {
        "appid": "your-weixin-appid",
        "appsecret": "your-weixin-appsecret"
      }
    }
  }
}

3. 初始化数据库

使用 uni_modules/uni-cloud-db-init/uniCloud/database/db_init.json 初始化数据库数据

4. 上传云函数

将 cloudfunctions-aliyun 目录下的云函数上传到云服务空间

部署说明

小程序发布

1. 在微信开发者工具中打开项目
2. 点击"上传"提交代码
3. 在微信公众平台提交审核
4. 审核通过后发布

云服务部署

1. 上传所有云函数到云服务空间
2. 初始化数据库数据
3. 配置云函数触发器和定时任务

主要功能说明

用户认证

• 使用微信授权登录
• uni-id管理用户身份
• JWT token验证

商品管理

• 支持多级分类
• 商品规格选择
• 库存管理

购物车

• 本地存储 + 云端同步
• 批量操作
• 实时价格计算

订单流程

• 创建订单
• 支付集成（需要配置支付接口）
• 订单状态跟踪

注意事项

1. AppID配置: 需要在manifest.json中配置正确的微信小程序AppID
2. 云服务: 需要开通uniCloud服务并配置相关参数
3. 图片资源: 示例中的图片路径需要替换为实际的图片资源
4. 支付功能: 需要接入微信支付或其他支付方式
5. 权限配置: 需要在小程序后台配置相应的接口权限

开发规范

• 使用Vue3 Composition API编写组件
• 遵循ESLint代码规范
• 组件命名使用PascalCase
• 文件命名使用kebab-case
• 提交代码前进行代码检查

技术支持

如有问题，请查看：

• uniapp官方文档
• uniCloud文档
• 微信小程序官方文档

许可证

MIT License