全端二维码生成插件

安装

# npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js

引入

• 通过import引入。

// npm安装
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js

• Node.js通过require引入

// npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js

简单用法

uQRCode基于Canvas API封装了一套方法，建议开发者使用canvas生成，一键调用，非常方便。以下是示例：

• HTML示例

//html部分
<canvas id="qrcode" width="200" height="200"></canvas>

//js部分
/ 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas元素
var canvas = document.getElementById("qrcode");
// 获取canvas上下文
var canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();

• uni-app示例

//Template部分
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>

//js部分
onReady() {
  // 获取uQRCode实例
  var qr = new UQRCode();
  // 设置二维码内容
  qr.data = "https://uqrcode.cn/doc";
  // 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = 200;
  // 调用制作二维码方法
  qr.make();
  // 获取canvas上下文
  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
  // 设置uQRCode实例的canvas上下文
  qr.canvasContext = canvasContext;
  // 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas();
}

• 微信小程序，建议使用Canvas 2D，关于Canvas 2D的使用请参考微信开放文档

导出临时文件路径

• uni-app

// 通过uni.createCanvasContext方式创建绘制上下文的，对应导出API为uni.canvasToTempFilePath
// 调用完ctx.draw()方法后不能第一时间导出，否则会异常，需要有一定的延时
setTimeout(() => {
    uni.canvasToTempFilePath(
        {
            canvasId: this.canvasId,
            fileType: this.fileType,
            width: this.canvasWidth,
            height: this.canvasHeight,
            success: res => {
                console.log(res);
            },
            fail: err => {
                console.log(err);
            }
        }, 
        // this // 组件内使用必传当前实例
    );
}, 300);

• Canvas2D

// 得到base64
console.log(canvas.toDataURL());
// 得到buffer
console.log(canvas.toBuffer());

保存二维码到本地相册

必须在导出临时文件路径以后成功后再执行保存。uni-app通用保存方式（H5除外）

uni.saveImageToPhotosAlbum({
    filePath: tempFilePath,
    success: res => {
        console.log(res);
    },
    fail: err => {
        console.log(err);
    }
});

H5可以通过设置标签href属性的方式进行保存：

const aEle = document.createElement('a');
aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
aEle.href = tempFilePath;
document.body.appendChild(aEle);
aEle.click();
aEle.remove(); // 下载之后把创建的元素删除

经过测试，PC端浏览器可以下载，部分安卓自带或第三方浏览器可以下载，安卓微信浏览器不适用，移动端iOS所有浏览器均不适用，差异较大，还是推荐各位导出文件给图片组件显示，然后提示用户通过长按图片进行保存这种方式

uni-app组件方式

移步插件市场----- uniapp二维码组件
官方文档 ----- 二维码官方文档