shuhi-app/utils

扫描枪全局事件管理模块

本模块提供了一种全局管理扫描枪事件的解决方案，专为iData品牌PDA扫描设备设计，实现了以下功能：

1. 全局单一监听，多页面共享扫描结果
2. 一次扫描结果只执行当前页面的扫描回调，一次扫描结果只执行一次
3. 切换页面后，注册新页面的回调，解绑旧页面的回调
4. 不改动多页面的绑定方法
5. 回到当前页面时，只注册当前页面的回调，销毁其他的回调

使用方法

1. 初始化扫描模块

在应用启动时（如 App.vue 的 onLaunch 方法中）初始化扫描模块：

import { useInit } from '@/utils/useBarcodeModule.js';

// 在 App.vue 的 onLaunch 方法中
onLaunch(() => {
  useInit();
});

模块内部会自动调用 iData 扫描器的 initScan 方法并设置全局事件监听。

2. 在 App.vue 中添加页面切换处理

在 App.vue 的 onShow 方法中添加页面切换处理，确保在页面切换时更新活跃页面：

import { updateActivePageOnShow } from '@/utils/useBarcodeModule.js';

// 在 App.vue 的 onShow 方法中
onShow(() => {
  updateActivePageOnShow();
});

3. 在页面中注册扫描回调

在需要使用扫描枪的页面中，注册扫描回调函数：

import { registerScanCallback, reregisterOnShow } from '@/utils/useBarcodeModule.js';

// 存储取消注册函数的引用
let unregisterCallback = null;

// 扫描回调函数
const handleScan = (e) => {
  const scanData = e?.data?.barcode_string;
  if (scanData) {
    console.log("扫描结果:", scanData);
    // 处理扫描结果...
  }
};

onLoad(() => {
  // 在页面加载时注册回调
  unregisterCallback = registerScanCallback(getCurrentPages()[0].route, handleScan);
});

onShow(() => {
  // 在页面显示时重新注册回调，确保在页面返回时能够正确处理扫描结果
  if (unregisterCallback) {
    // 先取消之前的注册
    unregisterCallback();
  }
  // 重新注册回调
  unregisterCallback = reregisterOnShow(handleScan);
});

onUnload(() => {
  // 在页面卸载时取消注册
  if (unregisterCallback) {
    unregisterCallback();
    unregisterCallback = null;
  }
});

iData扫描器集成说明

本模块已经集成了iData品牌PDA扫描设备的API，主要包括：

1. 使用 iData-BarcodePlugin-BarcodeModule 插件初始化扫描功能
2. 监听 iDataBarcodeEvent 全局事件获取扫描结果
3. 自动处理扫描结果并分发给当前活跃页面

API 参考

useInit()

初始化扫描模块，应在应用启动时调用一次。内部会自动调用iData扫描器的initScan方法。

registerScanCallback(id, callback)

注册扫描回调函数。

• id: 回调函数的唯一标识符，通常是页面路径或组件 ID
• callback: 接收扫描结果的回调函数
• 返回值: 取消注册的函数

unregisterScanCallback(id)

取消注册扫描回调函数。

• id: 回调函数的唯一标识符

reregisterOnShow(callback)

在页面显示时重新注册回调，用于处理页面返回时的情况。

• callback: 接收扫描结果的回调函数
• 返回值: 取消注册的函数

resetScanState()

重置扫描状态，允许再次扫描相同的条码。

updateActivePageOnShow()

页面显示时调用，更新活跃页面ID并清除其他回调。应在 App.vue 的 onShow 方法中调用。

clearAllCallbacks()

清除所有注册的回调函数。

扫描结果处理

扫描结果对象的结构如下：

{
  data: {
    barcode_string: "扫描到的条码内容"
  }
}

示例

请参考 examples/ScanExample.vue 文件，了解如何在页面中使用扫描模块。

注意事项

1. 确保在 App.vue 的 onLaunch 方法中调用 useInit() 初始化扫描模块
2. 确保在 App.vue 的 onShow 方法中调用 updateActivePageOnShow() 更新活跃页面
3. 在页面的 onLoad 和 onShow 生命周期中注册回调，在 onUnload 生命周期中取消注册
4. 如果需要多次扫描相同的条码，请使用 resetScanState() 重置扫描状态