本文出自：https://www.cnblogs.com/2186009311CFF/p/14261604.html
uniapp 生成二维码插件：https://ext.dcloud.net.cn/plugin?id=3870
公司的二维码链接有加密，原先的uniapp是生成二维码的插件，扫码反应太慢，故在网上搜索，整理此插件。
<template>
<view>
<view style="margin-top: 26upx;margin: 40upx;">
<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" />
</view>
</view>
</template>
<script>
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
export default {
components: {
ayQrcode,
},
data() {
return {
//二维码相关参数
modal_qr: false,
url: ‘https://pixabay.com/images/search/?order=ec‘, // 要生成的二维码值
}
},
onLoad() {
let that = this;
that.showQrcode();//一加载生成二维码
},
methods: {
// 展示二维码
showQrcode() {
let _this = this;
this.modal_qr = true;
// uni.showLoading()
setTimeout(function() {
// uni.hideLoading()
_this.$refs.qrcode.couponQrCode()
}, 50)
},
//传入组件的方法
hideQrcode() {
this.modal_qr = false;
},
}
}
</script>
<style lang="scss">
</style>
所需的js文件，请在插件链接获取：https://ext.dcloud.net.cn/plugin?id=3870
<template>
<view :class="modal?‘show‘:‘hide‘">
<canvas class="canvas" style="width: 550rpx;height: 550rpx;" canvas-id="couponQrcode"></canvas>
</view>
</template>
<script>
const qrCode = require(‘./weapp-qrcode.js‘)
export default {
data() {
return {
show: true
}
},
props: {
modal: {
type: Boolean,
default: false
},
url: {
type: String,
default: ‘‘
}
},
methods: {
// 展示二维码
// showQrcode(){
// this.modal=true;
// let ID=uni.getStorageSync(‘userInfo‘).id;
// let url="https://www.ttlwl.cn/appDownload.html?shareUserId="+ID;
// this.couponQrCode(url);
// },
hideQrcode() {
// this.modal=false;
this.$emit("hideQrcode")
},
// 二维码生成工具
couponQrCode() {
let _this = this;
new qrCode(‘couponQrcode‘, {
text: this.url,
width: 260,
height: 260,
colorDark: "#333333",
colorLight: "#FFFFFF",
correctLevel: qrCode.CorrectLevel.H
})
}
},
mounted() {}
}
</script>
<style scoped lang="scss">
.qrcode-box {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
background-color: rgba(59, 59, 59, 0.6);
// opacity: 0.8;
text-align: center;
display: flex;
align-items: center;
display: none;
.qrcode-item {
flex: 1;
position: relative;
text-align: center;
.item-box {
width: 90%;
margin: auto;
display: inline-block;
margin-top: 30%;
padding-bottom: 30rpx;
// animation: show 0.7s;
.title {
font-size: 46rpx;
text-align: center;
margin-bottom: 24rpx;
}
.canvas {
margin: auto;
display: inline-block;
margin: auto;
}
background-color: #FFFFFF;
}
}
}
.opacity {
opacity: 0;
display: block;
}
.show {
display: block;
animation: fade 0.7s;
// -moz-animation: fade 0.5s; /* Firefox */
// -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
// -o-animation: fade 0.5s;
}
.hide {
animation: hide 0.7s;
}
@keyframes fade {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>