You've already forked wxQrcodeScan
74 lines
2.0 KiB
Markdown
74 lines
2.0 KiB
Markdown
# 微信二维码扫描用户资料收集系统
|
|
|
|
基于 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 |