下载uqrcode.js文件
https://download.csdn.net/download/weixin_46162592/88215531?spm=1001.2014.3001.5503
下载好后,将文件夹放置common文件中,这个放置位置看你们自己需求,一般是common里面。
import uQRCode from '@/common/uqrcode.js'
html
<template>
<view>
<canvas canvas-id="qrcode":style="{width:qrWidth+'px',height:qrWidth+'px'}"></canvas>
</view>
</template>
<script>
import uQRCode from '@/common/uqrcode.js'
export default {
onl oad() {
// 获取手机屏幕大小
uni.getSystemInfo({
success: (res)=> {
if(res.windowWidth<375) {
this.qrWidth = 175
} else {
this.qrWidth = res.windowWidth / 1.8
}
}
});
this.QRurl = 'https://mp.csdn.net'
this.qrFun(this.QRurl)
},
data() {
return {
QRurl: '',
qrWidth:0
}
},
methods: {
qrFun(text) {
uQRCode.make({
canvasId: 'qrcode', // 必须与上面canvas-id="qrcode"值一致
componentInstance: this, // 组件实例
text: text, // 二维码内容
size: this.qrWidth, // 单位px,做了手机适配
margin: 0,
backgroundColor: '#ffffff', //背景颜色
foregroundColor: '#000000', // 前景颜色
fileType: 'jpg', // 二维码图片类型
errorCorrectLevel: uQRCode.errorCorrectLevel.H, // 容错级别
success: res => {
// 生成二维码成功后的操作
// ...
}
})
}
}
}
</script>