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

目前，腾讯还没有这个接口，曲线救国的方式就是先把内容画到canvas内，然后在把canvas转化成图片，保存到手机相册。
为了便于在多个地方使用这个功能，需要将其做成组件component。然后哪里需要就搬到哪里。但是这样操作，就会遇到几个躲不过的巨坑。
巨坑一：
始终无法将内容（图片或者文字）绘制到画布上，始终显示空白。
错误用法:

let ctx = wx.createCanvasContext('myCanvas');

正确用法比错误用法多了一个this

let ctx = wx.createCanvasContext('myCanvas', this);

巨坑二：
画布上绘制完毕。，无法导出图片。

正确用法:依然需要传一个this进去

wx.canvasToTempFilePath({},this)

巨坑三：
保存图片是异步的，建议加适当的延时

wxml

index.js

// components/shareImg/index.js
const 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)
    },
  }
})