小程序批量画布转图片保存

在做一个首页轮播图需要一维码，点击轮播图单项出现弹窗，显示一维码加二维码需求。

问题：使用了太多的canvas，因为canvas是原生组件，所以不存在层级限制。而且弹窗中的画布有时候出现有时候不出现的。

解决方案：1. 想重开一个页面 内容时弹窗内容 （未通过，小程序页面会缓存，也会出现时有时没有）。

                  2. 整体画布转换为图片，然后使用没有限制。

所以采用了第二种方案，但是又出现了问题，画布转图片是一个异步过程。所以第一次使用的时候图片地址不存在，但是当轮播图开始轮播时 又出现了。

解决方案：1.开始想的是深度监听轮播图数组，来更新数据，但是发现只出现一个打印。（未通过，只有一个打印）

                  2. 在1的基础上，使用$set去改变数据，但是发现还是监听不了。（未通过）

                  3. 使用async/await，不是很理解用法，第一次使用失败。（未通过）

                  4.在3的基础上，与promise结合，第一次是一个promise，包括两个异步保存函数（未通过）

                  5. 在4的基础上，尝试一个异步与一个promise结合，在与async/await结合 （成功）

var data = [
          {
            birthday: "1995-10-26",
            gander: 1,
            healthCardNo: "123456789012",
            idCardNo: "231341231253121",
            openId: "wx231235151",
            patientId: "324154123151",
            patientName: "郑志福",
            phone: "13532565621",
            phoneIsVerify: false,
            unionId: "124435451231",
            userType: "patien"
          }
        ];

        this.dataList = data.map(({ healthCardNo }) => {
          return {
            healthCardNo
          };
        });

        this.setCanvasUrl(this.dataList).then(res => {
          var a = [];
          res.forEach((v, i) => {
            a.push(Object.assign({}, data[i], v));
          });
          this.cardList = a;
          this.$store.commit("SET_HEALTH_CARD_LIST", a);
          this.dataList = [];
        });

 async setCanvasUrl(data) {
      const _data = JSON.parse(JSON.stringify(data));
      for (var i = 0; i < _data.length; i++) {
        const brId = "barcode" + _data[i].healthCardNo;
        const qrId = "qrcode" + _data[i].healthCardNo;
        await this.setBarCanvas(brId, _data[i].healthCardNo, 500, 160).then(
          res => {
            _data[i].barcodeUrl = res;
          }
        );
        await this.setQrCanvas(qrId, _data[i].healthCardNo, 440, 440).then(
          res => {
            _data[i].qrcodeUrl = res;
          }
        );
      }
      return _data;
    },
    setBarCanvas(brId, healthCardNo, w, h) {
      return new Promise((resolve, reject) => {
        wxbarcode.barcode(brId, healthCardNo, 500, 160, () => {
          wx.canvasToTempFilePath({
            canvasId: brId,
            quality: 1,
            success(res) {
              resolve(res.tempFilePath);
            },
            fail(err) {
              console.log(err);
            }
          });
        });
      });
    },
    setQrCanvas(qrId, healthCardNo, w, h) {
      return new Promise((resolve, reject) => {
        wxbarcode.qrcode(qrId, healthCardNo, 440, 440, () => {
          wx.canvasToTempFilePath({
            canvasId: qrId,
            quality: 1,
            success(res) {
              resolve(res.tempFilePath);
            },
            fail(err) {
              console.log(err);
            }
          });
        });
      });
    },

 

总结： 一个异步一个promise，async/await是处理多个异步的。

比如说你一个函数A，需要函数B与函数C都执行完成以后在执行，那么使用async。

那么函数B与函数C就需要使用Promise封装了。（ps: B与C内部没有异步函数调用的话，那么没必要使用async/await语法）