HarmonyOS 鸿蒙Next 自定义扫码组件

HarmonyOS 鸿蒙Next 自定义扫码组件

鸿蒙扫一扫组件（多码识别）

• 利用鸿蒙系统customScan能力，实现二维码识别
• 支持多码识别
• 支持选择图库扫码能力
• 支持开启关闭闪光灯
• 支持UI定制
• 手指撑开缩小控制镜头缩放倍数

使用示例

单码识别

• 导入

import { Scanner, ScannerController } from '[@coner](/user/coner)/Scanner';
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

• 使用

scannerController: ScannerController = new ScannerController()
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

Scanner({
  controller: this.scannerController,
  onScanResult: (code: ResultState, value: string) => {
    if (code == ResultState.Success) {
      promptAction.showToast({ message: value })
    }
  },
  onCameraReject: () => {
    promptAction.showToast({ message: '摄像头权限被拒绝' })
  }
}).layoutWeight(1)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

多码识别

• 导入

import { ProScanner, ProScannerController } from '[@ohos](/user/ohos)/Scanner'
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

• 使用

controller: ProScannerController = new ProScannerController()
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

ProScanner({
  controller: this.controller,
  onFindMultipleCode: (result: scanBarcode.ScanResult[]) => {
    promptAction.showToast({ message: '发现了' + result.length + '个二维码' })
  },
  onScanResult: (code: ResultState, value: string) => {
    if (code == ResultState.Success) {
      promptAction.showToast({ message: value })
    }
  }
})
  .layoutWeight(1)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

安装使用

ohpm i [@coner](/user/coner)/scanner
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

Scanner 属性

ScannerController控制器

使用方法

this.scannerController.scanUrl(url) // 扫码结果回调到Scanner组件的onScanResult回调方法
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

ProScanner 属性-多码识别

ProScannerController控制器

与ScannerController一致，此处省略

ScanUtil

• 在非扫码页面（未使用Scanner组件）时调用扫描网络图片、图片uri、图片PixelMap能力

使用方法

ScanUtil.scanUrl(url)
  .then((res) => {
    promptAction.showToast({ message: res })
  })
  .catch((err: string) => {
    promptAction.showToast({ message: '失败了：' + err })
  })
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

声明权限

entry module下的module.json5中新增如下配置

{
  "module": {
    // ...
    'requestPermissions': [
      {
        "name": "ohos.permission.INTERNET",
      },{
        "name": "ohos.permission.CAMERA",
        "reason": "$string:reasonRequestCamera",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      }
    ]
  }
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

单码识别自定义UI

Scanner({
  cornerLineShow: false, // 隐藏四个角
  scanLineShow: false, // 隐藏扫描线
  albumsShow: false, // 隐藏图库按钮和文字
  lightShow: false, // 隐藏闪光点按钮和文字
  tipsShow: false, // 隐藏提示词
  maskColor: Color.Transparent, // 蒙层透明
  onScanResult: (code: ResultState, value: string) => {
    if (code == ResultState.Success) {
      promptAction.showToast({ message: value })
    }
  },
  onCameraReject: () => {
    promptAction.showToast({ message: '摄像头权限被拒绝' })
  }
})
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

多码识别自定义UI

调整默认的多码标志点UI

ProScanner({
  pointViewSize: 40,
  pointViewColor: '#4AA4F9',
  pointViewBorderWidth: 3,
  pointIcon: $r('app.media.xxxxx'),
  pointIconSize: 26,
  pointViewBorderColor: Color.White,
  pointViewLeftOffset: 20,
  pointViewTopOffset: 20,
})
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

对默认样式不满意可以直接重写标志点UI

ProScanner({
  pointView: this.PointView()
})
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

[@Builder](/user/Builder)
PointView() {
  // 自定义UI样式
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>