更新记录

1.0.5（2026-02-28）

1. 优化鸿蒙加载图片功能

1.0.4（2026-02-28）

1. 增加鸿蒙支持

1.0.3（2026-02-12）

1. 扫描到多个二维码时，定位按钮图片改成固定大小

平台兼容性

uni-app(3.7.2)

uni-app x(3.6.18)

其他

扫描二维码一维码，生成二维码一维码，支持单次、持续扫描，支持同时扫描多个码，自定义UI

功能

• 扫描二维码一维码
• 生成二维码一维码
• 支持单次、持续扫描
• 支持同时扫描多个码
• 支持自定义UI

集成步骤

1. 拷贝demo里的AndroidManifest.xml、Info.plist、nativeResources、harmony-configs文件到项目根目录
2. 集成插件，集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027
3. 如需定制或增加功能请点击插件标题下方的"进入交流群"私聊作者

接口

    import {
    UTSQrCode,
    getResourcePath,
    getFilesDir
} from "@/uni_modules/wrs-uts-qrcode"

• 生成二维码

let width = 200
let logoSize = width * 0.2
var logoUrl = getResourcePath('/static/logo.png')
let qrCodeParams = {}
qrCodeParams.size = width // 二维码大小
qrCodeParams.needBase64 = true // 是否二维码图片返回base64
qrCodeParams.content = "qrcode" // 二维码内容
qrCodeParams.correctionLevel = "H" // 纠错等级，取值范围L、M、Q、H
qrCodeParams.logo = logoUrl // 中间logo,logo暂不支持harmony，harmony的话可以在上面再覆盖一个logo图片来实现
qrCodeParams.logoSize = logoSize // logo大小，一般不要超过宽度的1/3
qrCodeParams.color = "#ff0000" // 二维码颜色
qrCodeParams.filePath = getFilesDir() + "/qrcode.png" // 二维码保存为本地文件的路径
// console.log("generateQRCode params:" + JSON.stringify(qrCodeParams))
UTSQrCode.generateQRCode(qrCodeParams, (resp) => {
    // console.log('generateQRCode resp:' + JSON.stringify(resp))
    let base64 = resp.base64
    let filePath = resp.filePath
    if (base64) {
        if (!base64.startsWith(
                "data:image/jpg;base64,")) { // android、harmony图片转base64前缀没有data:image/jpg;base64,
            base64 = "data:image/jpg;base64," + base64
        }
        // this.qrCode = base64
    }
    if (filePath) {
        this.qrCode = "file://" + resp.filePath
    }
})

• 生成一维码

let barCodeParams = {}
barCodeParams.content = "qrcode123" // 
barCodeParams.width = 300 // 
barCodeParams.height = 80 // 
barCodeParams.needBase64 = true
barCodeParams.isShowText = true
barCodeParams.color = "#00ff00" // 码颜色
UTSQrCode.generateBarCode(barCodeParams, (resp) => {
    let base64 = resp.base64
    if (base64) {
        if(!base64.startsWith("hello")) { // android图片转base64前缀没有包含data:image/jpg;base64,
            base64 = "data:image/jpg;base64," + base64
        }
        this.barCode = base64
    }
})

相机扫描组件

        <!--  #ifdef  APP-HARMONY -->
<embed :style="'width:'+width+'px;height:'+height+'px;'" tag="webview" :options="options"
    @onevent="onEvent"></embed>
<!--  #endif -->
<!--  #ifndef  APP-HARMONY -->
<wrs-uts-qrcode :style="'width:'+width+'px;height:'+height+'px;'" @onEvent="onEvent"
    :params="params"></wrs-uts-qrcode>
<!--  #endif -->

• 通过修改params参数来实现业务，通过onEvent事件来回调数据

      data() {
  const {
      screenWidth,
      screenHeight,
      windowWidth,
      windowHeight,
      statusBarHeight,
      pixelRatio
  } = uni.getSystemInfoSync();
  
  const systemInfo = uni.getSystemInfoSync();
  console.log("systemInfo:" + JSON.stringify(systemInfo))
  
  let width = screenWidth
  let height = windowHeight
  
  //  中间扫描框是占屏幕4/5的正方形
  
  let rectWidth = width / 5 * 4
  let rectHeight = rectWidth
  let leftMargin = (width - rectWidth) / 2
  let topMargin = (height - rectHeight) / 2
  switch (uni.getSystemInfoSync().platform) {
      case 'ios': {
  
      }
      break;
      case 'android': {
          leftMargin = leftMargin * pixelRatio
          topMargin = topMargin * pixelRatio
      }
      break;
      default:
      {
  
      }
          break;
  }
  let continueScan = false
  
  let businessArray = []
  businessArray.push({
      business: "setParams", //设置业务参数
      params: {
          margin: { // 设置中间扫描框边距
              left: leftMargin, // 左边距,单位：iOS是dp,android是px
              top: topMargin // 上边距
          },
          tipTxt: "请将二维码/一维码对准扫码框", // 提示文本
          tipColor: "#ff0000", // 提示文本颜色
          continueScan: continueScan, // 是否持续扫码，暂不支持鸿蒙，鸿蒙会一直扫描，可以调用停止扫描接口，参考demo
          recognizeInRect: true,// 是否只识别扫码框内的码，暂不支持鸿蒙
          // angleColor: "#ff0000", // 4个角的颜色
          // maskColor: "#10ff0000" // 遮罩层颜色
      }
  })
  
  businessArray.push({
      business: "startScan" // 开始扫描
  })
  let params = {}
  params.businessArray = businessArray
  let paramsStr = JSON.stringify(params)
  let screenInfo = UTSQrCode.getScreenInfo()
  let controlWidth = 150
  let controlHeight = 300
  return {
      controlWidth: controlWidth,
      controlHeight: controlHeight,
      params: paramsStr,
      options: {
          params: paramsStr
      },
      height: height,
      width: width,
      index: 0,
      code: null,
      msg: null,
      continueScan: continueScan
  }
  }

• onEvent事件

onEvent(event) {
    console.log("onEvent:" + JSON.stringify(event))
    let detail = event.detail
    let opt = detail.opt
    switch (opt) {
        // 扫描结果
        case "onScanResultCallback": {
            let barcodes = detail.barcodes
            let array = JSON.parse(barcodes)
            if (array.length > 0) {
                let str = ""
                for (let index = 0; index < array.length; index++) {
                    let model = array[index];
                    let displayValue = model.displayValue
                    let valueType = model.valueType
                    let format = model.format
                    let modelStr = "(" + displayValue + ", format:" + this.getFormatDesc(format) +")"
                    str = str + "\n" + modelStr
                }
                this.code = str
                if (array.length == 1 && !this.continueScan) { // 如果不是持续扫描的话，提示用户是否继续扫描
                    this.toContinueScan(array[0].displayValue)
                }
            }
        }
        break;
        // 扫描到多个码时，用户点击了码回调
        case "onClickResultCallback": {
             let displayValue = detail.displayValue 

             if (!this.continueScan) {  // 如果不是持续扫描的话，提示用户是否继续扫描
                  this.toContinueScan(displayValue)
             } else {
                  this.showToast(displayValue)
             }

        }
        break;
        default:
            break;
    }

}

• 是否显示遮罩层

let newParams = {}
newParams.businessArray = [{
    business: "setParams",
    params: {
        showMaskLayer: true
    }
}]
let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• 是否显示4个角

let newParams = {}
newParams.businessArray = [{
    business: "setParams",
    params: {
        showAngle: true
    }
}]
let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• 是否显示动画

let newParams = {}
newParams.businessArray = [{
    business: "setParams",
    params: {
        showAnimation: true
    }
}]
let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• 是否开启闪光灯

let newParams = {}
newParams.businessArray = [{
    business: "setParams",
    params: {
        flashTorch: true
    }
}]
let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• 是否持续扫描

let newParams = {}
newParams.businessArray = [{
    business: "setParams",
    params: {
        continueScan: show
    }
}]
let newParamsStr = this.formatNewParams(newParams)
// android、ios
this.params = newParamsStr
// 鸿蒙
this.options = {
    params: newParamsStr
}

• 识别图片中的二维码/一维码

let path = "/xxxxx/xxxxx/xxxx.png" // 本地图片绝对地址或网络地址
UTSQrCode.recognizeImageCode({
    url: path
}, (resp)=>{
    let flag = resp.flag
    if(flag) {
        let barcodes = resp.barcodes 
        if(barcodes) {
// ios: {"flag":true,"barcodes":[{"displayValue":"qrcode123","rawValue":"qrcode123","format":256,"valueType":7},{"displayValue":"barcode","rawValue":"barcode","format":1,"valueType":7}]}
// format: 1: code128 2:code39 4:code93 8:codebar 16:datamatrix  32:ean13 64:ean8 128:itf 256:QRCode 512:upca 1024:upce 2048:pdf417 4096:aztec
// valueType: 7:text
            for(let i = 0; i < barcodes.length; i ++) {
                let model = barcodes[i]
                let displayValue = model.displayValue 
                console.log("识别到码:" + displayValue)
            }
        }
    }
    console.log(JSON.stringify(resp))
    this.msg = JSON.stringify(resp)
})