# cyys-vx

**Repository Path**: yixuangit/cyys-vx

## Basic Information

- **Project Name**: cyys-vx
- **Description**: 茶颜悦色微信小程序（毕业设计模仿并非真正商业项目）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2022-05-23
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cyys-vx

## 项目介绍

cyys-vx 是一个基于微信小程序的前端项目，主要用于实现一个包含地图功能的电商类应用。项目使用了 Vant Weapp 组件库来构建界面元素，并集成了腾讯地图 API 实现地理位置相关功能。

## 主要功能

1. 地图定位与搜索 (使用腾讯地图 API)
2. 商品展示与搜索
3. 用户登录与个人中心
4. 订单管理
5. 收藏功能
6. 商店导航

## 技术栈

- 微信小程序原生开发
- Vant Weapp 组件库
- 腾讯地图 API
- JavaScript
- WXML/WXSS

## 项目结构

```
├── components          # 自定义组件
│   ├── navbar          # 导航栏组件
│   └── search          # 搜索组件
├── lib                 # 第三方库
│   └── map             # 腾讯地图 SDK
├── miniprogram_npm     # npm 包
│   └── @vant/weapp     # Vant Weapp 组件库
├── mock.js             # 模拟数据
├── pages               # 页面目录
│   ├── MY              # 我的页面
│   ├── addAddress      # 添加地址页面
│   ├── addList         # 添加列表页面
│   ├── diandan         # 蛋蛋页面
│   ├── faq             # 常见问题页面
│   ├── index           # 首页
│   ├── login           # 登录页面
│   ├── loginbutton     # 登录按钮页面
│   ├── nuan            # 暖心页面
│   ├── order           # 订单页面
│   ├── search          # 搜索页面
│   ├── shopping        # 购物页面
│   └── theStore        # 商店页面
├── utils               # 工具函数
│   └── util.js         # 常用工具函数
├── app.js              # 小程序入口文件
├── app.json            # 小程序全局配置
├── app.wxss            # 全局样式
└── project.config.json # 项目配置
```

## 主要依赖

- [Vant Weapp](https://vant-contrib.gitee.io/vant-weapp/#/) - 微信小程序 UI 组件库
- [腾讯地图 API](https://lbs.qq.com/qqmap_wx_jssdk/qqmapwxjssdk.html) - 地图和位置服务

## 安装与运行

1. 安装微信开发者工具
2. 导入项目
3. 安装 npm 依赖: `npm install`
4. 编译组件: 在微信开发者工具中点击"工具" -> "构建 npm"
5. 运行项目

## 特色功能实现

1. **地图功能**: 使用 `lib/map/qqmap-wx-jssdk.js` 实现了地图定位、搜索、导航等功能
2. **组件化开发**: 通过自定义组件和 Vant 组件库实现了可复用的 UI 组件
3. **状态管理**: 使用小程序原生的数据绑定和事件系统实现页面间通信
4. **本地存储**: 使用小程序的 `wx.setStorageSync` 和 `wx.getStorageSync` 实现数据持久化

## 注意事项

1. 使用地图功能需要申请腾讯地图 API 密钥并配置在 `app.js` 中
2. 部分功能需要后端接口支持，当前使用 mock.js 提供模拟数据
3. 项目使用了小程序的自定义组件功能，需要注意组件引用方式

## 学习资源

- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [Vant Weapp 文档](https://vant-contrib.gitee.io/vant-weapp/#/)
- [腾讯地图微信小程序 SDK](https://lbs.qq.com/qqmap_wx_jssdk/qqmapwxjssdk.html)