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;
}