一、装依赖包
npm i qrcodejs2 --save //二维码的依赖包
二、整体代码如下
<template>
<div class="page-content">
<div class="topimg img">
<img src="@/assets/en_images/hz1.jpg" alt="展览会">
</div>
<div class="main2_pd img">
<img src="@/assets/en_images/hz2.jpg" alt="展览会">
<div class="render_en">
<div class="page-ewm-jq qrcode" ref="qrCodeUrl"></div>
</div>
<div class="username">({{ uname }})</div>
</div>
<div class="img">
<img src="@/assets/en_images/hz33.jpg" alt="展览会"/>
</div>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
props:['showchinese','openid'],
data() {
return {
uname: "SenleoT",
qrcodeText:"hello 大家好",
code:'',
show: false,
userid:'',
};
},
methods:{
// 生成二维码
creatQrCode() {
let a = new QRCode(
this.$refs.qrCodeUrl,
{
text: this.qrcodeText, // 需要转换为二维码的内容
width: 150,
height: 150,
colorDark: "black", //#000000为黑色
colorLight: "white",
});
// console.log("二维码:", a);
},
// 重组url分享链接
funcUrlDel(){
let myurl = `https://xxx.com/html/M52/dist/#/home?ly=${this.$route.query.ly}&fcode=${this.$route.query.fcode}`;
return myurl
},
},
created(){
// 获取提交过来的二维码
this.uname = this.$route.query.name;
this.qrcodeText = this.$route.query.qrcode;
},
mounted() {
this.$nextTick(()=>{
this.creatQrCode();
this.getShareInfo(); // 调用分享的事件
//生成的二维码自适应大小
this.$refs.qrCodeUrl.getElementsByTagName('img')[0].style.width = '100%'
this.$refs.qrCodeUrl.getElementsByTagName('img')[0].style.height = '100%'
})
},
};
</script>
<style scoped>
@import "@/assets/css/huizhi.css?v=1.2";
.main2_pd {
font-size: 0.28rem;
position: relative;
}
.render_en{
position: absolute;
top: 1.2rem;
left: 2.16rem;
width: 3.2rem;
height: 3.2rem;
}
.render_en .page-ewm-jq,
.render_en .page-ewm-jq canvas{
width: 100%;
height: 100%;
}
.main2_pd .username {
position: absolute;
text-align: center;
width: 100%;
left: 0;
top: 4.6rem;
font-size: 0.39rem;
padding: 0 20px;
}
</style>
三、qrcodejs2存在的问题
qrcodejs2在安卓机上生成二维码有问题,例如有的是生成不出来,有的生成位置不对。原因是
qrcodejs2 内获取安卓版本方法无法兼容9以上的版本。
解决方法:找到qrcodejs2的依赖包中qrcode.js文件,修改match内匹配规则为: /android ([0-9]+\.?[0-9]?)/i
// android 2.x doesn't support Data-URI spec function _getAndroid() { var android = false; var sAgent = navigator.userAgent; if (/android/i.test(sAgent)) { // android android = true; // 注释是原来的 // var aMat = sAgent.toString().match(/android ([0-9]\.[0-9])/i); // 修改成下方的 var aMat = sAgent.toString().match(/android ([0-9]+\.?[0-9]?)/i); if (aMat && aMat[1]) { android = parseFloat(aMat[1]); } } return android; }