vue使用二维码

vue使用二维码，我有用过两个插件vue-qr和qrcode.vue

引用方法如下
qrcode.vue：
main.js中import QrcodeVue from 'qrcode.vue'、或者要用到qrcode的vue文件中import QrcodeVue from 'qrcode.vue'
然后main.js中Vue.component('qrcode-vue', QrcodeVue)、或者用到qrcode的vue文件中
components:{
    QrcodeVue
}, 
componnents和data、mounted、methods同一级别的

vue-qr同上

调用方法如下
qrcode
<template>
  <div>
    <div class="mainPage">
      <ul v-for="(item, index) in products">
        <li>
          <span style="display:none">{{flash}}</span>
          <img :src="urlImgs[index]" class="mainQrcode">
          <qrcode-vue :value="urls[index]" 
            :id="'qrcode'+ index" 
            v-if="'' != urls[index]"
            class="mainQrcode" 
            size="200"></qrcode-vue>
        </li>
        <li>
          <span class="qrcodeTips">{{item.product_name}}</span>          
        </li>
      </ul>
    </div>
  </div>
</template>
忽略我定义的哪些class和变量名称
<qrcode-vue :value="url" 
    :id="qrcode" 
    size="200"></qrcode-vue>
这个是重点，不过这种方式生成的二维码不是图片微信浏览器中长按不会提示识别二维码，pc端浏览器中调试一看，二维码最终显示再画布上，结合我以前做过的视频缩略图，base64格式文件下载。灵感来了
initUrlImgs:function(){

  var initDone = true

  this.products.forEach((item, index)=>{

    if (document.getElementById('qrcode' + index)) {

      //console.log('lookfor qrcode'+index)

      const canvas = document.getElementById('qrcode' + index).getElementsByTagName('canvas')

      this.urlImgs[index] = canvas[0].toDataURL('image/png');

    }else{

      console.log('lookfor qrcode'+index+'failed')
      initDone = false
    }

  })

  if (true == initDone) {
    this.products.forEach((item, index)=>{
      this.urls[index] = ''
    })
    this.flash = !this.flash
  }

  return initDone

}, 
思路就是获取画布元素，然后将其转为base64格式图片，然后显示位图片，然后就可以长按识别二维码了
这种方式不能放在mounted中或者update中直接调用，最好设置定时器，每个几秒查询一下canvas是否找得到，因为mounted和updated之际还没来得及渲染完毕，所以还找不到
  updated:function(){

    if (this.initImgDone) {
      return
    }

    if(this.initUrlImgs() || this.initImgDone){
      this.initImgDone = true
      this.flash = !this.flash
    }

    if (this.initImgDone) {
      return
    }

    this.interval = setInterval(()=>{

      if(this.initUrlImgs() || this.initImgDone){
        this.initImgDone = true
        clearInterval(this.interval)
        this.flash = !this.flash
      }

    }, 1000)

  }, 
qrcode.vue用起来真是太方便了，只需要传url就可以形成二维码
缺点：
1.没有自动生成图片，不能长按识别二维码
2.样式单一，没有logo，没有中文识别

接下来说说vue-qr
针对qrcode.vue的缺点，vue-qr算得上不错了
      <vue-qr 
        :text="shareUrl" 
        qid="testid" 
        :size="200"
        logoMargin="2"
        class="qrcodeImage fixQrcodeImage"
        :logoSrc="logoUrl"></vue-qr>
        
    data(){
        return{
            shareUrl:'http://www.baidu.com', 
            logoUrl:require('../../static/image/huojian.png'), 
        }
    }
上例仅仅在二维码中间形成一个logo，但已足够惊艳qrcode.vue了
但是使用过程中就不那么美好了，遇到一点小坎坷
起初不现实logo，只显示二维码，一切顺利，但是要显示logo就要使用logoSrc，一开始用法是logoSrc="../../static/image/huojian.png"，本地浏览器跑起来也正常，但是一旦npm run build生成dist文件夹，放到线上，再用url访问这个页面，页面中并没有显示二维码，连图片都没有，这就懵了，于是慢慢调试，把logo去掉，又能显示了，很明显问题出在logoSrc上，logo显示不了，连二维码都没有，还没有一点点报错，慢慢排查，尝试 将图片强制引入，也就是现在的代码，终于ok了