完整示例:
<template>
<view>
<view class="titleBar">
执法检查“通行码”信息
</view>
<view class="twoCode">
<canvas canvas-id="qrcode"></canvas>
</view>
</view>
</template>
<script>
import UQrcode from '@/pages/common/uqrcode.js'
export default {
onLoad() {
this.QRurl = 'https://mp.csdn.net'
this.qrFun(this.QRurl)
},
data() {
return {
qrcodeData: '', // 存储二维码图片的 Base64 编码
QRurl: '',
qrWidth: 0
}
},
created() {
// this.getCode()
},
mounted() {
// this.generateQRCode('https://www.example.com'); // 生成二维码
},
methods: {
qrFun: function(text) {
UQrcode.make({
canvasId: 'qrcode', //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
componentInstance: this, // 当前页面的this,需要传递过去
text: text, //需要转成二维码的内容是后端传过来的,我这里是onLoad传过来的,根 据自己的需要
size: 200, // // 二维码的大小,单位是px
margin: 0, // 二维码的边距,如果设置为0就无边距
backgroundColor: '#ffffff', // 二维码的背景色
foregroundColor: '#000000', // 二维码的前景色,即二维码图案的颜色
fileType: 'jpg', // 生成的二维码图片格式
errorCorrectLevel: UQrcode.errorCorrectLevel.H, // 二维码的错误纠正级别,H为最高级别
// 成功生成二维码的回调函数
success: res => {
// 在这里可以获取生成的二维码图片
}
})
}
},
}
</script>
<style lang="scss">
page {
background-color: #eaf0f6;
padding-top: 20px;
}
.titleBar {
width: 90%;
height: 50px;
line-height: 50px;
margin-top: 50px;
background-image: url("../static/images/gra-linear.png");
background-size: 100% 50px;
margin: 0 auto;
border: 1px solid #C1D6E6;
text-align: center;
font-size: 25px;
}
.twoCode {
width: 90%;
height: 300px;
// line-height: 50px;
border: 1px solid #C1D6E6;
margin: 0 auto;
display: flex;
align-items: center;
/* 画布上下居中 */
justify-content: center;
/* 画布左右居中 */
background-color: #fff;
}
/* 画布样式 */
.twoCode canvas {
width: 200px;
height: 200px;
// background-color: red;
}
.topBar {
height: 50px;
width: 100%;
background-image: url("../static/images/header-bg.png");
background-repeat: repeat-x;
display: flex;
align-items: center;
/* 上下居中 */
justify-content: center;
/* 左右居中 */
}
.topBar img {
margin-top: 5px;
height: 40px;
width: auto;
}
</style>
记得在@/pages/common/uqrcode.js文件夹下放入uqrode.js文件,请到网上下载。