微信小程序分享朋友圈

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/bocongbo/article/details/84934973

微信小程序暂时没有分享到朋友圈的功能，分享的思路是用 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