更新记录

1.0.0（2026-02-02）

1. 生成不同颜色的二维码/一维码
2. 相机扫描二维码/一维码
3. 同时扫描多个码

平台兼容性

uni-app(3.7.2)

uni-app x(3.6.16)

其他

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

功能

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

集成步骤

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

接口

• 生成二维码

var logoUrl = plus.io.convertLocalFileSystemURL('_www/static/logo.png')
let qrCodeParams = {}
qrCodeParams.size = 200 // 二维码大小
qrCodeParams.needBase64 = true // 是否二维码图片返回base64
qrCodeParams.content = "qrcode123" // 二维码内容
qrCodeParams.logo = logoUrl // 中间logo
qrCodeParams.color = "#ff0000" // 二维码颜色
// qrCodeParams.filePath = plus.io.convertLocalFileSystemURL('_download/qrcode.png')
UTSQrCode.generateQRCode(qrCodeParams, (resp) => {
    let base64 = resp.base64
    if (base64) {
        if(!base64.startsWith("hello")) { // android图片转base64前缀没有包含data:image/jpg;base64,
            base64 = "data:image/jpg;base64," + base64
        }
        this.qrCode = base64
    }
})

• 生成一维码

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, // 是否持续扫码
          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
}