uniapp生成二维码

# uQRCode **点击群号加入群聊【uQRCode交流群】：[695070434](https://jq.qq.com/?_wv=1027&k=JRjzDqiw)** uQRCode 生成方式简单，可扩展性高，适用所有前端应用和Node.js服务端，可运行到所有支持canvas的平台。支持NVUE（NVUE中使用GCanvas）。 支持自定义二维码渲染规则，可通过uQRCode API得到矩阵信息后，自行实现canvas或view+css渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等，详情参考示例项目。 ### 插件市场 [https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287) ### github [https://github.com/Sansnn/uQRCode](https://github.com/Sansnn/uQRCode) ### npm [https://www.npmjs.com/package/u-qrcode](https://www.npmjs.com/package/u-qrcode) ### 示例预览 [https://static-c15f4b57-ef97-4d2b-b939-f580f910d7e2.bspapp.com](https://static-c15f4b57-ef97-4d2b-b939-f580f910d7e2.bspapp.com) ### 二维码 **什么是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) ### 组件使用 导入`u-qrcode`组件后，在 `template` 中创建 `<u-qrcode/>` 组件 ```html <u-qrcode ref="qrcode" canvas-id="qrcode" value="uQRCode"></u-qrcode> ``` ### 属性说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |canvasId |String |- |- |是 |组件标识/canvasId | |value |String |- |- |是 |二维码内容 | |size |Number |- |354 |否 |二维码大小，默认单位px，rpx需要使用uni.upx2px()转换| |options |Object |- |- |否 |参数可选项，详见下方options说明 | ### 事件说明 |事件名 |参数 |返回值 |说明 | |--- |--- |--- |:--- | |click |- |void |点击事件 | |complete |- |Object |生成完成事件，返回值success: true表示生成成功，false生成失败 | ### 方法说明 |方法名 |参数 |返回值 |说明 | |--- |--- |--- |:--- | |remake |- |void |重新生成 | |toTempFilePath |Object:callback|void |导出临时路径 | |save |Object:callback|void |保存 | #### options说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |typeNumber |Number |- |-1 |否 |二维码版本 | |errorCorrectLevel |String/Number|L/M/Q/H/1/0/3/2|H |否 |纠错等级L/M/Q/H分别对应1/0/3/2 | |useDynamicSize |Boolean |- |false |否 |是否使用动态尺寸，可以去除二维码小块白色细线 | |margin |Number |- |0 |否 |填充边距，默认单位px | |background |Object |- |- |否 |背景设置，详见下方options.background说明 | |foreground |Object |- |- |否 |前景设置，详见下方options.foreground说明 | |positionDetection |Object |- |- |否 |定位角设置，详见下方options.positionDetection说明 | |separator |Object |- |- |否 |分割图案设置，详见下方options.separator说明 | |alignment |Object |- |- |否 |对齐图案设置，详见下方options.alignment说明 | |timing |Object |- |- |否 |时序图案设置，详见下方options.timing说明 | |darkBlock |Object |- |- |否 |暗块设置，详见下方options.darkBlock说明 | |versionInformation |Object |- |- |否 |版本信息设置，详见下方options.versionInformation说明 | #### options.background说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |color |String |- |#FFFFFF|否 |背景色，若需要透明背景可设置为rgba(0,0,0,0)| |image |Object |- |- |否 |背景图片设置，详见下方options.background.image说明| #### options.background.image说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |src |String |- |- |否 |背景图片路径 | |width |Number |- |1 |否 |指定背景图片宽度，1为二维码size的100% | |height |Number |- |1 |否 |指定背景图片高度，1为二维码size的100% | |align |Array<String>|['left'/'center'/'right', 'top'/'center'/'bottom'] |['center', 'center'] |否 |指定背景图片对齐方式，[0]为水平方位，[1]为垂直方位 | |anchor |Array<Number>|- |[0, 0] |否 |指定背景图片锚点，[0]为X轴偏移量，[1]为Y轴偏移量 | |alpha |Number |0-1 |1 |否 |指定背景图片透明度 | #### options.foreground说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |color |String |- |#FFFFFF|否 |前景色 | |image |Object |- |- |否 |前景图片设置，详见下方options.foreground.image说明 | #### options.foreground.image说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |src |String |- |- |否 |前景图片路径 | |width |Number |- |1/4 |否 |指定前景图片宽度，1为二维码size的100% | |height |Number |- |1/4 |否 |指定前景图片高度，1为二维码size的100% | |align |Array<String>|['left'/'center'/'right', 'top'/'center'/'bottom'] |['center', 'center'] |否 |指定前景图片对齐方式，[0]为水平方位，[1]为垂直方位 | |anchor |Array<Number>|- |[0, 0] |否 |指定前景图片锚点，[0]为X轴偏移量，[1]为Y轴偏移量 | #### options.positionDetection说明 |属性名 |类型 |可选值 |默认值 |是否必填 |说明 | |--- |--- |--- |--- |--- |:--- | |backgroundColor|String |- |options.background.color |否 |定位角区域背景色，默认值跟随背景色 | |foregroundColor|String |- |options.foreground.color |否 |定位角小块颜色，默认值�