微信小程式暫時沒有分享到朋友圈的功能，分享的思路是用 canvas畫布生成一張分享圖片，儲存到相簿，使用者將帶有分享二維碼的圖片發到朋友圈，其他人可以識別圖中二維碼的方式進入小程式的指定分享頁面。可參考智行火車票的助力搶票功能。

1、wxml檔案

<view class='share'>
  <canvas canvas-id="shareCanvas" style="width:300px;height:380px"></canvas>
</view>
<view class='btn-box'>
  <button bindtap='downloadImg'>分享到朋友圈</button>
</view>
 

2、wxss樣式檔案（如果不想顯示canvas，可以將canvas定位到可視區域外部）

page{
  background: #eee;
}
.share{
  width: 300px;
  height: 380px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 100rpx;
  margin: auto;
}
.btn-box{
  padding: 1060rpx 60rpx 0 60rpx;
}
button{
  background: darkturquoise;
}

3、js檔案

Page({
  data: {
    sharebg: 'http://qiniu.jnwtv.com/H520181206092255188568494.png', // 分享底部背景圖
    shareTitle: '哈哈哈男孩從小就沒有地位，看來一萬個心酸哈哈哈男孩從小就沒有地位，看來一萬個心酸', // 分享標題
    shareCoverImg: 'http://qiniu.jnwtv.com/H520181210164154569520223.jpeg', // 分享封面圖
    shareQrImg: 'http://qiniu.jnwtv.com/H520181210164146322557972.jpg', // 分享小程式二維碼
    userInfo: {
      headImg: 'http://qiniu.jnwtv.com/H520181210164138180428653.jpg', //使用者頭像
      nickName: '打豆豆', // 暱稱
    },
    seeDate: '2018-12-04', //看視訊日期
  },
  onLoad: function (options) {
    
  },
  downloadImg:function(){
    let that = this;
    // 建立畫布
    const ctx = wx.createCanvasContext('shareCanvas')
    // 白色背景
    ctx.setFillStyle('#fff')
    ctx.fillRect(0, 0, 300, 380)
    ctx.draw()
    // 下載底部背景圖
    wx.getImageInfo({
      src: that.data.sharebg,
      success: (res1) => {
        ctx.drawImage(res1.path, 0, 250, 300, 130)
        // 下載視訊封面圖
        wx.getImageInfo({
          src: that.data.shareCoverImg,
          success: (res2) => {
            ctx.drawImage(res2.path, 0, 0, 300, 168)
            // 分享標題
            // ctx.setTextAlign('center')    // 文字居中
            ctx.setFillStyle('#000')  // 文字顏色：黑色
            ctx.setFontSize(20)         // 文字字號：20px
            if (that.data.shareTitle.length <= 14) {
              // 不用換行
              ctx.fillText(that.data.shareTitle, 10, 200, 280)
            } else if (that.data.shareTitle.length <= 28) {
              // 兩行
              let firstLine = that.data.shareTitle.substring(0, 14);
              let secondLine = that.data.shareTitle.substring(14, 27);
              ctx.fillText(firstLine, 10, 200, 280)
              ctx.fillText(secondLine, 10, 224, 280)
            } else {
              // 超過兩行
              let firstLine = that.data.shareTitle.substring(0, 14);
              let secondLine = that.data.shareTitle.substring(14, 27) + '...';
              ctx.fillText(firstLine, 10, 200, 280)
              ctx.fillText(secondLine, 10, 224, 280)
            }

            // 下載二維碼
            wx.getImageInfo({
              src: that.data.shareQrImg,
              success: (res3) => {
                let qrImgSize = 70
                ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)
                ctx.stroke()
                ctx.draw(true)

                // 使用者暱稱
                ctx.setFillStyle('#000')  // 文字顏色：黑色
                ctx.setFontSize(14) // 文字字號：16px
                ctx.fillText(that.data.userInfo.nickName, 38, 284)
                // 觀看日期
                ctx.setFillStyle('#999')  // 文字顏色：黑色
                ctx.setFontSize(10)       // 文字字號：16px
                ctx.fillText('在' + that.data.seeDate + '觀看這個視訊', 38, 298)

                // 下載使用者頭像
                wx.getImageInfo({
                  src: that.data.userInfo.headImg,
                  success: (res4) => {
                    // 先畫圓形，製作圓形頭像(圓心x，圓心y，半徑r)
                    ctx.arc(22, 284, 12, 0, Math.PI * 2, false)
                    ctx.clip()
                    // 繪製頭像圖片
                    let headImgSize = 24
                    ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)
                    // ctx.stroke() // 圓形邊框
                    ctx.draw(true)

                    // 儲存到相簿
                    wx.canvasToTempFilePath({
                      canvasId: 'shareCanvas',
                      success: function (res) {
                        wx.saveImageToPhotosAlbum({
                          filePath: res.tempFilePath,
                          success: function (res) {
                            wx.showToast({
                              title: '分享圖片已儲存到相簿'
                            })
                          }
                        })
                      }
                    }, this)
                  }
                })
              }
            })
          }
        })
      }
    })
  }
})
 

4、生成canvas的圖片資源需要快取到本地，所以需要在微信公眾平臺，將需要用到的分享圖片，包括二維碼的圖片域名新增到微信安全域名範圍內，否則會報下載圖片失敗的錯誤。剛開始也可以將微信開發者工具的校驗安全域名關掉，進行測試。開發者工具對canvas圖片的生成可能會有問題，請儘量使用真機測試。

5、通過api獲取的小程式二維碼是二進位制格式，後臺返回的圖片應該是base64形式的圖片，前端需要把二維碼base64格式轉換成本地圖片，方法見我的另一篇部落格 https://blog.csdn.net/bocongbo/article/details/84954567