vue公众号开发--二维码生成

左手的ㄟ右手 2021-08-24 15:19 359阅读 0赞

### vue公众号开发–二维码生成 ###

在H5项目中，我们往往会需要生成二维码，其实二维码的生成很简单，具体的步骤如下：

#### 1、安装依赖qrcodejs2 ####

npm install qrcodejs2 -S

--------------------

#### 2、引入使用 ####

import QRCode from "qrcodejs2";

--------------------

#### 3、html结构 ####

--------------------

#### 4、js代码 ####

// 二维码
      async getQrCode() { 
        let res = await this.$Http.addQrCode(this.createQrCodeParameter, true);
        if (res.ResultFlag == "0") { 
          this.qrCodeUrl = res.ResultSet;
          this.$nextTick(function() { 
            document.getElementById("qrCode").innerHTML = "";
            this.bindQRCode(this.qrCodeUrl);
          });
        } else { 
          alert("获取二维码失败");
        }
      },
        
      // 生成二维码
      bindQRCode(codeText) { 
        new QRCode(this.$refs.qrCodeDiv, { 
          text: codeText,
          width: 150,
          height: 150,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        });
        let mycanvas = document.getElementsByTagName('canvas')[0];
        let img = this.convertCanvasToImage(mycanvas)
        let needDiv = document.getElementById('qrCode2');  //need标识要插入图片的div
        needDiv.append(img);
      },

--------------------

#### 5、代码分析 ####

*  代码思路
    
    首先，引入插件qrcodejs2，并使用。然后，定义html结构，获取生成二维码需要的字符串。最后，生成二维码，并将二维码转化为图片（可用于长按识别等）。
 *  函数分析
    
    `getQrCode`：用户获取生成二维码的字符串；请注意`this.$nextTick`的使用。
    
    `bindQRCode`：使用字符串生成二维码。
 *  温馨提示
    
    以下代码用户将图片生成。

let mycanvas = document.getElementsByTagName('canvas')[0];
    let img = this.convertCanvasToImage(mycanvas)
    let needDiv = document.getElementById('qrCode2');  //need标识要插入图片的div
    needDiv.append(img);

--------------------

#### 6、图片如下 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/b8d94d4980a043f4b45913b43212f8d4.png