在做一个首页轮播图需要一维码，点击轮播图单项出现弹窗，显示一维码加二维码需求。
问题：使用了太多的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语法）
