uniapp H5 根据返回的链接生成二维码并点击保存

插件市场导入uv-qrcode插件

uv-qrcode插件市场链接：https://ext.dcloud.net.cn/plugin?id=12479

引入

import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';

hetm 核心代码

<uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx" :loading="loading":options="options"></uv-qrcode>

1.carvas-id:唯一的id值，可以用于获取元素

2.value:二维码的内容

3.size:二维码的大小，可以支持数值和字符串，字符串的话支持px和rpx，由于我此处是uniapp，因此写成字符串的rpx单位

4.loading:加载中，可以在生成二维码时展示加载中的效果

5.options:配置内容，包含边框 背景颜色 前景logo等

html

options配置文档

https://uqrcode.cn/doc/document/native.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE

关键代码

????????options: {

????????????????useDynamicSize: false,

????????????????errorCorrectLevel: 'Q',

????????????????margin: 10,

????????????????areaColor: "#fff",

? ? ? ? ? ? ? // foregroundImageSrc: require('static/image/logo.png')??指定二维码前景，一般可在中间放logo

},

options:配置内容

生成二维码

this.value = "后端返回的地址";

this.$nextTick(() => {

????????this.$refs.qrcode.remake({

????????????????success: () => {

????????????????console.log('生成成功');

? ? ? ? ? ? ? ? ?},

????????????fail: err => {console.log(err)}

});})

点击下载

关键代码

saveVode(){

this.$refs.qrcode.toTempFilePath({

????????success: res => {

????????????????const aEle = document.createElement('a');

????????????????aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'

????????????????aEle.href = res.tempFilePath;

????????????????document.body.appendChild(aEle);

????????????????aEle.click();

????????????????aEle.remove(); // 下载之后把创建的元素删除

????????????????}

????????});

}