更新记录

1.0.63(2020-08-08)

1.0.63 默认值优化;示例项目优化。

1.0.6(2020-08-04)

1.0.6 新增属性 errorCorrectLevelmake() 方法的 options 参数中,correctLevel 变更为 errorCorrectLevel

查看更多

uQRCode

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

本示例项目中的自定义组件旨在抛砖引玉,有其他需求的朋友可自行扩展,自定义组件参考 /components/uni-qrcode/uni-qrcode.vue ,自定义组件使用案例参考 /pages/component/qrcode/qrcode.vue

联系方式:QQ540000228。

最近一次用于更新代码的 HBuilder X 版本为 2.8.3。

二维码

什么是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

使用方式

script 中引用组件

import uQRCode from '@/common/uqrcode.js'

template 中创建 <canvas/>

<canvas canvas-id="qrcode" style="width: 354px;height: 354px;" />

script 中调用 make() 方法

export default {
  methods: {
    make() {
      uQRCode.make({
        canvasId: 'qrcode',
        componentInstance: this,
        text: 'uQRCode',
        size: 354,
        margin: 10,
        backgroundColor: '#ffffff',
        foregroundColor: '#000000',
        fileType: 'jpg',
        correctLevel: uQRCode.errorCorrectLevel.H,
        success: res => {
          console.log(res)
        }
      })
    }
  }
}

属性说明

属性名 说明
errorCorrectLevel 纠错等级,包含 errorCorrectLevel.LerrorCorrectLevel.MerrorCorrectLevel.QerrorCorrectLevel.H 四个级别,L: 最大 7% 的错误能够被纠正;M: 最大 15% 的错误能够被纠正;Q: 最大 25% 的错误能够被纠正;H: 最大 30% 的错误能够被纠正。
defaults 二维码生成参数的默认值。

方法说明

方法名 说明
make 生成二维码。

make(options)

生成二维码

options参数说明:

参数 类型 必填 说明
canvasId String 画布标识,传入 <canvas/>canvas-id
componentInstance Object 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id<canvas/> ,如果省略,则不在任何自定义组件内查找
text String 二维码内容
size Number 画布尺寸大小,请与 <canvas/> 所设 widthheight 保持一致(默认:354
margin Number 边距,二维码实际尺寸会根据所设边距值进行缩放调整(默认:0
backgroundColor String 背景色,若设置为透明背景, fileType 需设置为 'png' , 然后设置背景色为 'rgba(255,255,255,0)' 即可(默认:'#ffffff'
foregroundColor String 前景色(默认:'#000000'
fileType String 输出图片的类型,只支持 'jpg''png'(默认:'png'
errorCorrectLevel Number 纠错等级,参考属性说明 errorCorrectLevel(默认:errorCorrectLevel.H

Tips

  • 示例项目中的图片采集于互联网,仅作为案例展示,不作为广告/商业,如有侵权,请告知删除。下载使用的用户,请勿把示例项目中的图片应用到你的项目。

隐私、权限声明

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

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

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

许可协议

MIT协议

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