uQRCode
JS库介绍
uniapp中生成二维码这里推荐使用uQRCode
,uQRCode是一款基于Javascript环境
开发的二维码生成插件,适用所有Javascript运行环境
的前端应用和Node.js应用。
同时uQRCode可扩展性高
,它支持自定义渲染二维码
,可通过uQRCode API得到二维码绘制关键信息后,使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。
uQRCode官方中文文档
uqrcode使用的方式很多,这里我就以我在实际业务中使用的方式来做演示
代码如下:
安装
// npm安装npm install uqrcodejs -s
HTML
<!-- html --><template> <canvas canvas-id="qrcode" ref="qrcode" style="width: 150px; height: 150px;" /></template>
JS
// npm安装<script>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();}</script>
到这里简单的二维码生成与保存的功能就完成了,文中获取临时文件路径
与保存图片
涉及到的API,可以去看官方的文档,很详细。
uni.canvasToTempFilePath(object, component)
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。