Files
wxQrcodeScan/README.md
2025-11-28 21:24:28 +08:00

2.0 KiB

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

基于 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. 安装依赖

npm install

2. 开发模式

npm run dev

3. 构建部署

npm run build
npm run preview

📚 详细文档

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

🔗 相关链接

📄 许可证

MIT License