uniapp开发微信小程序使用uQrcode组件生成自定义二维码
uniapp开发微信小程序使用uQrcode组件生成自定义二维码
·
1.下载插件:https://ext.dcloud.net.cn/plugin?id=1287
2.uqrcode中文文档:https://uqrcode.cn/doc/document/native.html
更多配置项请参考上述文档
3.我的做完是这样的。logo圆角居中
4.下面附上代码:
HTML:
<uQrcode ref="code" canvas-id="code" :value="text" :size="size"
:options="{
foregroundImageSrc: '/static/logo-yilian.png',//logo
foregroundImageWidth: size / 3,//logo宽
foregroundImageHeight: size / 3,//logo高
foregroundImageBorderRadius:35,//logo圆角
backgroundImageSrc :'/static/mycenter/main_back.png',//背景图片
margin:15,//二维码外边距
backgroundPadding:10,//二维码内边距
areaColor: 'rgba(25, 147, 227, 0.5)',//二维码绘制区域颜色、底部背景色
foregroundColor: 'rgba(25, 147, 227, 0.5)',//二维码前景色
}"
@click="remake" @complete="complete($event)">
</uQrcode>
<u-button class="gojoin" @click="save('code')">保存到手机</u-button>
JS:
//引入uQrcode 组件。
import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
export default {
data() {
return {
text: 'uQRCode',//二维码的值
size: 180//二维码尺寸
}
},
components: {
uQrcode
},
methods: {
complete(e) {
if (e.success) {
console.log('生成成功');
} else {
console.log('生成失败');
}
},
//刷新二维码
remake() {
const ref = this.$refs['code'];
ref.remake();
},
//保存到手机
save() {
uni.showLoading({
title: '保存中',
mask: true
});
const ref = this.$refs['code'];
ref.save({
success: res => {
uni.hideLoading();
uni.showToast({
icon: 'success',
title: '保存成功'
});
},
fail: err => {
uni.showToast({
icon: 'none',
title: JSON.stringify(err)
});
}
});
}
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)