tj-ai-qrcode 1.0.0 → 1.0.2

package/README.md

@@ -14,14 +14,6 @@
 - **超时自动拍照**：支持设置超时时间，超时后自动拍照
 - **音频提示**：可配置识别过程中的音频提示
 
-### 1.3 应用场景
-- 商品防伪验证
-- 证件信息采集
-- 物流信息查询
-- 会员信息识别
-- 产品溯源管理
-- 特殊场景下的信息采集
-
 ## 2. 安装方法
 
 ### 2.1 npm安装
@@ -30,17 +22,9 @@ npm install tj-ai-qrcode
 ```
 
 ### 2.2 小程序引入
-在小程序项目的app.json中配置插件：
 
-```json
-{
-  "plugins": {
-    "tj-ai-qrcode": {
-      "version": "1.0.0",
-      "provider": "插件提供者appid"
-    }
-  }
-}
+```bash
+在微信开发者工具里面，点击工具构建npm
 ```
 
 ### 2.3 页面使用
@@ -49,7 +33,7 @@ npm install tj-ai-qrcode
 ```json
 {
   "usingComponents": {
-    "camera-take-photo": "tj-ai-qrcode/cameraTakePhoto"
+    "camera-take-photo": "tj-ai-qrcode/cameraTakePhoto/cameraTakePhoto"
   }
 }
 ```
@@ -116,17 +100,209 @@ Page({
 
 | 属性名 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| isPlayAudio | Boolean | false | 是否播放音频提示 |
-| playAudioURL | String | 内置URL | 音频播放地址 |
+| audioUrl | String | '' | 音频播放地址 |
+| autoPhoto | Boolean | true | 是否自动拍照 |
+| autoPhotoDelay | Number | 12 | 自动拍照延迟时间（秒） |
+| syncParse | Boolean | false | 是否同步解析二维码 |
+
+### 4.2 事件绑定
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| bind:finish | 解析完成时触发，包含解析值和大小图（如未解析到，自动拍照，则解析值为空） | `{code_data: String, photo_max_path: String, photo_min_path: String, maxZoom: Number}` |
+| bind:toast | 自定义提示toast信息时触发 | `{toast: String}` |
+| bind:progress | 进度条变化时触发 | `{progressNumber: Number}` |
+| bind:takeSmallPhoto | 小图拍照时触发 | `{path: String, base: String}` |
+| bind:takeBigPhoto | 大图拍照时触发 | `{path: String, base: String}` |
+
+### 4.3 插槽
+
+| 插槽名 | 说明 |
+| --- | --- |
+| toast | 自定义提示信息区域 |
+| focus-box | 自定义聚焦方框区域 |
+| text | 自定义文本提示区域 |
+| progress | 自定义进度条区域 |
+
+## 5. 高级使用示例
 
+### 5.1 完整配置示例
 
+```html
+<camera-take-photo 
+  audioUrl="https://ai.tj5.cc:35437/static/ai_audio/AI_Audio.mp3" 
+  autoPhoto="true" 
+  autoPhotoDelay="10" 
+  syncParse="false"
+  bind:finish="onQRCodeFinish"
+  bind:toast="onToast"
+  bind:progress="onProgress"
+  bind:takeSmallPhoto="onTakeSmallPhoto"
+  bind:takeBigPhoto="onTakeBigPhoto"
+>
+  <!-- 自定义提示信息 -->
+  <view slot="toast" class="custom-toast">
+    <text>请对准三维码</text>
+  </view>
+  
+  <!-- 自定义聚焦方框 -->
+  <view slot="focus-box" class="custom-focus-box">
+    <view class="corner top-left"></view>
+    <view class="corner top-right"></view>
+    <view class="corner bottom-left"></view>
+    <view class="corner bottom-right"></view>
+  </view>
+  
+  <!-- 自定义文本提示 -->
+  <view slot="text" class="custom-text">
+    <text>请将三维码置于框内</text>
+  </view>
+  
+  <!-- 自定义进度条 -->
+  <view slot="progress" class="custom-progress">
+    <progress percent="{{progress}}" stroke-width="8" color="#00ff00" />
+  </view>
+</camera-take-photo>
+```
+
+```javascript
+Page({
+  data: {
+    progress: 0
+  },
+  
+  /**
+   * 三维码识别完成回调
+   * @param {Object} e - 事件对象
+   */
+  onQRCodeFinish: function(e) {
+    const { code_data, photo_max_path, photo_min_path, maxZoom } = e.detail;
+    console.log('识别结果:', code_data);
+    console.log('小图路径:', photo_min_path);
+    console.log('大图路径:', photo_max_path);
+    console.log('放大倍数:', maxZoom);
+    
+    // 处理识别结果，例如上传服务器进行验证
+    this.uploadResult(photo_min_path, photo_max_path, code_data);
+  },
+  
+  /**
+   * 自定义提示信息回调
+   * @param {Object} e - 事件对象
+   */
+  onToast: function(e) {
+    console.log('提示信息:', e.detail.toast);
+  },
+  
+  /**
+   * 进度条变化回调
+   * @param {Object} e - 事件对象
+   */
+  onProgress: function(e) {
+    this.setData({
+      progress: e.detail.progressNumber
+    });
+    console.log('进度:', e.detail.progressNumber);
+  },
+  
+  /**
+   * 小图拍照回调
+   * @param {Object} e - 事件对象
+   */
+  onTakeSmallPhoto: function(e) {
+    console.log('小图拍照完成:', e.detail);
+  },
+  
+  /**
+   * 大图拍照回调
+   * @param {Object} e - 事件对象
+   */
+  onTakeBigPhoto: function(e) {
+    console.log('大图拍照完成:', e.detail);
+  },
+  
+  /**
+   * 上传识别结果到服务器
+   */
+  uploadResult: function(photo_min_path, photo_max_path, code_data) {
+    // 实现上传逻辑
+    wx.uploadFile({
+      url: 'https://your-server.com/api/upload',
+      success: function(res) {
+        console.log('上传成功:', res.data);
+      },
+      fail: function(err) {
+        console.error('上传失败:', err);
+      }
+    });
+  }
+});
+```
+
+### 5.2 同步解析模式示例
+
+```html
+<camera-take-photo 
+  syncParse="true"
+  bind:finish="onQRCodeFinish"
+>
+</camera-take-photo>
+```
+
+### 5.3 禁用自动拍照示例
+
+```html
+<camera-take-photo 
+  autoPhoto="false"
+  bind:finish="onQRCodeFinish"
+>
+</camera-take-photo>
+```
+
+## 6. 常见问题
+
+### 6.1 组件找不到的问题
+- **问题**：Component is not found in path "miniprogram_npm/tj-ai-qrcode/cameraTakePhoto/cameraTakePhoto"
+- **解决方案**：
+  1. 确保已正确安装 npm 包：`npm install tj-ai-qrcode`
+  2. 确保已在小程序中构建 npm：在微信开发者工具中，点击 "工具" -> "构建 npm"
+  3. 确保组件路径引用正确：`tj-ai-qrcode/cameraTakePhoto`
+
+### 6.2 权限问题
+- **问题**：相机权限被拒绝
+- **解决方案**：组件会自动引导用户打开相机权限，用户需要在设置中允许小程序访问相机
+
+### 6.3 识别失败问题
+- **问题**：三维码识别失败
+- **解决方案**：
+  1. 确保三维码清晰，无污渍、破损或折皱
+  2. 确保三维码在相机视野中，且占满屏幕
+  3. 确保光线充足，避免过度曝光或逆光
+
+## 7. 技术实现
+
+### 7.1 核心技术
+- **jsQR 库**：用于二维码识别，经过优化以提高识别速度和准确率
+- **微信小程序 Camera 组件**：用于获取视频流和拍照
+- **Canvas 绘制**：用于图像处理和保存
+
+### 7.2 识别流程
+1. 获取相机视频流
+2. 实时解析视频帧中的二维码
+3. 根据识别结果调整相机放大倍数
+4. 识别成功后自动拍照（大小两张）
+5. 触发回调事件，返回识别结果和照片路径
+
+## 8. 版本历史
+
+| 版本 | 日期 | 变更内容 |
+| --- | --- | --- |
+| 1.0.0 | 2026-01-01 | 初始版本 |
+| 1.0.2 | 2026-03-25 | 优化识别算法，增加多插槽支持 |
 
 ## 9. 技术支持
 
 如有问题或建议，欢迎联系我们：
 - 邮箱：yfx@china315net.com
-- 项目地址：https://github.com/your-repo/tj-ai-qrcode
-
----
 
 **版权所有 © 2026 天鉴三维码**