美妆汇电商小程序

项目简介

这是一个美妆电商购物的微信小程序，采用 UniApp 框架开发，使用本地Mock数据模拟后端接口。项目完整实现了商品浏览、分类筛选、购物车管理、收藏管理、地址管理、订单支付等核心电商功能，适合作为微信小程序开发学习项目或计算机设计参考。

技术栈

技术	版本/说明
开发框架	UniApp (Vue3)
运行平台	微信小程序
开发语言	JavaScript (ES6+) / Vue3
样式语言	LESS
UI组件库	uni-ui (uni-icons, uni-number-box, uni-rate)
数据存储	本地Storage持久化
数据模拟	Mock Data (本地模拟数据)
开发工具	HBuilderX

项目特点

• 跨平台开发：基于UniApp框架，一套代码可编译到多个平台
• 纯前端实现：无需后端服务器，所有数据使用本地Mock模拟
• 完整电商流程：涵盖商品浏览、购物车、收藏、地址管理、订单支付等完整购物流程
• UI设计精美：界面风格时尚简约，粉色主题配色，符合美妆类应用调性
• 组件化开发：使用Vue组件化开发，代码结构清晰，易于维护

功能模块

1. 首页模块 (pages/index)

• 轮播图展示精选美妆产品
• 促销商品横向滚动展示
• 商品原价/促销价对比显示
• 最近评论展示（用户头像、昵称、肤质、评价内容）
• 商品评分展示
• 点击商品进入详情页

2. 分类模块 (pages/category)

• 左侧分类导航栏（口红、眉笔、粉底液、眼影等）
• 右侧分类商品列表
• 商品图片、名称、价格展示
• 支持分类切换筛选
• 点击进入商品详情

3. 商品详情模块 (pages/detail)

• 商品大图展示
• 商品名称、品牌、价格
• 商品规格选择
• 商品详细介绍
• 用户评价展示
• 加入购物车功能
• 立即购买功能
• 收藏/取消收藏功能

4. 购物车模块 (pages/cart)

• 购物车商品列表展示
• 按店铺分组显示商品
• 商品图片、名称、规格、价格
• 商品数量增减（uni-number-box组件）
• 单选/全选功能
• 合计金额实时计算
• 结算跳转支付页面
• 购物车管理（删除商品）

5. 收藏模块 (pages/like)

• 我的收藏商品列表
• 商品封面、名称、价格展示
• 点击进入商品详情
• 取消收藏功能

6. 支付模块 (pages/payment)

• 收货地址选择
• 订单商品信息展示
• 支付方式选择
• 订单金额明细
• 确认支付功能

7. 地址管理模块 (pages/address)

• 收货地址列表展示
• 默认地址标识
• 地址选择功能
• 新增地址入口
• 编辑地址功能
• 删除地址功能

8. 新增地址模块 (pages/addAddress)

• 收货人姓名输入
• 手机号码输入
• 省市区选择
• 详细地址输入
• 设为默认地址
• 保存地址功能

9. 我的模块 (pages/my)

• 用户头像、昵称、邮箱展示
• 订单状态Tab（待付款、待发货、待收货、待评价）
• 功能菜单入口（我的收藏、收货地址、设置、帮助中心等）
• 退出登录功能

项目结构

mini/
├── App.vue                   # 应用入口组件
├── main.js                   # 应用入口文件
├── manifest.json             # 应用配置文件
├── pages.json                # 页面路由配置
├── uni.scss                  # 全局样式变量
├── index.html                # H5入口文件
├── uni.promisify.adaptor.js  # Promise适配器
├── api/                      # API接口目录
│   └── index.js              # 接口封装
├── components/               # 自定义组件目录
│   ├── myMenu/               # 我的页面菜单组件
│   │   └── myMenu.vue
│   └── myTab/                # 我的页面Tab组件
│       └── myTab.vue
├── pages/                    # 页面目录
│   ├── index/                # 首页
│   │   └── index.vue
│   ├── category/             # 分类页
│   │   └── category.vue
│   ├── detail/               # 商品详情页
│   │   └── detail.vue
│   ├── cart/                 # 购物车页
│   │   └── cart.vue
│   ├── like/                 # 收藏页
│   │   └── like.vue
│   ├── payment/              # 支付页
│   │   └── payment.vue
│   ├── address/              # 地址列表页
│   │   └── address.vue
│   ├── addAddress/           # 新增地址页
│   │   └── addAddress.vue
│   └── my/                   # 我的页面
│       └── my.vue
├── static/                   # 静态资源目录
│   ├── home.png              # 首页图标
│   ├── home-on.png           # 首页选中图标
│   ├── category.png          # 分类图标
│   ├── category-on.png       # 分类选中图标
│   ├── cart.png              # 购物车图标
│   ├── cart-on.png           # 购物车选中图标
│   ├── my.png                # 我的图标
│   ├── my-on.png             # 我的选中图标
│   ├── like.png              # 收藏图标
│   ├── like-on.png           # 收藏选中图标
│   ├── banner01.png ~ banner05.png  # 轮播图
│   ├── goods02.jpg           # 商品图片
│   ├── kouhong01.jpg ~ kouhong03.jpg # 口红图片
│   ├── meibi01.jpg           # 眉笔图片
│   ├── fendi01.png ~ fendi06.jpg # 粉底液图片
│   ├── touxiang01.png ~ touxiang03.png # 用户头像
│   ├── user-photo.jpg        # 用户头像
│   ├── search.png            # 搜索图标
│   ├── share.png             # 分享图标
│   ├── aixin.png             # 爱心图标
│   ├── gou.png               # 勾选图标
│   ├── add.png               # 添加图标
│   ├── pen.png               # 编辑图标
│   ├── phone.png             # 电话图标
│   ├── kuaidi.png            # 快递图标
│   ├── pay01.png ~ pay03.png # 支付方式图标
│   └── menu.png ~ menu04.png # 分类菜单图标
├── uni_modules/              # uni-app模块目录
│   ├── uni-icons/            # 图标组件
│   ├── uni-number-box/       # 数字输入框组件
│   ├── uni-rate/             # 评分组件
│   └── uni-scss/             # 样式库
└── unpackage/                # 编译输出目录
    └── dist/                 # 编译后的文件

数据模型

轮播图数据 (banner)

{
  id: 1,                          // 轮播图ID
  img: '../../static/banner05.png' // 图片路径
}

促销商品数据 (proGoods)

{
  img: '../../static/goods02.jpg', // 商品图片
  storeName: '橘朵',               // 店铺名称
  intro: '橘朵灵光唇膏水光口红镜面保湿滋养唇蜜显白唇彩', // 商品介绍
  oriPrice: 69.8,                  // 原价
  prePrice: 49.8                   // 促销价
}

评论数据 (comment)

{
  img: '../../static/touxiang01.png', // 用户头像
  name: '小唯',                       // 用户昵称
  state: '油性、痤疮、毛孔粗大',      // 肤质描述
  goodsPic: '../../static/fendi01.png', // 商品图片
  remask: '质地很好，因为覆盖率是中等到高，我喜欢!!!' // 评价内容
}

购物车商品数据 (cartGoods)

{
  storeName: 'JUDYDOLL橘朵旗舰店',  // 店铺名称
  info: [{
    goodsimg: '../../static/goods02.jpg', // 商品图片
    intro: '橘朵水光唇膏口红显白保湿',    // 商品名称
    style: '#09 赤玉辉 HOT',              // 商品规格
    money: '69.8'                         // 商品价格
  }]
}

分类数据 (category)

{
  id: 1,                          // 分类ID
  name: '口红',                   // 分类名称
  icon: '../../static/menu.png'   // 分类图标
}

地址数据 (address)

{
  id: 1,                          // 地址ID
  name: '张三',                   // 收货人
  phone: '13800138000',           // 手机号
  province: '广东省',             // 省份
  city: '深圳市',                 // 城市
  district: '南山区',             // 区县
  detail: 'XX街道XX号',           // 详细地址
  isDefault: true                 // 是否默认地址
}

核心业务逻辑

1. 页面跳转

// 跳转到商品详情页
detailFn() {
  uni.navigateTo({
    url: '/pages/detail/detail'
  })
}

// 跳转到支付页面
goFn() {
  uni.redirectTo({
    url: '/pages/payment/payment'
  })
}

2. 购物车数量控制

<uni-number-box
  :value="1"
  :min="1"
  width="20"
  background="#f8f8f8"
  color="#000"
/>

3. 商品评分展示

<uni-rate :readonly="true" :value="4" size="18" active-color="#ecb7bb" />

页面路由配置

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "美妆汇" }
    },
    { "path": "pages/my/my", "style": { "navigationBarTitleText": "我的" } },
    {
      "path": "pages/cart/cart",
      "style": { "navigationBarTitleText": "购物车" }
    },
    {
      "path": "pages/category/category",
      "style": { "navigationBarTitleText": "分类" }
    },
    {
      "path": "pages/payment/payment",
      "style": { "navigationBarTitleText": "" }
    },
    {
      "path": "pages/detail/detail",
      "style": { "navigationBarTitleText": "" }
    },
    { "path": "pages/like/like", "style": { "navigationBarTitleText": "" } },
    {
      "path": "pages/address/address",
      "style": { "navigationBarTitleText": "" }
    },
    {
      "path": "pages/addAddress/addAddress",
      "style": { "navigationBarTitleText": "" }
    }
  ]
}

TabBar配置

{
  "tabBar": {
    "selectedColor": "#ecb7bb",
    "color": "#bfbfbf",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home-on.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "static/category.png",
        "selectedIconPath": "static/category-on.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "static/cart.png",
        "selectedIconPath": "static/cart-on.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my-on.png",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

• HBuilderX：建议使用最新稳定版
• 微信开发者工具：建议使用最新稳定版
• 基础库版本：2.19.0 及以上
• AppID：需替换为自己的AppID

快速开始

1. 克隆/下载项目

将项目文件夹下载到本地

2. 导入项目

1. 打开 HBuilderX
2. 选择"文件" -> "导入" -> "从本地目录导入"
3. 选择项目目录 mini
4. 点击"导入"

3. 运行项目

1. 在 HBuilderX 中打开项目
2. 点击"运行" -> "运行到小程序模拟器" -> "微信开发者工具"
3. 首次运行需要配置微信开发者工具路径
4. 在微信开发者工具中填入AppID

4. 真机调试

在微信开发者工具中点击"预览"按钮，扫码在手机上体验

预置测试数据

促销商品

商品名称	店铺	原价	促销价
橘朵灵光唇膏水光口红	橘朵	¥69.8	¥49.8
稚优泉极细眉笔	稚优泉	¥49.8	¥39.8
Colorkey珂拉琪水雾唇露	珂拉琪	¥125.0	¥79.8
彩棠TIMAGE持妆粉底液	珂拉琪	¥69.8	¥39.8

商品分类

分类名称
口红
眉笔
粉底液
眼影
腮红
护肤品

购物车商品

店铺	商品	规格	价格
JUDYDOLL橘朵旗舰店	橘朵水光唇膏口红显白保湿	#09 赤玉辉 HOT	¥69.8
JUDYDOLL橘朵旗舰店	橘朵精华保湿滋养唇蜜	W08 流心烤柿	¥59.8
Joocyee酵色旗舰店	酵色修容盘腮红高光一体	C02 冷调膨胀盘	¥99
Joocyee酵色旗舰店	酵色多用霜唇颊面多用唇泥	C06 肉桂茶	¥79.8

界面预览

项目包含演示视频文件 演示视频.mp4，可查看完整功能演示。

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 接入真实后端：将Mock数据替换为真实API接口
2. 用户登录系统：接入微信登录，实现真实用户体系
3. 在线支付：接入微信支付，实现真实支付流程
4. 商品搜索：实现商品关键词搜索功能
5. 订单管理：完善订单列表、订单详情、物流跟踪功能
6. 优惠券系统：添加优惠券领取和使用功能
7. 积分系统：用户购物获得积分，积分兑换商品
8. 商品评价：用户购买后可以评价商品
9. 客服系统：接入在线客服功能
10. 分享功能：支持分享商品到好友和朋友圈

注意事项

1. 本项目为学习演示项目，所有数据均为模拟数据
2. 支付功能为模拟实现，不涉及真实交易
3. 商品图片来源于网络，仅供学习使用
4. 如需发布上线，请替换为自己的AppID并完善相关资质
5. 项目基于UniApp开发，可编译到多个平台

许可证

本项目仅供学习交流使用，请勿用于商业用途。