animate-QRScan

animate-QRScan 华为扫码

介绍

本组件封装了 QRScan 模块,QRScan 封装了华为统一扫码服务(HUAWEI Scan Kit) 。便捷的条形码和二维码扫描、解析、生成能力,帮助您快速构建应用内的扫码功能。支持扫描13种全球主流的码制式。如果您的应用只处理部分特定的码制式,您也可以在接口中指定制式以便加快扫码速度。已支持的码制式: 一维码:EAN-8、EAN-13、UPC-A、UPC-E、Codabar、Code 39、Code 93、Code 128、ITF 二维码:QR Code、Data Matrix、PDF417、Aztec

将模块封装成组件,便于开发者使用,有助于理解模块和组件的关系。小巧玲珑、短小精悍、简单好用,非常方便集成。可轻松集成扫码功能到自己的App。

使用方法

import "../components/animate-QRScan/animate-QRScan.stml"

代码示例

<animate-QRScan   
  :marginB="34"  
  scanLineColor="#ff0000"  
  maskColor="rgba(0,0,0,0.5)" 
  tipString="放入框内,即可自动扫描"
  ref={this.QRScanRef}
  :navigationAndStatusBarHeight='navigationAndStatusBarHeight'
  @eventCallback="eventCallback"> 
</animate-QRScan>

API

props 属性

参数 说明 类型 默认值
marginB 手电筒按钮到底边距离 Number -
scanLineColor 扫描线颜色 String -
maskColor 遮罩层颜色 String -
tipString 扫描框提示文字 String -
navigationAndStatusBarHeight 状态栏和导航栏总高度 Number -

注意需要传入 ref={this.QRScanRef} 实现隐式 ref,详情参考demo。需要传入状态栏和导航栏总高度

events 事件

事件名 说明 回调参数
recognitionImage 识别图片的回调 e.detail(识别结果)
scan 摄像头扫码识别的回调 e.detail(识别结果)
close 关闭扫码模块的回调 -
torchOn 手电筒打开的回调 -
torchOff 手电筒关闭的回调 -

methods 方法

scanPicture

识别图片

scanPicture()

params

参数 说明 类型 默认值
图片路径 本地图片路径 String -

switchLight

切换手电筒开关

switchLight()

params

showScanner

显示已隐藏的扫码界面

showScanner()

params

hideScanner

隐藏扫码界面

hideScanner()

params

closeScanner

关闭扫码模块

closeScanner()

params

依赖的原生模块

QRScan

帮助说明 联系方式等

帮助说明

调用组件接口前需要首先通过隐式 ref 方式获取组件。

ref={this.QRScanRef}

QRScanRef(e) {
    this.QRScanObj = e;
}

联系方式

如果您在使用本组件过程中,遇到任何问题,可在论坛发帖求助。我们会有专业技术人员提供支持。