vue 项目中自动生成二维码

最近在写一个vue项目，要求根据卡号可以自动生成一个二维码，并渲染在指定位置，因为第一次做类似业务，小编在网上找了找，发现了很多，具体起来主要用的就两种：

QRcode
vue-qr

vue-qr比QRcode功能多在可以在中间加logo，而且好像更方便一点，具体的小编也没试，小编需要的二维码不需要那么多骚操作，就选择了第一种，至于要写这篇博客的目的是为说一下，运用中遇到的问题及解决方法。

下面先介绍QRcode

vue里安装qrcodejs的npm包

npm install qrcodejs2  -save     -s  // 上线需要的包,打包的时候也会打包

页面引用

import QRCode from 'qrcodejs2'    //   直接在需要用的页面 写就行不需要注意路径问题

二维码展示的盒子

<div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>

methods: {creatQrCode() {var qrcode = new QRCode(this.$refs.qrCodeUrl, {  // 这里选择器也可以直接写 'qrcode' 用的是id选择器   指示不需要带 # 而已text: 'xxxx',  //  生成二维码的 内容width: 100,    //  宽   单位 pxheight: 100,   //  高   单位 px // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  // background: '#f0f'  // foreground: '#ff0'  correctLevel: QRCode.CorrectLevel.H   // 二维码容错 级别})}
},mounted() {this.creatQrCode(); // 这里会是一个重点，下面会解释}

点击下载二维码：

 // 点击下载app二维码downloadAppCodeImg (name) {var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')var a = document.createElement("a");var event = new MouseEvent("click"); // 创建一个单击事件a.href = canvasData[0].toDataURL("image/png");;a.download = "drcQrcode";a.dispatchEvent(event); // 触发a的单击事件},

好了，现在就可以了简单吧？当然这只是正常的情况，也是官网上介绍的用法，实际上，你会遇到一个错误例如：

### vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'appendChild' of null"### found in### ---> <Home> at src/script/view/home.vue###   <ScrollBar> at src/script/component/scroll_bar.vue###  <Frame> at src/script/component/frame.vue### <App> at src/script/App.vue### <Root>
### warn @ vue.runtime.esm.js?2b0e:619
### logError @ vue.runtime.esm.js?2b0e:1884
### globalHandleError @ vue.runtime.esm.js?2b0e:1879
### handleError @ vue.runtime.esm.js?2b0e:1839
### invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
### invoker @ vue.runtime.esm.js?2b0e:2179
### original._wrapper @ vue.runtime.esm.js?2b0e:6911
### vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'appendChild' of null### at new Drawing (qrcode.js?d044:370)### at new QRCode (qrcode.js?d044:579)### at VueComponent.creatQrCode (home.vue?afc8:120)### at VueComponent.dianJiZhanShi (home.vue?afc8:175)### at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)### at HTMLAnchorElement.invoker (vue.runtime.esm.js?2b0e:2179)### at HTMLAnchorElement.or

看到这个报错是不是第一印象就是 appendChild 未定义就使用了？所以我全局搜索发现没有这个字段；

接下来你仔细看发现它是定义在 qrcode.js 里面的，我怀疑是引入 js 造成的，所以我又手动引入一次把它相对的路径都写了进来，发现还是报错；思考之后又怀疑是生命周期函数的原因，因为 created 函数在 data 已有 DOM 还没有创建完成，可能会造成它找不到要插入的 DOM元素，所以我再次把函数调用放在了 mounted

函数里面，mounted 生命周期函数中页面已经渲染完成，DOM 节点也已经创建，应该是没问题的，结果还是报错；后来我干脆把它放在了methods 一个函数里面去调用，发现点击的时候还是报同样的错。我就意识到，是我有一部分没意识到，或者说给忽略了。我仔细研究后发现

// this.$nextTick (function () {//   this.creatQrCode();   //  这个函数 要在 this.$nextTick 里面调用   才不会报错// })

当然我这里还有点波折，我的HTML 元素也就是上面的

是在一个遮盖层的组件只能存在的，点击的时候才显示这个遮盖层，所以在生命周期函数里面，调用这个函数哪怕配合使用 this.$nextTick 调用也是不合适的。

希望我的经验能帮到你

nextTick 简单介绍

下面是我的代码关于二维码的这一部分

    <!-- 二维码遮盖层 --><div class="homeStyle"><van-popup v-model="show"><div class="qrcode" ref="qrCodeUrl" id="qrcode"> </div></van-popup></div>

import {DropdownItem,DropdownMenu,Grid,GridItem,Icon,Popup,Radio,RadioGroup,Swipe,SwipeItem,Tabbar,TabbarItem} from 'vant'import store from 'store'import Vue from 'vue'import axios from 'axios'import QRCode from 'qrcodejs2'

 // 生成二维码函数creatQrCode() {let cardNo = store.get('__cardNo__')log.info(cardNo,'二维码生成')var qrcode = new QRCode('qrcode', {text: cardNo ,width: 150,height: 150,// background: '#f0f',   // 背景色// foreground: '#ff0'    // 前景色})//  log.info(qrcode,'qrcode66666666666666666666666666') },dianJiZhanShi () {// this.creatQrCode();// 点击展示二维码this.show = !this.showthis.$nextTick (function () {this.creatQrCode();})},

下面补充一点知识：

微信长按识别二维码，在 vue 项目中的实现

微信长按识别二维码是 QQ 浏览器的内置功能，该功能的基础一定要使用 img 标签引入图片，其他方式的二维码无法识别。

在 vue 中使用 QrcodeVue 插件

demo1 在 template 标签中直接使用

<qrcode-vue :value="codeUrl" :size="size" level="H"></qrcode-vue>

在微信中长按无法识别二维码

正确的做法

使用 qrcode 插件

在 template 标签中是使用 img 标签引入

<template><div><p>长按识别二维码支付</p><div id="code"><img class="code" :src="url" alt=""></div></div>
</template>

在 methods 方法里面生成二维码图片后加入 img 中即可

methods: {QRCode.toDataURL('自定义的内容,可传参').then(url => {this.url = url}).catch(err => {console.error(err)})
}