更新记录

1.0.2(2024-02-21)

  • 修复插件方法手动调用异常问题
  • 修复 fail complete 回调异常问题
  • 新增 successFinish?: boolean 识别二维码成功后是否自动关闭扫一扫界面参数

1.0.1(2024-02-18)

修复新的项目无法打包问题

1.0.0(2024-02-08)

初始发布

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.8,Android:5.0,iOS:不支持 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

kux-mlkit-scancode

kux-mlkit-scancode 是一个基于 谷歌条形码扫描 实现的支持多种条形码和二维码格式的扫码插件,基于大模型的能力可以做到完全离线扫描识别二维码,支持批量扫码和连续扫码,支持从相册读取识别等等丰富的功能。

注意:
由于 uts 为强类型语言,所以涉及自定义传参的都要手动指定类型,所有参数类型都已经导出,开发者直接根据提示直接导入使用即可。

开源地址:https://gitcode.com/kviewui/kux-mlkit-scancode

插件特色

  • 支持多种格式的一维码,二维码和国际通用的条形码
  • 基于谷歌机器学习套件能够完全离线使用
  • 支持批量扫码和连续扫码
  • 支持相机扫描和相册读取图片识别
  • 支持解析如文本、URL、WIFI、电话信息、短信信息等多种国际通用的内容识别类型
  • 提供了自定义界面的API方法
  • 支持开发者直接使用原生xml布局自己的界面
  • 为开发者提供了 40+ 自定义配置信息
  • 支持各种自定义回调监听
  • 不需要 GMS 强绑定
  • 支持多种使用方式

目录结构

  • 基础
    1. 安装配置
    2. 入门使用
    3. 多种使用方式
  • 进阶
    1. 解析不同类型的数据
    2. 配置
      1. title
      2. tip
      3. showTip
      4. successTip
      5. failureTip
      6. exitText
      7. cancelText
      8. showFlash
      9. flashOnText
      10. flashOffText
      11. flashOnColor
      12. flashOffColor
      13. flashOnTip
      14. flashOnTextColor
      15. flashOffTip
      16. flashOffTextColor
      17. showAlbum
      18. showBack
      19. showLine
      20. lineDuration
      21. vibrate
      22. initZoomRatio
      23. maxZoomRatio
      24. autoFullScreen
      25. touchZoom
      26. doubleTapZoom
      27. continuousScanning
      28. batchScanning
      29. markCircleRadius
      30. markCircleColor
      31. markCircleStrokeColor
      32. markCircleStrokeWidth
      33. markCircleAnimate
      34. centerBarcode
      35. backFinish
      36. cancelFinish
      37. showMask
      38. maskColor
      39. maskAlpha
      40. maskDuration
      41. successFinish
      42. beforeSuccess
      43. success
      44. fail
      45. complete
      46. beforeCancel
      47. onCancel
      48. onBack
      49. onAlbum
      50. onFlashOn
      51. onFlashOff
      52. onZoom
      53. onDoubleTap
      54. onContinuous
      55. onBarcode
      56. onCameraPermissionDenied
      57. onAlbumPermissionDenied
    3. API
      1. getInstance
      2. scanCode
      3. selfRequestCameraPermission
      4. selfRequestReadMediaImagesPermission
      5. openAlbum
      6. restartScan
      7. close
      8. config
      9. turnOnFlashlight
      10. turnOffFlashlight
    4. 自定义安卓原生界面
      1. drawable
      2. layout
      3. values
    5. 类型
      1. CommonResultCallback
      2. QRCodeType
      3. TypeText
      4. TypeURL
      5. TypeWIFI
      6. TypePhone
      7. TypeSms
      8. TypeEmail
      9. TypeContact
      10. TypeGeo
      11. TypeCalendar
      12. TypeDriverLicense
      13. SingleQRCodeData
      14. SuccessCallback
      15. OnBarcodeCallback
      16. ScanCodeConfig
      17. ScanCodeManager
  • 基础

    安装配置

    本插件为完全的 uni_modules 插件,所以直接在 插件市场 搜索 kux-mlkit-scancode 安装即可。

    注意:

    • 由于该插件需要修改原生配置,所以该插件需要在自定义基座中方可正常运行。
    • 由于该插件需要使用相机,闪光灯,读取相册敏感权限,所以需要基座声明具体的权限方可正常使用,具体如下:
    • 项目根目录定义 AndroidManifest.xml 文件用来声明相关权限,下面的作为参考:

      <?xml version="1.0" encoding="utf-8"?>
      <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 
        package="cn.kviewui.kuxMlKitScancode">
      
        <!--权限声明 start-->
        <uses-feature android:name="android.hardware.camera" android:required="false" />
      
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-permission android:name="android.permission.FLASHLIGHT" />
        <!--权限声明 end-->
          <!--由于插件依赖我开发的原生aar,所以需要声明activity-->
          <application
              android:allowBackup="true"
              android:theme="@style/Theme.AppCompat.NoActionBar"
              android:supportsRtl="true"
      >
              <activity android:name="cn.kviewui.scancode.BarcodeScanningActivity"
                  android:launchMode="singleTask"
                  android:exported="true">
                  <intent-filter>
                      <action android:name="cn.kviewui.scancode.BarcodeScanningActivity" />
                      <category android:name="android.intent.category.DEFAULT" />
                  </intent-filter>
              </activity>
          </application>
      </manifest>

      注意:

      • 上面文件中的注释是为了方便阅读,开发者们可以根据编译情况选择删除注释内容。
      • 上面文件中的 package 是应用包名,开发者要替换为自己的包名,打包基座时需要开发者填写包名,建议是和上面的 package 包名保 持一致。
      • 上面的 applicationandroid:theme 为插件需要的主题,不能修改为其他内容,否则无法打包!!!
      • 上面的 activity 为插件必须项,不能修改或删除,否则无法打包!!!

    入门使用

    import { scanCode } from '@/uni_modules/kux-mlkit-scancode';
    import { ScanCodeConfig } from '@/uni_modules/kux-mlkit-scancode/utssdk/interface';
    
    scanCode({
        success(res) {
            console.log(res, '识别成功数据');
        }
    } as ScanCodeConfig)

    多种使用方式

    插件支持 scanCode 直接使用和 useScanCode 创建实例模式使用,这样设计的目的是插件的使用灵活性,因为该插件会提供单独的API方法来控制比如 闪光灯震动重新扫描发起相机/相册权限 等各种灵活自定义场景。所以提供了前面说的两种方式,如果需要使用单独的API场景时应该使用 useScanCode ,否则应该使用 scanCode

    进阶

    解析不同类型的数据

    import { useScanCode } from '@/uni_modules/kux-mlkit-scancode';
    import { ScanCodeConfig, TypeURL, TypeWIFI, ScanCodeManager } from '@/uni_modules/kux-mlkit-scancode/utssdk/interface';
    
    const scanCodeManager = useScanCode({
        title: '扫描',
        tip: '在扫描中了',
        showTip: true,
        successTip: '识别成功',
        showLine: this.findItem('hideLine') === null,
        showAlbum: this.findItem('hideAlbum') === null,
        markCircleAnimate: this.findItem('markCircleAnimate') !== null,
        markCircleColor: this.findItem('markCircleColor') != null ? '#3491FA' : '',
        doubleTapZoom: this.findItem('doubleTapZoom') != null,
        flashOffColor: this.findItem('flashOffColor') != null ? '#3491FA' : '',
        autoFullScreen: this.findItem('autoFullScreen') != null,
        success(res) {
            console.log(res, '识别成功数据');
            // console.log((res.data[0].data as TypeURL).url);
            res.data.forEach(item => {
                if (item.type === 'url') {
                    console.log(item.data, 'url数据');
                    // 这里可以根据数据类型转换为具体的类型结构数据
                    const data = item.data as TypeURL;
                    console.log(data.url, 'url地址');
                }
            })
        }
    } as ScanCodeConfig) as ScanCodeManager;
    scanCodeManager.scanCode();

    注意
    为了演示多种使用方式,这里的使用方式为 useScanCodescanCode 方式请参考入门使用

    配置

    插件给开发者们提供了大量的自定义配置,提供如下配置可以实现轻量级的自定义界面。

    title

    • 描述:扫一扫界面的标题
    • 类型:string
    • 是否必选:
    • 默认值:'扫一扫'

    tip

    • 描述:扫一扫界面的提示文字
    • 类型:string
    • 是否必选:
    • 默认值:'正在扫描,请稍候'

    showTip

    • 描述:是否弹出扫码阶段提示语,如“扫码完成”,“识别结果:XXX”
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    successTip

    • 描述:扫码成功提示文字
    • 类型:string
    • 是否必选:
    • 默认值:'扫码完成'

    failureTip

    • 描述:扫码失败提示文字
    • 类型:string
    • 是否必选:
    • 默认值:'扫码失败,请重试'

    exitText

    • 描述:扫一扫界面的关闭按钮文字
    • 类型:string
    • 是否必选:
    • 默认值:''
    • 备注:设置该参数后,将替换原来默认界面的关闭按钮

    cancelText

    • 描述:扫一扫界面的取消按钮文字
    • 类型:string
    • 是否必选:
    • 默认值:''

    showFlash

    • 描述:是否显示闪光灯按钮
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    flashOnText

    • 描述:打开闪光灯时按钮的文字
    • 类型:string
    • 是否必选:
    • 默认值:'轻触关闭'
    • 备注:showFlashtrue 时生效

    flashOffText

    • 描述:关闭闪光灯时按钮的文字
    • 类型:string
    • 是否必选:
    • 默认值:'轻触照亮'
    • 备注:showFlashtrue 时生效

    flashOnColor

    • 描述:打开闪光灯时按钮的背景色
    • 类型:string
    • 是否必选:
    • 默认值:'#00BC79'
    • 备注:showFlashtrue 时生效

    flashOffColor

    • 描述:关闭闪光灯时按钮的背景色
    • 类型:string
    • 是否必选:
    • 默认值:'#FFFFFF'
    • 备注:showFlashtrue 时生效

    flashOnTip

    • 描述:打开闪光灯时的提示文字
    • 类型:string
    • 是否必选:
    • 默认值:'闪光灯已打开'
    • 备注:showFlashtrue 时生效

    flashOnTextColor

    • 描述:打开闪光灯时的文字颜色
    • 类型:string
    • 是否必选:
    • 默认值:'#00BC79'
    • 备注:showFlashtrue 时生效

    flashOffTip

    • 描述:关闭闪光灯时的提示文字
    • 类型:string
    • 是否必选:
    • 默认值:'闪光灯已关闭'
    • 备注:showFlashtrue 时生效

    flashOffTextColor

    • 描述:关闭闪光灯时的文字颜色
    • 类型:string
    • 是否必选:
    • 默认值:'#FFFFFF'
    • 备注:showFlashtrue 时生效

    showAlbum

    • 描述:是否显示相册按钮
    • 类型:boolean
    • 是否必选:
    • 默认值:false

    showBack

    • 描述:是否显示返回按钮
    • 类型:boolean
    • 是否必选:
    • 默认值:true
    • 备注:建议开启

    showLine

    • 描述:是否显示扫描线
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    lineDuration

    • 描述:扫描线动画时长,单位毫秒
    • 类型:number
    • 是否必选:
    • 默认值:3000

    vibrate

    • 描述:扫描成功后是否震动
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    initZoomRatio

    • 描述:初始化调焦大小
    • 类型:number
    • 是否必选:
    • 默认值:1.0

    maxZoomRatio

    • 描述:允许最大调焦大小
    • 类型:number
    • 是否必选:
    • 默认值:5.0
    • 备注:
      • 自动缩放焦距时有效,不过测试了谷歌的自动调焦功能时灵时不灵,所以目前这个参数可以忽略

    autoFullScreen

    • 描述:是否自动全屏
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    touchZoom

    • 描述:是否启用手势缩放
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    doubleTapZoom

    • 描述:是否启用双击缩放
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    continuousScanning

    • 描述:是否开启连续扫码
    • 类型:boolean
    • 是否必选:
    • 默认值:false

    batchScanning

    • 描述:是否开启批量扫码
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    markCircleRadius

    • 描述:二维码识别圆圈半径大小
    • 类型:number
    • 是否必选:
    • 默认值:50

    markCircleColor

    • 描述:二维码识别圆圈颜色
    • 类型:string
    • 是否必选:
    • 默认值:#00BC79

    markCircleStrokeColor

    • 描述:二维码识别圆圈边框颜色
    • 类型:string
    • 是否必选:
    • 默认值:'#FFFFFF'

    markCircleStrokeWidth

    • 描述:二维码识别圆圈边框宽度
    • 类型:number
    • 是否必选:
    • 默认值:3

    markCircleAnimate

    • 描述:二维码识别圆圈是否开启动画
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    centerBarcode

    • 描述:是否开启二维码只在屏幕中心识别
    • 类型:boolean
    • 是否必选:
    • 默认值:false
    • 备注:暂时不支持

    backFinish

    • 描述:点击返回按钮是否关闭扫一扫界面
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    cancelFinish

    • 描述:点击取消按钮是否关闭扫一扫界面
    • 类型:boolean
    • 是否必选:
    • 默认值:false

    showMask

    • 描述:识别到二维码时是否显示蒙层,建议开启,这样能突出显示二维码上面的圆圈标记
    • 类型:boolean
    • 是否必选:
    • 默认值:true

    maskColor

    • 描述:识别到二维码时蒙层颜色
    • 类型:string
    • 是否必选:
    • 默认值:'#80000000'
    • 备注:showMasktrue 时生效

    maskAlpha

    • 描述:识别到二维码时蒙层透明度
    • 类型:number
    • 是否必选:
    • 默认值:0.5
    • 备注:showMasktrue 时生效

    maskDuration

    • 描述:识别到二维码时显示蒙层的过渡动画时长,单位毫秒
    • 类型:number
    • 是否必选:
    • 默认值:300
    • 备注:showMasktrue 时生效

    successFinish

    • 描述:识别二维码成功后是否自动关闭扫一扫界面
    • 类型:boolean
    • 是否必选:
    • 默认值:false

    beforeSuccess

    • 描述:识别到二维码后成功回调前的自定义处理
    • 类型:beforeSuccess?: (callback: CommonResultCallback) => void
    • 是否必选:

    success

    • 描述:识别到二维码后成功回调
    • 类型:success?: (callback: SuccessCallback) => void
    • 是否必选:

    fail

    • 描述:识别到二维码后失败回调
    • 类型:fail?: (callback: CommonResultCallback) => void
    • 是否必须:

    complete

    • 描述:识别到二维码后完成回调
    • 类型:complete?: (callback: CommonResultCallback) => void
    • 是否必须:

    beforeCancel

    • 描述:识别到二维码后执行取消回调前的自定义处理
    • 类型:beforeCancel?: () => boolean
    • 是否必选:
    • 备注:暂不支持

    onCancel

    • 描述:识别到二维码后点击取消回调
    • 类型:onCancel?: () => void
    • 是否必选:

    onBack

    • 描述:识别到二维码后点击返回回调
    • 类型:onBack?: () => void
    • 是否必选:

    onAlbum

    • 描述:识别到二维码后点击相册回调
    • 类型:onAlbum?: () => void
    • 是否必选:

    onFlashOn

    • 描述:识别到二维码后打开闪光灯回调
    • 类型:onFlashOn?: () => void
    • 是否必选:

    onFlashOff

    • 描述:识别到二维码后关闭闪光灯回调
    • 类型:onFlashOff?: () => void
    • 是否必选:

    onZoom

    • 描述:识别到二维码后手势缩放回调
    • 类型:onZoom?: (currentZoomRatio: number) => void
    • 是否必选:

    onDoubleTap

    • 描述:识别到二维码后执行双击缩放回调
    • 类型:onDoubleTap?: (currentZoomRatio: number) => void
    • 是否必选:

    onContinuous

    • 描述:识别到二维码后连续扫码回调
    • 类型:onContinuous?: (callback: SuccessCallback) => void
    • 是否必选:

    onBarcode

    • 描述:点击单个二维码的回调
    • 类型:onBarcode?: (callback: OnBarcodeCallback) => void
    • 是否必选:

    onCameraPermissionDenied

    • 描述:用户拒绝相机权限时的回调
    • 类型:onCameraPermissionDenied?: () => void
    • 是否必选:

    onAlbumPermissionDenied

    • 描述:用户拒绝相册权限时的回调
    • 类型:onAlbumPermissionDenied?: () => void
    • 是否必选:

    API

    这里的API指的是 useScanCode 实例模式下的开放API方法。

    getInstance

    • 描述:获取插件实例
    • 参数:
    • 返回值:BarcodeScanningActivity
    • 备注:这个是获取的 uts 转换后的原生 aar 插件实例,如果开发者有原生开发定制能力的话可以使用该实例完成定制开发

    scanCode

    • 描述:打开扫描界面扫码
    • 参数:
    • 返回值:

    selfRequestCameraPermission

    • 描述:手动发起相机权限请求
    • 参数:
    • 返回值:

    selfRequestReadMediaImagesPermission

    • 描述:手动发起读取相册权限请求
    • 参数:
    • 返回值:

    openAlbum

    • 描述:打开相册
    • 参数:
    • 返回值:

    restartScan

    • 描述:重新发起扫描
    • 参数:
    • 返回值:

    close

    • 描述:关闭扫一扫界面
    • 参数:
    • 返回值:

    config

    • 描述:设置扫码界面配置内容
    • 参数:config: ScanCodeConfig
    • 返回值:
    • 备注:如果不传任何参数时将会恢复插件默认的配置,相当于是配置初始化

    turnOnFlashlight

    • 描述:打开闪光灯
    • 参数:
    • 返回值:

    turnOffFlashlight

    • 描述:关闭闪光灯
    • 参数:
    • 返回值:

    自定义安卓原生界面

    由于插件是基于原生安卓aar实现的,所以把 res 资源也给开发者开放了出来,只要开发者按照同名去创建资源文件即可覆盖插件默认的资源完全使用自己的自定义资源实现完全自定义界面的场景。

    drawable

    drawable 是原生安卓的 res 资源中的一项,主要是定义图片资源,这里是插件界面的图片和图标资源。

    button_ground
    • 描述:二维码圆圈标记背景
    • 类型: xml
    • 源码:

      <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android">
          <solid android:color="#5000BC79"/>
          <corners android:radius="999dp"/>
      </shape>
    icon_album
    • 描述:相册图标
    • 类型:png
    icon_exit
    • 描述:关闭界面图标
    • 类型:xml
    • 源码:

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
          android:width="48dp"
          android:height="48dp"
          android:viewportWidth="960"
          android:viewportHeight="960"
          android:tint="?attr/colorControlNormal"
          android:autoMirrored="true">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M400,880L0,480L400,80L456,137L113,480L456,823L400,880Z"/>
      </vector>
    icon_flashlight_off
    • 描述:关闭闪光灯按钮图标
    • 类型:xml
    • 源码:

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
          android:width="48dp"
          android:height="48dp"
          android:viewportWidth="960"
          android:viewportHeight="960"
          android:tint="?attr/colorControlNormal">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M341,880L341,397L67,123L110,80L859,830L817,873L641,697L641,880L341,880ZM251,136L251,80L731,80L731,196L311,196L311,196L251,136ZM641,527L371,256L731,256L731,305L641,437L641,527Z"/>
      </vector>
    icon_flashlight_on
    • 描述:打开闪光灯按钮图标
    • 类型:xml
    • 源码:

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
          android:width="48dp"
          android:height="48dp"
          android:viewportWidth="960"
          android:viewportHeight="960"
          android:tint="?attr/colorControlNormal">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M240,196L240,80L720,80L720,196L240,196ZM479.82,634Q501,634 516,619.18Q531,604.35 531,583.18Q531,562 516.18,547Q501.35,532 480.18,532Q459,532 444,546.82Q429,561.65 429,582.82Q429,604 443.82,619Q458.65,634 479.82,634ZM330,880L330,437L240,305L240,256L720,256L720,305L630,437L630,880L330,880Z"/>
      </vector>
    icon_scan_line
    • 描述:扫描线图片
    • 类型:png
    scan_default_result_point_arrow
    • 描述:二维码标记圆圈中间的指示箭头图标
    • 类型:png

    layout

    layout 是原生安卓的 res 资源中的一项,主要是定义界面布局资源,这里是插件界面的界面布局。

    activity_barcode_scanning
    • 描述:扫一扫主界面
    • 类型:xml
    • 源码:

      <?xml version="1.0" encoding="utf-8"?>
      <cn.kviewui.scancode.CustomConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          tools:context="cn.kviewui.scancode.BarcodeScanningActivity">
      
          <!--相机预览-->
          <androidx.camera.view.PreviewView
              android:id="@+id/previewView"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:alpha="1"
              android:background="@color/colorBlack"/>
      
          <!--识别到二维码时加的蒙层,用来突出显示圆圈标记-->
          <View
              android:id="@+id/view_mask"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/colorViewMask"
              android:visibility="gone"/>
      
          <!--标题-->
          <TextView
              android:id="@+id/tv_title"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:paddingTop="48dp"
              android:gravity="center"
              android:textColor="@color/colorWhite"
              android:text="@string/scan_title"
              android:textSize="18sp"
              tools:ignore="MissingConstraints" />
      
          <androidx.constraintlayout.widget.ConstraintLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:paddingTop="50dp"
              android:orientation="horizontal">
      
              <!--退出图标-->
              <ImageView
                  android:id="@+id/iv_exit"
                  android:layout_width="20dp"
                  android:layout_height="20dp"
                  android:src="@drawable/icon_exit"
                  android:contentDescription="@string/icon_close"
                  android:layout_marginStart="30dp"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent"
                  app:tint="@color/colorWhite"/>
      
          <!--退出文字-->
              <TextView
                  android:id="@+id/tv_exit"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent"
                  android:layout_marginStart="30dp"
                  android:textColor="@color/colorWhite"
                  android:text="@string/icon_close"
                  android:textSize="18sp"
                  android:visibility="gone"/>
      
          <!--取消文字,识别到二维码后显示-->
              <TextView
                  android:id="@+id/tv_cancel"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent"
                  android:layout_marginStart="30dp"
                  android:textColor="@color/colorWhite"
                  android:text="@string/cancel_scan_result"
                  android:textSize="18sp"
                  android:visibility="gone"/>
      
          <!--相册图标-->
              <ImageView
                  android:id="@+id/iv_photo"
                  android:layout_width="26dp"
                  android:layout_height="26dp"
                  app:layout_constraintTop_toTopOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  android:src="@drawable/icon_album"
                  android:layout_marginEnd="30dp"
                  android:contentDescription="@string/icon_photo" />
          </androidx.constraintlayout.widget.ConstraintLayout>
      
          <!--底部提示语-->
          <TextView
              android:id="@+id/tv_tips"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:layout_constraintBottom_toBottomOf="parent"
              android:layout_marginBottom="100dp"
              android:textColor="@color/colorWhite"
              android:gravity="center"
              android:text="@string/scanning_text"
              android:textSize="16sp" />
      
          <LinearLayout
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:layout_constraintBottom_toBottomOf="parent"
              android:layout_marginBottom="20dp"
              android:paddingTop="0dp"
              android:gravity="center_horizontal">
              <LinearLayout
                  android:id="@+id/ll_flashlight"
                  android:orientation="vertical"
                  android:gravity="center_vertical"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content">
      
                  <!--打开闪光灯按钮-->
                  <ImageView
                      android:id="@+id/iv_flashlight_on"
                      android:layout_width="36dp"
                      android:layout_height="36dp"
                      android:layout_gravity="center_horizontal"
                      android:src="@drawable/icon_flashlight_on"
                      android:visibility="visible"
                      android:contentDescription="@string/open_flashlight" />
      
                      <!--关闭闪光灯按钮-->
                  <ImageView
                      android:id="@+id/iv_flashlight_off"
                      android:layout_width="36dp"
                      android:layout_height="36dp"
                      android:layout_gravity="center_horizontal"
                      android:src="@drawable/icon_flashlight_off"
                      android:visibility="gone"
                      android:contentDescription="@string/close_flashlight" />
      
              <!--闪光灯操作提示-->
                  <TextView
                      android:id="@+id/tv_flashlight"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:text="@string/open_flashlight"
                      android:textSize="12sp"
                      android:gravity="center"
                      android:textColor="@color/colorWhite"
                      android:layout_gravity="center"/>
              </LinearLayout>
          </LinearLayout>
      
          <!--自定义相册选择图片的预览界面-->
          <cn.kviewui.scancode.CustomImageView
              android:id="@+id/iv_photo_preview"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:visibility="gone"
              android:background="@color/colorBlack"
              android:scaleType="fitCenter"
              android:contentDescription="@string/photo_preview" />
      
          <!--自定义相机扫描识别到二维码后的预览界面,用来绘制圆圈标记和扫描线-->
          <cn.kviewui.scancode.ScanOverlay
              android:id="@+id/overlay"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layout_constraintTop_toBottomOf="@id/iv_exit"
              app:layout_constraintTop_toTopOf="@id/tv_tips"
              android:layout_marginBottom="0dp"
              android:layout_marginTop="0dp"
              android:paddingTop="20dp"
              android:paddingBottom="20dp"
              android:alpha="1"
              android:background="@color/colorTransparent"/>
      
      </cn.kviewui.scancode.CustomConstraintLayout>

      提示
      开发者在自定义布局的时候要使用上面布局元素的 id 值,不然插件无法监听点击和配置!!!

    values

    values 是原生安卓的 res 资源中的一项,主要是定义常量和颜色值等资源,这里是插件界面的常量值和颜色值。

    colors
    • 描述:定义默认的颜色值
    • 类型:xml
    • 源码:

      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <color name="colorPrimary">#00BC79</color>
          <color name="colorPrimaryDark">#004D3C</color>
          <color name="colorAccent">#03DAC5</color>
          <color name="colorWhite">#FFFFFF</color>
          <color name="colorBlack">#000000</color>
          <color name="colorGray">#999999</color>
          <color name="colorGrayLight">#F5F5F5</color>
          <color name="colorTransparent">#00FFFFFF</color>
          <color name="colorViewMask">#80000000</color>
      </resources>
    strings
    • 描述:定义界面布局需要的默认描述语
    • 类型:xml
    • 源码:

      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <string name="scan_line">ScanLine</string>
          <string name="icon_photo">IconPhoto</string>
          <string name="icon_close">关闭</string>
          <string name="scanning_text">正在扫描,请稍候</string>
          <string name="scanning_failed">扫描失败,请重试</string>
          <string name="scanning_succeeded_multi">扫描到多个二维码,请选择一个打开</string>
          <string name="scanning_succeeded_single">扫描成功</string>
          <string name="cancel_scan_result">取消</string>
          <string name="scan_title">扫一扫</string>
          <string name="open_flashlight">轻触照亮</string>
          <string name="close_flashlight">轻触关闭</string>
          <string name="flash_on_tip">闪光灯已打开</string>
          <string name="flash_off_tip">闪光灯已关闭</string>
          <string name="photo_preview">相册预览</string>
      </resources>

    类型

    由于 uts 强类型语言,所以插件给开发者们提供了类型导出,方便开发者们显示声明类型。

    CommonResultCallback

    /**
     * 回调定义
     */
    export type CommonResultCallback = {
        statusCode: number;
        message: string;
        data: any;
    };

    QRCodeType

    /**
     * 二维码解析数据类型
     */
    export type QRCodeType = 'text'
    | 'url'
    | 'wifi'
    | 'phone'
    | 'sms'
    | 'email'
    | 'contact'
    | 'geo'
    | 'calendar'
    | 'driverLicense'

    TypeText

    /**
     * 文本数据类型结构
     */
    export type TypeText = {
        text: string;
    };

    TypeURL

    /**
     * URL数据类型结构
     */
    export type TypeURL = {
        url: string;
    };

    TypeWIFI

    /**
     * WIFI数据类型结构
     */
    export type TypeWIFI = {
        ssid: string;
        password: string;
        type: string;
    };

    TypePhone

    /**
     * Phone数据类型结构
     */
    export type TypePhone = {
        number: string;
    };

    TypeSms

    /**
     * Sms数据类型结构
     */
    export type TypeSms = {
        number: string;
        message: string;
    };

    TypeEmail

    /**
     * Email数据类型结构
     */
    export type TypeEmail = {
        address: string;
        subject: string;
        body: string;
    };

    TypeContact

    /**
     * 联系人信息数据类型结构
     */
    export type TypeContact = {
        name: string;
        address: string;
        phone: string;
        email: string;
    };

    TypeGeo

    /**
     * 地理位置信息数据类型结构
     */
    export type TypeGeo = {
        latitude: string;
        longitude: string;
    };

    TypeCalendar

    /**
     * 日历事件数据类型结构
     */
    export type TypeCalendar = {
        summary: string;
        location: string;
        description: string;
        start: string;
        end: string;
    };

    TypeDriverLicense

    /**
     * 驾驶证数据类型结构
     */
    export type TypeDriverLicense = {
        firstName: string;
        lastName: string;
        middleName: string;
        addressState: string;
        addressCity: string;
        addressStreet: string;
        addressZip: string;
        birthDate: string;
        documentType: string;
        expiryDate: string;
        gender: string;
        issueDate: string;
        licenseNumber: string;
        issuingCountry: string;
    };

    SingleQRCodeData

    /**
     * 单个二维码数据结构定义
     */
    export type SingleQRCodeData = {
        type: QRCodeType;
        data: any;
    };

    SuccessCallback

    /**
     * 识别二维码成功回调定义
     */
    export type SuccessCallback = {
        statusCode: number;
        message: string;
        data: SingleQRCodeData[];
    };

    OnBarcodeCallback

    /**
     * 点击单个二维码成功回调定义
     */
    export type OnBarcodeCallback = {
        statusCode: number;
        message: string;
        data: SingleQRCodeData;
    };

    ScanCodeConfig

    /**
     * 扫码前的配置
     */
    export type ScanCodeConfig = {
        /**
         * 扫一扫界面的标题
         */
        title?: string;
        /**
         * 扫一扫界面的提示文字
         */
        tip?: string;
        /**
         * 是否弹出扫码阶段提示语,如“扫码完成”,“识别结果:XXX”
         * + 默认为 `true`
         */
        showTip?: boolean;
        /**
         * 扫码成功提示文字
         */
        successTip?: string;
        /**
         * 扫码失败提示文字
         */
        failureTip?: string;
        /**
         * 扫一扫界面的关闭按钮文字
         * + 设置该参数后,将替换原来默认界面的关闭按钮
         */
        exitText?: string;
        /**
         * 扫一扫界面的取消按钮文字
         */
        cancelText?: string;
        /**
         * 是否显示闪光灯按钮
         * + 默认为 `true`
         */
        showFlash?: boolean;
        /**
         * 打开闪光灯时按钮的文字
         * + `showFlash` 为 `true` 时生效
         */
        flashOnText?: string;
        /**
         * 关闭闪光灯时按钮的文字
         * + `showFlash` 为 `true` 时生效
         */
        flashOffText?: string;
        /**
         * 打开闪光灯时按钮的背景色
         * + `showFlash` 为 `true` 时生效
         */
        flashOnColor?: string;
        /**
         * 关闭闪光灯时按钮的背景色
         * + `showFlash` 为 `true` 时生效
         */
        flashOffColor?: string;
        /**
         * 打开闪光灯时的提示文字
         * + `showFlash` 为 `true` 时生效
         */
        flashOnTip?: string;
        /**
         * 打开闪光灯时的文字颜色
         * + `showFlash` 为 `true` 时生效
         */
        flashOnTextColor?: string;
        /**
         * 关闭闪光灯时的提示文字
         * + `showFlash` 为 `true` 时生效
         */
        flashOffTip?: string;
        /**
         * 关闭闪光灯时的文字颜色
         * + `showFlash` 为 `true` 时生效
         */
        flashOffTextColor?: string;
        /**
         * 是否显示相册按钮
         * + 默认为 `false`
         */
        showAlbum?: boolean;
        /**
         * 是否显示返回按钮
         * + 默认为 `true`
         * + 建议开启
         */
        showBack?: boolean;
        /**
         * 是否显示扫描线
         * + 默认为 `true`
         */
        showLine?: boolean;
        /**
         * 扫描线动画时长,单位毫秒
         * + 默认值为 `3000`
         */
        lineDuration?: number;
        // /**
        //  * 扫描线起始位置
        //  * + 不建议自定义,除非不使用默认的界面
        //  */
        // lineStartY?: number;
        // /**
        //  * 扫描线结束位置
        //  */
        // lineEndY?: (floatYFraction: number) => number;
        /**
         * 扫描成功后是否震动
         * + 默认为 `true`
         */
        vibrate?: boolean;
        /**
         * 初始化调焦大小
         * + 默认为 `1.0`
         */
        initZoomRatio?: number;
        /**
         * 允许最大调焦大小
         * + 默认为 `1.0`
         */
        maxZoomRatio?: number;
        /**
         * 是否自动全屏
         * + 默认为 `true`
         */
        autoFullScreen?: boolean;
        /**
         * 是否启用手势缩放
         * + 默认为 `true`
         */
        touchZoom?: boolean;
        /**
         * 是否启用双击缩放
         * + 默认为 `true`
         */
        doubleTapZoom?: boolean;
        /**
         * 是否开启连续扫码
         * + 默认为 `false`
         */
        continuousScanning?: boolean;
        /**
         * 是否开启批量扫码
         * + 默认为 `true`
         */
        batchScanning?: boolean;
        /**
         * 二维码识别圆圈半径大小
         * + 默认为 `50`
         */
        markCircleRadius?: number;
        /**
         * 二维码识别圆圈颜色
         * + 默认为 `#00BC79`
         */
        markCircleColor?: string;
        /**
         * 二维码识别圆圈边框颜色
         * + 默认为 `#FFFFFF`
         */
        markCircleStrokeColor?: string;
        /**
         * 二维码识别圆圈边框宽度
         * + 默认为 `3`
         */
        markCircleStrokeWidth?: number;
        /**
         * 二维码识别圆圈是否开启动画
         * + 默认为 `true`
         */
        markCircleAnimate?: boolean;
        /**
         * 是否开启二维码只在屏幕中心识别
         * + 暂时不支持
         */
        centerBarcode?: boolean;
        /**
         * 点击返回按钮是否关闭扫一扫界面
         * + 默认为 `true`
         */
        backFinish?: boolean;
        /**
         * 点击取消按钮是否关闭扫一扫界面
         * + 默认为 `false`
         */
        cancelFinish?: boolean;
        /**
         * 识别到二维码时是否显示蒙层,建议开启,这样能突出显示二维码上面的圆圈标记
         * + 默认为 `true`
         */
        showMask?: boolean;
        /**
         * 识别到二维码时蒙层颜色
         * + `showMask` 为 `true` 时生效
         * + 默认为 `#80000000`
         */
        maskColor?: string;
        /**
         * 识别到二维码时蒙层透明度
         * + `showMask` 为 `true` 时生效
         * + 默认为 `0.5`
         */
        maskAlpha?: number;
        /**
         * 识别到二维码时显示蒙层的过渡动画时长,单位毫秒
         * + `showMask` 为 `true` 时生效
         * + 默认为 `300`
         */
        maskDuration?: number;
        /**
         * 识别到二维码后成功回调前的自定义处理
         */
        beforeSuccess?: (callback: CommonResultCallback) => void;
        /**
         * 识别到二维码后成功回调
         */
        success?: (callback: SuccessCallback) => void;
        /**
         * 识别到二维码后失败回调
         */
        fail?: (callback: CommonResultCallback) => void;
        /**
         * 识别到二维码后完成回调
         */
        complete?: (callback: CommonResultCallback) => void;
        /**
         * 识别到二维码后执行取消回调前的自定义处理
         * + 暂不支持
         */
        beforeCancel?: () => boolean;
        /**
         * 识别到二维码后点击取消回调
         */
        onCancel?: () => void;
        /**
         * 识别到二维码后点击返回回调
         */
        onBack?: () => void;
        /**
         * 识别到二维码后点击相册回调
         */
        onAlbum?: () => void;
        /**
         * 识别到二维码后打开闪光灯回调
         */
        onFlashOn?: () => void;
        /**
         * 识别到二维码后关闭闪光灯回调
         */
        onFlashOff?: () => void;
        /**
         * 识别到二维码后手势缩放回调
         * @param {number} currentZoomRatio 当前焦距
         */
        onZoom?: (currentZoomRatio: number) => void;
        /**
         * 识别到二维码后执行双击缩放回调
         * @param {number} currentZoomRatio 当前焦距
         */
        onDoubleTap?: (currentZoomRatio: number) => void;
        /**
         * 识别到二维码后连续扫码回调
         */
        onContinuous?: (callback: SuccessCallback) => void;
        /**
         * 点击单个二维码的回调
         */
        onBarcode?: (callback: OnBarcodeCallback) => void;
        /**
         * 用户拒绝相机权限时的回调
         */
        onCameraPermissionDenied?: () => void;
        /**
         * 用户拒绝相册权限时的回调
         */
        onAlbumPermissionDenied?: () => void;
    };

    ScanCodeManager

    这个类型其实还是 useScanCode 的返回类型,因为目前 uts 写法限制,所以目前只能是整个class的导出了。


    友情推荐

    结语

    kux 不生产代码,只做代码的搬运工,致力于提供 uts 的 js 生态轮子实现,欢迎各位开发者在插件市场搜索使用 kux 生态插件:https://ext.dcloud.net.cn/search?q=kux。在此非常感谢官方的协助以及及时解决了我们在群里提的问题,也感谢群里各位伙伴的友好帮助。由于该插件的完成时间是即将除夕了,所以在此恭祝各位开发者新年快乐,龙年行大运。

    隐私、权限声明

    1. 本插件需要申请的系统权限列表:

    相机权限、相册权限、闪光灯权限

    2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

    插件不采集任何数据

    3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

    许可协议

    MIT协议

    使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问