# 微信二维码扫描用户资料收集系统

基于 Vue 3 + TypeScript + wxsdk-pure 开发的微信 H5 应用，实现扫描包含特定字符串的二维码并收集用户资料的功能。

## 🚀 功能特性

- ✅ **微信 JSSDK 集成**：基于 wxsdk-pure 实现微信 H5 能力
- ✅ **二维码扫描**：调用微信原生扫描功能  
- ✅ **字符串匹配**：检查扫描结果是否包含指定字符串
- ✅ **用户资料收集**：完整的表单验证和数据收集
- ✅ **现代化 UI**：渐变背景、毛玻璃效果、响应式设计
- ✅ **TypeScript 支持**：完整的类型定义

## 📁 项目结构

```
wxQrcodeScan/
├── src/
│   ├── components/
│   │   ├── QrcodeScanner.vue    # 二维码扫描组件
│   │   └── UserForm.vue         # 用户资料表单组件
│   ├── services/
│   │   └── wechatSdk.ts         # 微信 JSSDK 服务
│   ├── types/
│   │   └── wxsdk-pure.d.ts      # wxsdk-pure 类型声明
│   ├── App.vue                  # 主应用组件
│   └── main.ts                  # 应用入口
├── PROJECT_GUIDE.md             # 详细开发指南
└── README.md                    # 项目说明
```

## 🛠️ 技术栈

- **前端框架**: Vue 3.5.24
- **语言**: TypeScript
- **构建工具**: Vite 7.2.4
- **微信 SDK**: wxsdk-pure
- **样式**: CSS3 + 响应式设计

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 开发模式

```bash
npm run dev
```

### 3. 构建部署

```bash
npm run build
npm run preview
```

## 📚 详细文档

详见 [PROJECT_GUIDE.md](./PROJECT_GUIDE.md) 获取完整的开发指南、API 参考和故障排除。

## 🔗 相关链接

- [微信 JSSDK 官方文档](https://developers.weixin.qq.com/doc/subscription/guide/h5/jssdk.html)
- [wxsdk-pure npm 包](https://www.npmjs.com/package/wxsdk-pure)
- [Vue 3 官方文档](https://cn.vuejs.org/)
- [Vite 构建工具](https://vitejs.dev/)

## 📄 许可证

MIT License