vue + h5项目中使用 qrcodejs需注意的问题

在开发H5项目过程中使用qrcodejs生成二维码过程中的一些注意事项，本文进行记录，以便日后自己再遇到

1、二维码生成js代码中可以指明尺寸，也可以不用指明

<div class="qr-code-box" ref="qrCodePosterDiv"></div>

import QRCode from "qrcodejs2"
let width,height  //qrcode生成二维码兼容安卓
if(navigator.userAgent.indexOf('Andriod') !== -1){
    
    
  width = 100
  height = 100
}
new QRCode(this.$refs.qrCodePosterDiv, {
    
    
  text: codeHref,
  width : navigator.userAgent.indexOf('Andriod') !== -1 ? width : 100,   // 可以指明尺寸，也可以不用指明
  height : navigator.userAgent.indexOf('Andriod') !== -1 ? height : 100,   // 可以指明尺寸，也可以不用指明
  // width : navigator.userAgent.indexOf('Andriod') !== -1 ? width : 100,   // 可以指明尺寸，也可以不用指明
  // height : navigator.userAgent.indexOf('Andriod') !== -1 ? height : 100,   // 可以指明尺寸，也可以不用指明
})

2、承接二维码的div，需要设置尺寸，并设置它的直接下级 img元素 的尺寸与它相同

<div class="qr-code-box" ref="qrCodePosterDiv"></div>

/*承接二维码的div*/
.qr-code-box{
    
     
   width: 200px;
   height: 200px;
    /deep/img{
    
      /*直接下级img元素*/
        width: 100%;
        height: 100%;
    }
 }

3、当需要转换为二维码的文本串（text）太长时，扫描其生成的二维码会扫描失败。解决办法：
① 使用vue-qr 进行实现二维码的生成
② 将要详细的数据(text)进行简化封装到接口中，二维码文本简化成查询详细信息的入口(比如 ‘name=bob’，通过name=bob的入参来请求接口，进而来获取详细数据text)

未完待续，如果将来遇到会继续补充