一般做移动端项目时,总会遇到生成海报,在海报中显示二维码。今天正好遇到就记录下。
第一步 安装依赖
npm install qrcodejs2 --save
第二步 页面引用
import QRCode from 'qrcodejs2';
components: {
QRCode
},
第三步 view标签使用
<div class="codeImg" ref="qrCodeUrl"></div>
注:在uniapp中一般都是使用view标签,但是这时候就要用div标签了,不然页面中二维码不显示。
第四步 js
mounted() {
this.createQrcode()
},
methods:{
createQrcode() {
var that = this
setTimeout(() => {
var qrcode = new QRCode(that.$refs.qrCodeUrl, {
text: 'http://csss-epc.net/#/pages/review/index', // 需要转换为二维码的内容也可以是链接
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff' ,
})
}, 0)
},
}
以上四步就能实现在uniapp中生成二维码了,稍晚点会把在uniapp中使用html2canvas将页面生成base64图片整理出来。还在搬砖,就简单写到这里了。