当前位置:   article > 正文

uniapp小程序---二维码(生成、保存)_uniapp 生成二维码

uniapp 生成二维码

uQRCode

JS库介绍

uniapp中生成二维码这里推荐使用uQRCode,uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用。
同时uQRCode可扩展性高,它支持自定义渲染二维码,可通过uQRCode API得到二维码绘制关键信息后,使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。

uQRCode官方中文文档

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

代码如下:

安装

// npm安装
npm install uqrcodejs -s
  • 1
  • 2

HTML

<!-- html -->
<template>
	<canvas canvas-id="qrcode" ref="qrcode" style="width: 150px; height: 150px;" />
</template>
  • 1
  • 2
  • 3
  • 4

JS

// npm安装
<script>
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs

methods: {
	// 这里我才用点击事件来主动触发保存二维码
	// 在开发者工具中使用测试时,触发此方法会打开一个另存为的系统窗口
	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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

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

uni.canvasToTempFilePath(object, component)
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/176784?site
推荐阅读
相关标签
  

闽ICP备14008679号