微信小程序分享朋友圈遇到的巨坑

目前，腾讯还没有这个接口，曲线救国的方式就是先把内容画到canvas内，然后在把canvas转化成图片，保存到手机相册。为了便于在多个地方使用这个功能，需要将其做成组件component。然后哪里需要就搬到哪里。但是这样操作，就会遇到几个躲不过的巨坑。巨坑一：始终无法将内容（图片或者文字）绘制到画布上，始终显示空白。错误用法:let ctx = wx.createCanvasContext(‘myCanvas’);正确用法比错误用法多了一个thislet ctx = wx.createCanvasContext(‘myCanvas’, this);巨坑二：画布上绘制完毕。，无法导出图片。正确用法:依然需要传一个this进去wx.canvasToTempFilePath({},this)巨坑三：保存图片是异步的，建议加适当的延时wxml<canvas style=”width: {{windowWidth}}px; height: {{windowHeight}}px;” canvas-id=”myCanvas”></canvas>index.js// components/shareImg/index.jsconst app = getApp();Component({  /**   * 组件的属性列表   */  properties: {  },  /**   * 组件的初始数据   */  data: {    windowWidth: 750,    windowHeight: 1334,    pixelRatio: 1,    drawInfo: {      type: Object,      value: {        x: 0,        y: 0,        w: 750,        h: 1334,        color: ‘#f00′,        fontSize: ’34’,        bg:{          src: ‘/static/settings/imgBg.png’,          x: 0,          y: 0,          w: 750,          h: 1334,        },        logo: {          x: 0,          y: 660,          w: 320,          h: 68        },        title: {          y: 1016,        },                wxCode: {          x: 180,          y: 1150,          w: 160,          h: 160        },      }    },    shareData: {      type: Object,      value: {        title: ‘苏州速迈医疗设备有限公司’,        hallNo: ‘E01-04’,        logo: ‘/static/pro/logo.png’,        wxCode: ‘/static/pro/wxCode.png’      },    },  },  ready: function(e) {    this.init();    // this.drawImg();    this.drawCanvas();  },  /**   * 组件的方法列表   */  methods: {    // 获取常用的属性    init: function() {      let that = this;      wx.getSystemInfo({        success: function(res) {          that.setData({            windowWidth: res.windowWidth,            windowHeight: res.windowHeight,            pixelRatio: res.pixelRatio,          });        }      });      // console.log(“that.data.windowHeight”, that.data.windowHeight);      // console.log(“that.data.windowWidth”, that.data.windowWidth);      that.data.drawInfo.value.w = that.data.windowWidth;      that.data.drawInfo.value.h = that.data.windowHeight;    },    drawCanvas: function() {      var that = this;      let ctx = wx.createCanvasContext(‘myCanvas’, this);      // 屏幕系数比，以设计稿375*667（iphone7）为例      let pixelRatio = this.data.pixelRatio;      console.log(“pixelRatio:”,pixelRatio);      // 文字基础设置      var color = that.data.drawInfo.value.color        , fz = that.data.drawInfo.value.fontSize / pixelRatio        , centerX = that.data.drawInfo.value.w / pixelRatio        ,leftX = this.leftX()        ;      // 背景图绘制      var bg={        src: that.data.drawInfo.value.bg.src,        x: that.data.drawInfo.value.x,        y: that.data.drawInfo.value.y,        w: that.data.drawInfo.value.w,        h:that.data.drawInfo.value.h      }      ctx.drawImage(bg.src, bg.x, bg.y, bg.w, bg.h);      // logo绘制      var logo = {        src: that.data.shareData.value.logo,        y: that.data.drawInfo.value.logo.y / pixelRatio,        w: that.data.drawInfo.value.logo.w / pixelRatio,        h: that.data.drawInfo.value.logo.h / pixelRatio      }      ctx.drawImage(logo.src, this.leftX(logo.w,bg.w), logo.y, logo.w, logo.h);      // 二维码绘制      var wxCode={        src: that.data.shareData.value.wxCode,        x: that.data.drawInfo.value.wxCode.x / pixelRatio,        y: that.data.drawInfo.value.wxCode.y / pixelRatio,        w: that.data.drawInfo.value.wxCode.w / pixelRatio,        h: that.data.drawInfo.value.wxCode.h / pixelRatio      }      ctx.drawImage(wxCode.src, wxCode.x, wxCode.y, wxCode.w, wxCode.h);      //文字绘制      // 标题      var title={        y :that.data.drawInfo.value.title.y / pixelRatio,        content : that.data.shareData.value.title      };      // hallNo 展位号      var hallNo={        y : title.y+ 60 / pixelRatio,        content : that.data.shareData.value.hallNo      }      ctx.setFontSize(fz);      ctx.setFillStyle(color);      ctx.setTextBaseline(‘middle’);      ctx.setTextAlign(‘center’)      ctx.fillText(title.content, centerX, title.y);      ctx.fillText(hallNo.content, centerX, hallNo.y);      ctx.draw(false,function(){        setTimeout(function(){          that.canvasToImage();        },1000)      });    },    // 居中绘制时的left值    leftX: function(wEl, wBg) {      return (wBg – wEl) / 2;    },    // 转canvas为图片    canvasToImage() {      var that = this      wx.canvasToTempFilePath({        // x: 0,        // y: 0,        // width: that.data.windowWidth,        // height: that.data.windowWidth,        // destWidth: that.data.windowWidth * that.data.pixelRatio,        // destHeight: that.data.windowWidth * that.data.pixelRatio,        canvasId: ‘myCanvas’,        success: function(res) {          console.log(res);          console.log(‘朋友圈分享图生成成功:’ + res.tempFilePath)          wx.previewImage({            current: res.tempFilePath, // 当前显示图片的http链接            urls: [res.tempFilePath] // 需要预览的图片http链接列表          })        },        fail: function(err) {          console.log(‘失败’)          console.log(err.errMsg)        }      }, that)    },  }})小程序