# uniapp_shop

**Repository Path**: kejunliang/uniapp_shop

## Basic Information

- **Project Name**: uniapp_shop
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-27
- **Last Updated**: 2026-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# uni-app 商城项目

一个基于 uni-app 框架开发的跨平台商城应用，支持编译到 iOS、Android、H5 以及各种小程序平台。

## 项目简介

这是一个功能完整的商城应用，包含商品列表、详情页、购物车、用户中心等核心模块。项目采用 Vue.js 开发，使用 Vuex 进行状态管理，uni-app 框架实现跨平台编译。

## 技术栈

- **前端框架**: uni-app (Vue 2.x)
- **状态管理**: Vuex
- **网络请求**: 原生 uni.request
- **样式预处理**: SCSS

## 项目结构

```
├── pages/                    # 页面组件
│   ├── index/              # 首页
│   ├── list/               # 商品列表页
│   ├── detail/             # 商品详情页
│   ├── cart/               # 购物车页面
│   └── user/               # 用户中心页面
├── static/                  # 静态资源
│   ├── logo.png           # 应用 Logo
│   ├── home.png           # 首页图标
│   ├── home-active.png    # 首页激活图标
│   ├── list.png           # 列表图标
│   ├── list-active.png    # 列表激活图标
│   ├── cart.png           # 购物车图标
│   ├── cart-active.png    # 购物车激活图标
│   ├── user.png           # 用户图标
│   └── user-active.png    # 用户激活图标
├── store/                   # Vuex 状态管理
│   └── cart.js            # 购物车状态管理
├── utils/                   # 工具函数
│   └── request.js         # 网络请求封装
├── App.vue                  # 根组件
├── main.js                  # 入口文件
├── pages.json               # 页面路由配置
├── manifest.json            # 应用配置文件
├── uni.scss                 # uni-app 全局样式变量
└── index.html               # HTML 模板
```

## 页面说明

| 页面 | 路径 | 功能描述 |
|------|------|----------|
| 首页 | `pages/index/index.vue` | 展示推荐商品、轮播图等 |
| 商品列表 | `pages/list/list.vue` | 商品分类列表、搜索筛选 |
| 商品详情 | `pages/detail/detail.vue` | 商品详细信息展示 |
| 购物车 | `pages/cart/cart.vue` | 购物车商品管理 |
| 用户中心 | `pages/user/user.vue` | 用户信息、订单管理等 |

## 功能特性

- ✅ 商品浏览与搜索
- ✅ 商品详情查看
- ✅ 购物车管理
- ✅ 用户中心
- ✅ 跨平台编译支持

## 开始使用

### 安装依赖

```bash
npm install
```

### 运行项目

```bash
# 运行到 H5
npm run dev:h5

# 运行到微信小程序
npm run dev:mp-weixin

# 运行到 App
npm run dev:app
```

### 构建项目

```bash
# 构建 H5
npm run build:h5

# 构建微信小程序
npm run build:mp-weixin

# 构建 App
npm run build:app
```

## 注意事项

1. 请确保已安装 HBuilderX 或 Node.js 环境
2. 开发微信小程序需要配置微信开发者工具
3. 根据需要修改 `utils/request.js` 中的 `baseUrl` 配置

## 许可证

本项目仅供学习交流使用。