1.生成二维码

​生成二维码使用的插件:

Meet-UI


插件安装官网有很多方式,下面介绍我使用的一种方式

使用npm指令下载:

npm i @uni-ui/code-ui -save

在

pages.json

里面配置如下

"easycom": {
    "^w-(.*)": "@uni-ui/code-ui/components/w-$1/index.vue"//二维码条形码的配置
},

使用:


在模板中输入:

//ref 后续保存到相册会用到  options配置项  @press长按二维码回调函数
<w-qrcode ref="qrcode" :options="options" @press="longtap"></w-qrcode>

data中书写

	options: {
					code: '这是你生成二维码的值', // 生成二维码的值
					size: 460, // 460代表生成的二维码的宽高均为460rpx
					img: { // 二维码log配置 非必传
						src: '/static/logo.png', // 图片地址
						size: 60, // 图片大小
						degree: 15, // 圆角大小 如果type为round生效
						type: 'round', //图片展示类型 默认none 可选值  round圆角  circle圆 如果为round 可以传入degree设置圆角大小 默认 5
						color: '#ffffff', //图片周围的白色边框
						width: 8 //图片周围白色边框的宽度 默认5
					},
				},

这时就二维码就可以展示出来了

2.长按二维码保存到手机

async longtap(e) {
				//因qrcode.GetCodeImg是异步操作所以使用async await等待执行
				const res = await this.$refs.qrcode.GetCodeImg()
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: function() {
						uni.showToast({
							title: '保存成功，请从相册选择再分享',
							icon: "none",
							duration: 2000
						})
					}
				})
			},

3.扫描二维码

	// 扫描二维码api
			qrcodeQuery() {
				uni.showModal({
					title: '扫描二维码查看记录',
					success: res => {
						if (res.confirm) {
							uni.scanCode({
								onlyFromCamera: false,//设置false,可以从相册中选择,也可以相机扫描
								scanType: ['qrCode'],//类型扫描二维码
								success: res => {
									//二维码的值
									console.log(res.result);
								},
								fail: err => {
									//用户进入到扫描界面如果未扫描会进入失败回调
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

​