uni_app中使用uQRcode生成二维码并保存到本地

#效果#

1.首先在插件市场引入uQRcode二维码生成插件，下载并导入到项目uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端 - DCloud 插件市场https://ext.dcloud.net.cn/plugin?id=1287

2.在项目中新建vue文件，代码如下

<template>
	<view class="code">
		<view class="uqrcode  flex flex-column justify-center  align-center">
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="businessData" :options="{ margin: 10}" :size="400"
				sizeUnit="rpx">
			</uqrcode>
			<button class="btn" @click="setAuth">保存图片</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				businessData: '',//二维码保存的数据
				
			}
		},
		onLoad: function(option) {
			this.businessData = option.item
		},
		methods: {
            //点击保存
			setAuth() {
				let that = this
                //获取用户设置
				uni.getSetting({
					success: res => {
                        //判断当前用户是否有相册权限
						if (res.authSetting['scope.writePhotosAlbum']) {
							console.log('有权限')
							that.save()
						} else {
                            //没有权限则向用户发起授权请求，
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.save()
								},
                                //拒绝授权后弹框提示用户打开权限，点击确定进入微信设置
								fail() {
									setTimeout(() => {
										uni.showModal({
											title: '提示',
											content: '请打开保存相册权限后点击保存图片！',
											success: res => {
												if (res.confirm) {
													console.log('用户点击确定');
													uni.openSetting()
												} else if (res.cancel) {
													console.log('用户点击取消');
												}
											}
										})
									}, 1000)
								}
							})
						}
					}
				})
			},
			//调用保存
			save() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code {
		width: 100vw;
		height: 100vh;

		.uqrcode {
			margin-top: 200rpx;

			.info {
				font-size: 40rpx;
				font-weight: bold;
				line-height: 100rpx;
			}
		}

		.btn {
			width: 400rpx;
			margin-top: 40rpx;
			background-color: #3c9cff;
			color: #fff;
		}
	}
</style>

***说明：

*不建议在二维码中存储太多数据，数据过多会造成二维码扫不出来

*根据微信开发者文档的要求，openSetting()无法在回调中执行，调整后“打开小程序设置页”只支持主动触发

方法一：

<button open-type="openSetting" bindopensetting="callback">打开设置页</button>

方法二：

通过点击行为触发opensertting(),我这里是通过uni.showModal()点击触发的打开设置页面

关于二维码的一些具体配置可以查看官方文档------------》 uQRCode 中文文档