Vue自动生成二维码并可下载二维码

        遇到一个需求，需要前端自行生成用户的个人名片分享二维码，并提供二维码下载功能。在网上找到很多解决方案，最终吭哧吭哧做完了，把它整理记录一下，方便后续学习使用！嘿嘿O(∩_∩)O~

这个小东西有以下功能特点：

1.可以生成密密麻麻程度不一样的二维码

2.可以生成不同颜色的二维码

3.二维码支持下载

4.代码简洁且通俗易懂（小白只能这样啦！）

        首先，先记录一下我的实验版本，因为怕把项目搞砸，所以我就自己create一个单独的小demo来实验，等功能实现了再搬过去用。系不系很机智！！！

一、实验小Demo

1、点击获取二维码

2、点击下载二维码

3、使用组件

4、效果

 

二、在小程序项目中使用（用Canvas）

在这里，二维码的大小是自适应的

qrwidth: 200 / 750 * wx.getSystemInfoSync().windowWidth,

1、使用入口

分享名片

 2、生成唯一的二维码

      const text = getApp().globalData.QCODE_URL + (_self.company.tyshxydm || "") + "&companyName=" + _self.company.jgmc
      drawQrcode({
        width: _self.qrwidth,
        height: _self.qrwidth,
        foreground: _self.qrColor,
        canvasId: "qrcanvas",
        text,
        image: {},
        callback: res => {}
      });

      // 在名片中这么处理，在详情页不需要处理中间图片
      drawQrcode({
        width: _self.qrwidth,
        height: _self.qrwidth,
        foreground: '#000',
        canvasId: "tempCanvas",
        text: text + "&companyMobile=" + _self.userInfo.mobile,
        callback: res => {
          // 读取二维码，并绘制二维码
          _self.canvasToImg({
            canvasId: "tempCanvas",
            width: _self.imageWidth,
            height: _self.imageWidth * 0.6,
            callback(res) {
              console.info("canvasToImg", res.tempFilePath);
              _self.canvasImg = res.tempFilePath;
            }
          });
        }
      });

3、保存

    // 保存名片
    onTapSaveCard(e) {
      let _self = this;
      _self.canvasToImg({
        canvasId: "cardCanvas",
        width: _self.imageWidth,
        height: _self.imageWidth * 0.6,
        callback(res) {
          debugger
          _self.saveImg(res.tempFilePath);
        }
      });
    },

 因为不能泄露公司的一些业务，就只放一些核心代码就好啦！~

总而言之，导师说用canvas绘制会性能更好些。