uniapp小程序---二维码（生成、保存）

uQRCode

JS库介绍

uniapp中生成二维码这里推荐使用uQRCode，uQRCode是一款基于Javascript环境开发的二维码生成插件，适用所有Javascript运行环境的前端应用和Node.js应用。

同时uQRCode可扩展性高，它支持自定义渲染二维码，可通过uQRCode API得到二维码绘制关键信息后，使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。

uQRCode官方中文文档

uqrcode使用的方式很多，这里我就以我在实际业务中使用的方式来做演示

代码如下：

安装

// npm安装npm install uqrcodejs -s

HTML

JS

// npm安装import UQRCode from 'uqrcodejs'; // npm install uqrcodejsmethods: {// 这里我才用点击事件来主动触发保存二维码// 在开发者工具中使用测试时，触发此方法会打开一个另存为的系统窗口savecode(){setTimeout(()=>{//在draw方法调用之后，为了避免出现异常，所以采用定时器uni.canvasToTempFilePath({// 这里保存图片使用uniapp官方的方法，先获取文件临时路径canvasId: 'canvas标签的canvas-id值',fileType: '保存下来图片的格式',width: '保存下来图片的宽度',height: '保存下来图片的高度',success: res => {console.log(res) //返回字段tempFilePath就是文件的临时文件路径// 获取文件的临时路径之后结合saveImageToPhotosAlbu方法就可以把二维码保存到相册中uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success:res=>{uni.showToast({title:'保存成功',icon:'success'})},fail: err => {console.log(err);}})},fail: err => {console.log(err);}})},1000)}},// 由于业务原因我选择在页面初次渲染进行绘制onReady: function() {// 需要注意的是该方法的尺寸单位默认为px可以使用// 获取uQRCode实例var qr = new UQRCode();// 设置二维码内容qr.data = '填入需要加入二维码的内容';// 设置二维码大小，必须与canvas设置的宽高一致qr.size = '指定大小时，要与canvas中的宽高一致';// 指定二维码的边距qr.margin = '二维码的外边距大小';// 提升二维码美观度，如果关闭的话二维码中会有很明显的白色线条qr.useDynamicSize = true;// 调用制作二维码方法qr.make();// 获取canvas上下文var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入// // 设置uQRCode实例的canvas上下文qr.canvasContext = canvasContext;// 调用绘制方法将二维码图案绘制到canvas上qr.drawCanvas();}

到这里简单的二维码生成与保存的功能就完成了，文中获取临时文件路径与保存图片涉及到的API，可以去看官方的文档，很详细。

uni.canvasToTempFilePath(object, component)

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径

uni.saveImageToPhotosAlbum(OBJECT)

保存图片到系统相册。