更新记录

1.0（2025-10-15） 下载此版本

完整商城模板

平台兼容性

uni-app 商城模板

基于 uni-app 开发的纯前端商城模板，包含完整的商城功能和现代化UI设计。

功能特性

核心页面

• 首页 - 轮播图、分类导航、商品列表、搜索入口
• 分类 - 侧边栏分类菜单、商品筛选展示
• 购物车 - 商品管理、数量调整、全选结算
• 商品详情 - 图片轮播、详情展示、加购操作
• 搜索 - 商品搜索、历史记录、热门推荐
• 个人中心 - 用户信息、订单入口、功能导航
• 订单列表 - 状态筛选、订单管理
• 地址管理 - 收货地址增删改查
• 消息中心 - 分类消息、未读提醒

技术特性

• 自定义TabBar组件（支持购物车角标）
• 本地数据持久化（localStorage）
• 响应式布局设计
• 现代化渐变UI
• SVG图标支持

快速开始

环境要求

• HBuilderX 或 Vue CLI
• Node.js (可选)

运行项目

方式1：HBuilderX

1. 使用HBuilderX打开项目目录
2. 点击运行 → 运行到浏览器 → Chrome

方式2：命令行

npm install
npm run dev:h5

项目结构

shop/
├── pages/              页面文件
│   ├── index/         首页
│   ├── category/      分类
│   ├── cart/          购物车
│   ├── detail/        商品详情
│   ├── search/        搜索
│   ├── mine/          个人中心
│   ├── order/         订单列表
│   ├── address/       地址管理
│   └── message/       消息中心
├── components/         组件
│   ├── custom-tab-bar/  自定义TabBar
│   └── svg-icon/        SVG图标组件
├── utils/              工具函数
│   ├── data.js        模拟数据
│   ├── cart.js        购物车管理
│   └── message.js     消息管理
├── static/             静态资源
│   └── icons/         SVG图标
├── App.vue            应用配置
├── main.js            入口文件
├── pages.json         页面配置
└── manifest.json      应用配置

数据说明

模拟数据

项目使用本地模拟数据，存储在 utils/ 目录：

• data.js - 商品、分类、轮播图
• cart.js - 购物车管理
• message.js - 消息通知

数据持久化

使用 localStorage 存储：

• cart - 购物车数据
• messages - 消息数据
• searchHistory - 搜索历史

主题配置

颜色方案

主色：#FF6B6B (珊瑚红)
辅色：#FF8E53 (橙色)
背景：#F5F5F5 (浅灰)
文字：#333333 (深灰)
次要：#999999 (灰色)

自定义主题

修改 App.vue 中的全局样式变量即可应用新主题色。

功能说明

购物车

• 支持商品增删改
• 全选/单选功能
• 实时计算总价
• 本地持久化存储

消息中心

• 系统通知
• 订单消息
• 活动推送
• 未读角标提醒

自定义TabBar

• 使用emoji图标
• 购物车数量角标
• 自动适配安全区域

对接后端

API调用示例

// utils/data.js
export function getProducts() {
  return uni.request({
    url: 'https://api.example.com/products',
    method: 'GET'
  })
}

修改数据源

将 utils/ 中的函数替换为实际API调用即可。

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

多端支持

理论支持 uni-app 所有平台：

• H5
• 微信小程序
• 支付宝小程序
• App (Android/iOS)

实际运行时可能需要针对不同平台进行适配。

注意事项

1. 项目为纯前端模板，数据为模拟数据
2. 图片使用在线服务，实际使用需替换
3. 清除浏览器缓存会导致数据丢失
4. 部分功能为UI展示，需对接后端实现

开发建议

性能优化

• 图片懒加载
• 列表虚拟滚动
• 数据分页加载

安全建议

• 用户数据加密存储
• 敏感操作二次确认
• 接口请求签名验证

License

MIT

更新日志

v1.0.0

• 完整商城功能实现
• 自定义TabBar组件
• 消息通知系统
• 购物车功能
• 地址管理

欢迎提交Issue和PR改进项目