dtx_store/uni_modules/Sansnn-uQRCode

uQRCode

uQRCode 生成方式简单，可扩展性高，如有复杂需求可通过自定义组件或修改源码完成需求。已测试H5、微信小程序、iPhoneXsMax真机、华为P20Pro真机。

支持自定义二维码渲染规则，可通过 getModules 方法得到矩阵信息后，自行实现canvas或view+css渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等。

二维码

什么是QR码

QR码属于矩阵式二维码中的一个种类，由DENSO(日本电装)公司开发，由JIS和ISO将其标准化。

QR码的特点

一是高速读取(QR就是取自“Quick Response”的首字母)，通过摄像头从拍摄到解码到显示内容也就三秒左右，对摄像的角度也没有什么要求；

二是高容量、高密度，理论上内容经过压缩处理后可以存7089个数字，4296个字母和数字混合字符，2953个8位字节数据，1817个汉字；

三是支持纠错处理，按照QR码的标准文档说明，QR码的纠错分为4个级别，分别是：

• level L : 最大 7% 的错误能够被纠正；
• level M : 最大 15% 的错误能够被纠正；
• level Q : 最大 25% 的错误能够被纠正；
• level H : 最大 30% 的错误能够被纠正；

四是结构化，看似无规则的图形，其实对区域有严格的定义。

更多二维码介绍及原理：https://blog.csdn.net/jason_ldh/article/details/11801355

简单使用

在 template 中创建 <uqrcode/>，并指定生成内容 text

<uqrcode ref="uQRCode" text="uQRCode 3.0" />

属性说明

属性名	类型	可选值	默认值	是否必填	说明
id	String	-	随机生成	否	组件标识/canvasId
mode	String	canvas/view	canvas	否	生成模式
text	String	-	-	是	二维码内容
size	Number	-	256	否	二维码大小，单位px
margin	Number	-	0	否	填充边距，单位px
backgroundColor	String	-	#FFFFFF	否	背景色
foregroundColor	String	-	#000000	否	前景色
errorCorrectLevel	String/Number	L/M/Q/H/1/0/3/2	H	否	纠错等级L/M/Q/H分别对应1/0/3/2
typeNumber	Number	-	-1	否	版本
fileType	String	png/jpg	png	否	导出的文件类型

方法说明

方法名	说明
toTempFilePath	导出临时文件路径
save	保存二维码

toTempFilePath(OBJECT)

导出临时文件路径

OBJECT参数说明

参数	类型	必填	默认值	说明
success	Function	否	-	方法调用成功的回调函数
fail	Function	否	-	方法调用失败的回调函数
complete	Function	否	-	方法调用结束的回调函数（调用成功、失败都会执行）

示例

<template>
  <view>
    <uqrcode ref="uQRCode" text="uQRCode 3.0" />
    <button @click="toTempFilePath">导出临时文件路径</button>
  </view>
</template>

export default {
  methods: {
    toTempFilePath() {
      this.$refs.uQRCode.toTempFilePath({
        success: res => {
          console.log(res)
        }
      })
    }
  }
}

save(OBJECT)

保存二维码

OBJECT参数说明

参数	类型	必填	默认值	说明
success	Function	否	-	方法调用成功的回调函数
fail	Function	否	-	方法调用失败的回调函数
complete	Function	否	-	方法调用结束的回调函数（调用成功、失败都会执行）

示例

<template>
  <view>
    <uqrcode ref="uQRCode" text="uQRCode 3.0" />
    <button @click="save">保存二维码</button>
  </view>
</template>

export default {
  methods: {
    save() {
      this.$refs.uQRCode.save({
        success: res => {
          console.log(res)
        }
      })
    }
  }
}

高级使用

在 template 中创建 <canvas/> 并设置 id，画布宽高

<canvas id="qrcode" canvas-id="qrcode" :style="{'width': `${size}px`, 'height': `${size}px`}" />

在 script 中引用js文件并调用方法生成矩阵

import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'

export default {
  data() {
    return {
      size: 256,
      margin: 10,
      backgroundColor: '#FFFFFF',
      foregroundColor: '#000000'
    }
  },
  onReady() {
    let modules = uQRCode.getModules({
      text: 'uQRCode 3.0',
      errorCorrectLevel: uQRCode.errorCorrectLevel.H
    })
    let tileSize = (this.size - this.margin * 2) / modules.length
    // 获取绘图所需的上下文
    let ctx = uni.createCanvasContext('qrcode', this)
    // 开始绘制
    ctx.setFillStyle(this.backgroundColor)
    ctx.fillRect(0, 0, this.size, this.size)
    for (var row = 0; row < modules.length; row++) {
      for (var col = 0; col < modules.length; col++) {
        // 计算每一个小块的位置
        var x = col * tileSize + this.margin
        var y = row * tileSize + this.margin
        var w = tileSize
        var h = tileSize
    
        var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
        ctx.setFillStyle(style)
        ctx.fillRect(x, y, w, h)
      }
    }
    ctx.draw()
  }
}

uqrcode.js 方法说明

方法名	说明
getModules	可以得到二维码矩阵信息，可根据返回的矩阵信息自行实现二维码生成

getModules(options)

根据内容得到二维码矩阵信息

参数	类型	必填	默认值	说明
text	String	是	-	二维码内容
errorCorrectLevel	Number	否	2	纠错等级，1/0/3/2分别对应L/M/Q/H
typeNumber	Number	否	-1	版本

常见问题

关于高级使用二维码生成不完整

size的单位是px，请尽量避免使用rpx，如果canvas的单位是rpx，那么不同设备屏幕分辨率不一样，rpx转换成px后的画布尺寸不足以放下全部内容，实际绘制图案超出，就会出现不完整或者没有填充完整画布的情况。

如何扫码跳转指定网页

text参数直接放入完整的网页地址即可，例如：https://ext.dcloud.net.cn/plugin?id=1287。微信客户端不能是ip地址。

H5长按识别

canvas无法长按识别，长按识别需要是图片才行，所以需要先调用toTempFilePath方法得到临时路径，再用image组件显示即可。