uniapp 小程序二维码生成插件

uniapp yekong

uniapp 微信小程序需要生成二维码,所以找了一个二维码生成插件。
插件地址

使用代码

<template>
  <view>
    <uqrcode v-if="getshow" size="320" class="uqrcode3" ref="uQRCodes" :text="text" />
    <image :src="tempFilePath" class="qrcodes2"></image>
  </view>
</template>
export default {
    data() {
    	return {
    		show: false,
    		getshow: true,
    		active: 0,
    		tempFilePath: '',
    		text: '',
    	}
    },
  methods: {
    refresh() {
    	var that = this;
    	that.text = this.gettext()
    	that.$forceUpdate()
    	that.getshow = false
    	that.$nextTick(() => {
    		that.getshow = true
    		setTimeout(() => {
    			that.$refs.uQRCodes.toTempFilePath({
    				success: res => {
    					console.log(res);
    					that.tempFilePath = res.tempFilePath
    				}
    			});
    		}, 200)
    	})
    },
  }
}

控制大小

<uqrcode size="150" class="uqrcode" ref="uQRCode" text="uQRCode 3.0" />

设置模式

微信小程序因为canvas的层级太高,所以这里不用canvas模式,可以设置为view模式
mode 有两种模式 canvas 和 view

<uqrcode mode='view' size="150" class="uqrcode" ref="uQRCodes" :text="text" />

导出临时文件路径

// uqrcode为组件的ref名称
refresh() {
	var that = this;
	this.$refs.uQRCodes.toTempFilePath({
		success: res => {
			console.log(res);
			that.tempFilePath = res.tempFilePath
		}
	});
},

保存二维码到本地相册

// uqrcode为组件的ref名称
this.$refs.uqrcode.save({
  success: () => {
    uni.showToast({
      icon: 'success',
      title: '保存成功'
    });
  }
});

css

.uqrcode3 {
	position: fixed;
	left: -10000;
	top: -10000;
}
喜欢