# pet-uniapp

**Repository Path**: MonkeyKingYY/pet-uniapp

## Basic Information

- **Project Name**: pet-uniapp
- **Description**: 基于 uni-app + Vue3 + TypeScript 开发宠物服务微信小程序，实现首页展示、商家服务、用户登录、购物车、订单管理等完整业务功能，熟练掌握跨端适配、组件化开发、Pinia 状态管理、条件编译等 uni-app 核心技术。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-23
- **Last Updated**: 2026-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Pet UniApp

宠物用品小程序，基于 uni-app 开发的移动端应用，支持微信小程序平台。

## 项目简介

Pet UniApp 是一款面向宠物行业的移动端小程序应用，提供宠物商品浏览、购物车管理、订单处理、宠物服务预约等功能。应用采用 Vue 3 + TypeScript 开发，使用 uni-app 框架实现跨平台小程序支持。

## 技术栈

- **前端框架**: Vue 3
- **开发语言**: TypeScript
- **小程序框架**: uni-app
- **状态管理**: Pinia
- **UI 组件库**: uview-plus + uni-ui
- **构建工具**: Vite

简历项目描述（精简版）
项目名称
宠物服务小程序（uni-app + 微信小程序）

技术栈关键词
uni-app Vue3 TypeScript Pinia SCSS uview-plus 高德地图API

核心能力体现
1. 跨端适配

使用条件编译（#ifdef MP-WEIXIN / #ifdef WEB）实现多端兼容
自定义导航栏适配不同平台胶囊按钮位置
2. 页面与路由

pages.json 配置 TabBar、页面路由、分包加载
预加载策略优化首屏加载速度
3. 组件化开发

Easycom 自动按需引入组件
封装通用请求方法、统一封装 UI 组件
4. 状态管理

Pinia 管理全局状态（如购物车、商品规格）
5. 核心 API 使用

uni.request 封装 HTTP 请求（请求拦截、响应拦截）
uni.getLocation + 高德地图逆地理编码实现定位
uni.getStorageSync 本地存储用户信息
微信登录（手机号一键授权、验证码登录）
6. 业务功能

轮播图、商品列表、分页加载（上拉触底）
商家详情、商品规格选择、地址管理
订单流程、购物车功能


## 项目结构

```
pet-uniapp/
├── pages/                    # 页面目录
│   ├── index/               # 首页
│   ├── cart/               # 购物车
│   ├── login/              # 登录页
│   ├── me/                 # 我的（个人中心）
│   ├── selected/           # 精选推荐
│   └── service/            # 宠物服务
├── packageA/               # 分包 A - 商品详情
│   └── product-detail/
├── packageB/               # 分包 B - 商家模块
│   ├── address/           # 地址管理
│   ├── merchant/          # 商家列表
│   ├── merchant-detail/   # 商家详情
│   └── order/              # 订单管理
├── components/             # 公共组件
│   └── products-spec-popup/# 商品规格弹窗
├── store/                  # Pinia 状态管理
│   └── spec.ts             # 商品规格状态
├── utils/                  # 工具函数
│   ├── getcode.ts         # 验证码获取
│   └── http/              # HTTP 请求封装
├── static/                 # 静态资源
│   ├── common/            # 公共图片
│   └── modules/           # 模块图片
├── uni_modules/            # uni-app 组件
│   ├── uni-icons/         # 图标组件
│   ├── uni-list/          # 列表组件
│   ├── uni-search-bar/    # 搜索栏组件
│   ├── uni-scss/          # SCSS 工具
│   └── uview-plus/        # UI 组件库
├── App.vue                 # 应用入口
├── main.js                 # 入口文件
├── manifest.json           # 应用配置
├── pages.json              # 页面配置
└── uni.scss               # 全局样式
```

## 功能列表

### 核心功能

- **商品浏览**: 首页展示宠物商品，支持分类查看
- **商品详情**: 查看商品详细信息、规格选择
- **购物车**: 添加商品到购物车、数量管理
- **订单管理**: 创建订单、查看订单列表
- **用户中心**: 登录注册、个人信息管理
- **地址管理**: 新增、编辑、删除收货地址
- **宠物服务**: 宠物美容、寄养等服务预约

### 页面说明

| 页面 | 路径 | 说明 |
|------|------|------|
| 首页 | `/pages/index/index` | 商品展示、分类导航 |
| 购物车 | `/pages/cart/cart` | 购物车商品管理 |
| 精选 | `/pages/selected/selected` | 精选商品推荐 |
| 服务 | `/pages/service/service` | 宠物服务预约 |
| 我的 | `/pages/me/me` | 个人中心 |
| 登录 | `/pages/login/login` | 用户登录 |
| 商品详情 | `/packageA/product-detail/product-detail` | 商品详细信息 |
| 订单 | `/packageB/order/order` | 订单列表 |
| 地址 | `/packageB/address/address` | 地址管理 |
| 商家 | `/packageB/merchant/merchant` | 商家列表 |

## 快速开始

### 环境要求

- Node.js >= 16.0
- npm >= 8.0

### 安装依赖

```bash
npm install
```

### 运行项目

```bash
# 运行到微信开发者工具
npm run dev:mp-weixin

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

### 构建项目

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

## 接口配置

项目中的 HTTP 请求封装位于 `utils/http/` 目录，默认配置了请求拦截器和响应拦截器。如需修改接口地址或配置，请参考对应配置文件进行修改。

## 注意事项

1. 本项目为 uni-app 小程序项目，需要使用对应的小程序开发工具进行预览
2. 开发时请确保已在微信开发者工具中开启 ES6 转 ES5 功能
3. 使用 uview-plus 组件库时，请确保已按官方文档进行配置

## 许可证

ISC License

## 贡献指南

欢迎提交 Issue 和 Pull Request 来完善项目。