cd987a4b82
Create portable QR scanning page module with: - WeChat native camera integration with overlay system - Animated QR targeting arcs and visual feedback - Torch/flash controls and camera setup - Inline modal system (verification, guide, service) - Return page navigation support via query parameter - Debug overlay and device detection - Complete asset bundle (arc.png, qrmarkers.png, buttons) Module can be integrated into other WeChat Mini Programs by copying pages/emblemscanner/ directory. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
129 lines
6.0 KiB
Markdown
129 lines
6.0 KiB
Markdown
# QR Scanner Module Development Progress
|
|
|
|
## Project Goal
|
|
|
|
Create a self-contained, portable QR scanning page module that can be easily integrated into other WeChat Mini Programs. The module should include all scanning functionality in a single directory and accept an entry query parameter to redirect to different pages upon successful scan and verification.
|
|
|
|
## Feature Checklist - Extracted from Existing Code
|
|
|
|
### ✅ Core QR Processing
|
|
- [ ] **WebAssembly QR Tool Integration** - `qrtool.wx.js` library for QR code processing (TODO: Add library)
|
|
- [ ] **Dual Processing Modes**:
|
|
- [ ] Worker-based processing (iPhone devices) - `worker/index.js` (TODO: Implement)
|
|
- [ ] Synchronous processing (Android devices) - `precheck.js` (TODO: Implement)
|
|
- [ ] **QR Pattern Validation** - Emblem-specific QR code pattern matching (TODO: Add validation)
|
|
- [ ] **Frame Pre-checking** - Validate QR frames before full processing (TODO: Implement)
|
|
- [ ] **Angle Detection** - QR code angle detection and correction (TODO: Implement)
|
|
|
|
### ✅ Camera System
|
|
- [x] **Native Camera Interface** - WeChat camera component integration ✅
|
|
- [ ] **Web-view Camera Fallback** - `pages/camwebview/` for problematic devices (TODO: Add fallback)
|
|
- [ ] **Device-specific Camera Rules** - API-driven zoom and camera settings per phone model (TODO: Implement API integration)
|
|
- [ ] **Dynamic Zoom Control** - Initial zoom + QR-found zoom adjustment (TODO: Implement)
|
|
- [x] **Torch/Flash Control** - Manual and automatic torch management ✅
|
|
- [ ] **Auto-torch Detection** - API-based torch recommendation system (TODO: Implement API integration)
|
|
|
|
### ✅ UI Components & Visual Feedback
|
|
- [x] **QR Targeting Overlay** - Animated corner arcs for QR positioning ✅
|
|
- [x] **Visual State Indicators** - Progress states (searching, found, verifying) ✅
|
|
- [x] **Hint Text System** - Dynamic user guidance messages ✅
|
|
- [x] **Debug Overlay** - Development/diagnostic information display ✅
|
|
- [x] **Modal System**: ✅
|
|
- [x] Verification spinner (`verifyspin`) ✅
|
|
- [x] Failed verification (`verifyfailed`) ✅
|
|
- [x] Scan guide tutorial (`scanguide`) ✅
|
|
- [x] Service modal (`servicemodal`) ✅
|
|
- [x] Tooltip component (`tooltip`) ✅
|
|
|
|
### ✅ API Integration & Data Flow
|
|
- [ ] **Image Upload System** - Multi-frame submission to backend
|
|
- [ ] **Verification Pipeline** - QR code verification with themblem.com API
|
|
- [ ] **Camera Rules API** - Device-specific camera configuration fetching
|
|
- [ ] **Auto-torch API** - Torch recommendation based on QR code
|
|
- [ ] **Event Tracking** - Frame upload and analytics events
|
|
- [ ] **Session Management** - Unique session ID generation and tracking
|
|
|
|
### ✅ Phone Model & Runtime Configuration
|
|
- [ ] **Device Detection** - Phone model identification and global data storage
|
|
- [ ] **Processing Mode Selection** - Worker vs synchronous based on device type
|
|
- [ ] **Camera Sensitivity Adjustment** - Device-specific camera sensitivity settings
|
|
- [ ] **Performance Optimization** - Frame upload throttling and batch processing
|
|
|
|
### ✅ Navigation & Integration
|
|
- [x] **Entry Point Configuration** - Support for return page query parameter ✅
|
|
- [x] **Return Page Routing** - Navigate to specified page after successful scan and verification ✅
|
|
|
|
### ✅ Error Handling & Recovery
|
|
- [ ] **Verification Failure Flow** - Retry and service contact options
|
|
- [ ] **Upload Failure Recovery** - Network error handling
|
|
- [ ] **Worker Failure Fallback** - Graceful degradation to sync mode
|
|
- [ ] **Camera Permission Handling** - User permission flow management
|
|
|
|
### ✅ Assets & Resources
|
|
- [ ] **Static Image Assets**:
|
|
- [ ] QR targeting arcs (`/static/arc.png`)
|
|
- [ ] QR positioning markers (`/static/qrmarkers.png`)
|
|
- [ ] UI action icons (`/assets/play-button.png`, `/assets/flash-button.png`)
|
|
- [ ] **WebAssembly Binary** - `qrtool.wx.js` QR processing library
|
|
- [ ] **Animation Assets** - Lottie animations for loading states
|
|
|
|
## Module Structure Design
|
|
|
|
```
|
|
/qr-scanner-module/
|
|
├── qr-scanner.js # Main page logic
|
|
├── qr-scanner.wxml # UI template
|
|
├── qr-scanner.wxss # Styling
|
|
├── qr-scanner.json # Page configuration
|
|
├── lib/
|
|
│ ├── qrtool.wx.js # WebAssembly QR library
|
|
│ ├── precheck.js # QR validation logic
|
|
│ ├── upload.js # API communication
|
|
│ └── utils.js # Utility functions
|
|
├── components/ # UI components
|
|
│ ├── tooltip/
|
|
│ ├── verifyspin/
|
|
│ ├── verifyfailed/
|
|
│ ├── scanguide/
|
|
│ └── servicemodal/
|
|
├── worker/
|
|
│ └── index.js # WebAssembly worker
|
|
└── assets/ # Static resources
|
|
├── images/
|
|
└── animations/
|
|
```
|
|
|
|
## Integration Requirements
|
|
|
|
### Required Query Parameters
|
|
- `return_page` - Target page to navigate to after successful verification
|
|
|
|
### Required Global Dependencies
|
|
- WeChat Mini Program camera API
|
|
- WebAssembly support
|
|
- Worker thread support (iOS)
|
|
- Canvas 2D context for image processing
|
|
|
|
### External API Dependencies
|
|
- `{server_url}/api/v1/camera-rules/` - Camera configuration
|
|
- `{server_url}/api/v1/check-auto-torch/` - Torch recommendations
|
|
- Verification endpoint for QR code validation
|
|
- Event tracking endpoints
|
|
|
|
## Success Criteria
|
|
|
|
1. **Self-contained Module** - All functionality within single directory
|
|
2. **Platform Portability** - Easy integration into other mini programs
|
|
3. **Device Compatibility** - Support for iOS/Android with appropriate fallbacks
|
|
4. **Performance Optimization** - Efficient WebAssembly + Worker threading
|
|
5. **Robust Error Handling** - Graceful failure modes and user feedback
|
|
6. **Configurable Integration** - Flexible redirect and mode parameters
|
|
7. **Asset Independence** - Bundled resources with minimal external dependencies
|
|
|
|
## Current Status: PLANNING PHASE ⏳
|
|
|
|
Next steps:
|
|
1. Create module directory structure
|
|
2. Extract and consolidate existing code
|
|
3. Implement portable integration interface
|
|
4. Test cross-platform compatibility |