由於微信小程式只支援分享給朋友或者群，不支援分享到朋友圈，又有分享到朋友圈這個需求，那就要想辦法實現這個需求。查閱各種資料，發現基本思路有兩種，一種是後端實現，另一種是前端實現，後端實現的方式這裡就不討論了，因為我是不懂後端的，只會前端的東西，所以這裡就記錄一下前端的實現方法。

前端要實現分享到朋友群，都是通過canvas做一張圖片，然後使用者手動分享朋友圈。前端具體要做的就是把要分享的頁面用canvas重做一遍，生成一個圖片，儲存這個圖片到使用者本地相簿。

要想用canvas，需要在頁面上使用canvas標籤，把它定位到頁面之外，以免影響頁面，在繪製圖片時，圖片的地址必須是通過微信下載圖片後返回的虛擬地址，要不canvas無法繪製出來，接下來最主要的就是canvas的使用了，小程式的canvas和h5的canvas一樣，並沒有多大的區別。

下面是一個例子：

首先是在頁面上建立canvas

index.wxml

<view class="canvas-box">
        <canvas canvas-id="myCanvas" style="width:100%;height:{{windowHeight}}px;"></canvas>
</view>
<button bindtap='startDraw'>分享朋友圈</button>

寫一個樣式把canvas定位到頁面之外，以免影響頁面的效果

.canvas-box{
    width: 100%;
    position: fixed;
    left: 0;
    top: 999999rpx;
  }
 

接下來就是繪圖了，具體可以參考繪圖文件

startDraw:function(){
  const ctx = wx.createCanvasContext('myCanvas');
    
    let windowWidth = wx.getSystemInfoSync().windowWidth;
    let windowHeight = wx.getSystemInfoSync().windowHeight;
    let _this=this;
    this.setData({
      scale: 1.6
    });

    ctx.setFillStyle('#333');
    ctx.fillRect(0, 0, windowWidth, 100);
    ctx.setFontSize(20);
    ctx.setFillStyle('#fff');
    ctx.fillText('開始繪製圖片', 30, 50);
    ctx.setFillStyle('#FFF');
    ctx.fillRect(0, 70, windowWidth, 600);

    ctx.setFillStyle('#666');
    ctx.setFontSize(19);
    ctx.fillText('我是標題',100, 140);
    
    ctx.setFontSize(20);
    ctx.fillText('微信小程式文字部分',20 , 170);

    ctx.draw()
}
 

到這為止，canvas繪圖是做完了，現在要把canvas繪製的圖形轉化為圖片，呼叫微信小程式已有的介面，接上面方法內：

wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: windowWidth,
      height: windowHeight,
      destWidth: windowWidth,
      destHeight: windowHeight,
      canvasId: 'myCanvas',
      success: function (res1) {
        console.log('朋友圈分享圖生成成功:' + res1.tempFilePath);
      }
});