# uQRCode uQRCode 生成方式简单,可扩展性高,如有复杂需求可通过自定义组件或修改源码完成需求。已测试H5、微信小程序、iPhoneXsMax真机。 支持自定义二维码渲染规则,可通过 ``getModules`` 方法得到矩阵信息后,自行实现canvas渲染二维码,如随机颜色、圆点、方块、块与块之间的间距等,详情见示例中的 ``custom``。 支持nvue生成,但暂不支持保存。 ### 二维码 **什么是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](https://blog.csdn.net/jason_ldh/article/details/11801355) ### 简单使用 在 ``template`` 中创建 ```` 并设置 ``ref`` 属性 ```html ``` 在 ``script`` 中调用生成方法 ```javascript export default { onReady() { this.$refs .uqrcode .make({ size: 354, text: 'uQRCode' }) .then(res => { // 返回的res与uni.canvasToTempFilePath返回一致 console.log(res) }) } } ``` ### 高级使用 在 ``template`` 中创建 ```` 并设置 ``id``,画布宽高 ```html ``` 在 ``script`` 中引用js文件并调用生成方法 ```javascript import uQRCode from '@/components/uqrcode/common/uqrcode.js' export default { onReady() { uQRCode.make({ canvasId: 'qrcode', componentInstance: this, size: 354, margin: 10, text: 'uQRCode', backgroundColor: '#ffffff', foregroundColor: '#ff0000', fileType: 'png', errorCorrectLevel: uQRCode.errorCorrectLevel.H }) .then(res => { console.log(res) }) } } ``` ### 属性说明 |属性名|说明| |---|:---| |errorCorrectLevel|纠错等级,包含 `errorCorrectLevel.L`、`errorCorrectLevel.M`、`errorCorrectLevel.Q`、`errorCorrectLevel.H` 四个级别,`L`: 最大 7% 的错误能够被纠正;`M`: 最大 15% 的错误能够被纠正;`Q`: 最大 25% 的错误能够被纠正;`H`: 最大 30% 的错误能够被纠正。| |defaults|二维码生成参数的默认值。| ### 方法说明 |方法名|说明| |---|:---| |[make](#makeoptions)|生成二维码。| |[getModules](#getModulesoptions)|可以得到二维码矩阵信息,可根据返回的矩阵信息自行实现二维码生成。| ### make(options) 生成二维码 **options参数说明:** |参数|类型|必填|说明| |---|---|---|:---| |canvasId|String|是|画布标识,传入 `` 的 `canvas-id`| |componentInstance|Object|否|自定义组件实例 `this` ,表示在这个自定义组件下查找拥有 `canvas-id` 的 `` ,如果省略,则不在任何自定义组件内查找| |text|String|是|二维码内容| |size|Number|否|画布尺寸大小,请与 `` 所设 `width` , `height` 保持一致(默认:`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`)| |enableDelay|Boolen|否|启用延迟绘制(默认:`false`)| ### getModules(options) 根据内容得到二维码矩阵信息 |参数|类型|必填|说明| |---|---|---|:---| |text|String|是|二维码内容| |errorCorrectLevel|Number|否|纠错等级,参考属性说明 `errorCorrectLevel`(默认:`errorCorrectLevel.H`)| ### 使用建议 如需在进入页面时生成二维码,建议使用`onReady`,不推荐在`onLoad`中生成。 关于高级使用:canvas在二维码生成中请当做一个生成工具来看待,它的作用仅是绘制出二维码。应把生成回调得到的资源保存并使用,显示用image图片组件,原因是方便操作,例如调整大小,或是H5端长按保存或识别,所以canvas应将它放在看不见的地方。不能用`display:none;overflow:hidden;`隐藏,否则生成空白。这里推荐canvas的隐藏样式代码 ```html ``` ### 常见问题 **二维码生成不完整** size的单位是px,请尽量避免使用rpx,如果canvas的单位是rpx,那么不同设备屏幕分辨率不一样,rpx转换成px后的画布尺寸不足以放下全部内容,实际绘制图案超出,就会出现不完整或者没有填充完整画布的情况。 另外还可以尝试延迟绘制,``enableDelay`` 设置为 ``true``。 **如何扫码跳转指定网页** text参数直接放入完整的网页地址即可,例如:`https://ext.dcloud.net.cn/plugin?id=1287`。微信客户端不能是ip地址。 **H5长按识别** canvas无法长按识别,长按识别需要是图片才行,所以只需将回调过来的资源用image组件显示即可。 ### Tips - 示例项目中的图片采集于互联网,仅作为案例展示,不作为广告/商业,如有侵权,请告知删除。下载使用的用户,请勿把示例项目中的图片应用到你的项目。