微信小程序----朋友圈分享功能

问题概述：

对于微信小程序端经常会遇到一个分享朋友圈功能，目前，微信小程序端，暂不支持直接分享朋友圈，但是有替代方法，目前主流的处理方式均是，通过生成带二维码的分享卡片，进行下载保存，然后通过分享图片进行分享朋友圈。

案例图片：

wxml代码片段：

<view style='width:0px;height:0px;overflow:hidden;left:10000rpx;'>
    <canvas canvas-id="shareCanvas" style="width:618px;height:725px;left:10000rpx"></canvas>
</view>

JS代码片段

第一步：创建海报

createPoster:function(){
    let self= this;
    const post_cover =self.data.shareImage;
    wx.getImageInfo({ // 封面图
      src: post_cover,
      success: res => {
        self.setData({
          cover: post_cover,
          coverWidth: res.width,  //封面图的宽
          coverHeight: res.height //封面图的高
        })
        wx.downloadFile({
          url:app.data.imgUrl+self.data.packageInfo.imageUrlLocal,
          success (res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
              self.setData({
                erweima:res.tempFilePath
              })
              self.createdCode() // 根据以上信息开始画图
              //canvas画图需要时间而且还是异步的，所以加了个定时器
              setTimeout(() => {
              // 将生成的canvas图片，转为真实图片
                wx.canvasToTempFilePath({
                  x: 0,
                  y: 0,
                  canvasId: 'shareCanvas',
                  success: function (res) {
                    let shareImg = res.tempFilePath;
                    self.setData({
                      shareImg: shareImg//讲canvas绘制生成的图片地址
                    })
                  },
                  fail: function (res) {
                  }
                })
              }, 500)
            }
          }
        })
      },
      fail(err) {
        console.log(err)
      }
    })
  },

//开始绘图

  createdCode:function() {
    let self = this;
    const ctx = wx.createCanvasContext('shareCanvas');    //绘图上下文
    const coverWidth = this.data.coverWidth; // 封面图的宽度 裁剪需要
    const coverHeight = this.data.coverHeight; // 封面图的宽度 裁剪需要
    ctx.drawImage(this.data.cover, 0,0,coverWidth,coverHeight,0,0,618,725);
    // 二维码描述  及图片
    ctx.setFillStyle('#333333')
    //绘制
    ctx.save();
    //将生成的二维码绘制成圆形，130为二维码宽高，422为x轴距离，130为y轴
    ctx.beginPath();
    ctx.arc(130/2+422, 130/2+200, 130/2, 0, Math.PI * 2, false);
    ctx.clip();
    ctx.drawImage(this.data.erweima, 422, 200, 130, 130);
    ctx.restore();
    ctx.setFontSize(20);
    ctx.setFillStyle('#ffffff')
    ctx.fillText('扫码领取惊喜', 430,360);
    ctx.draw()
  },

第三步：下载生成的卡片

  downloadFile:function(){
    var self=this;
      wx.saveImageToPhotosAlbum({
        filePath: self.data.shareImg,
        success (res) {
          wx.showToast({
            title: '保存图片成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail(res){
          if (res.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
            self.setData({
              isHidden:false
            })
          }
        }
    })
  },

总结：

在开发工程中，需要注意点：

1、在调用wx.getImageInfo方法获取图片资源信息时，一定要注意，网络上资源，一定先使用downloadFile，将图片下载成本地资源才能进行获取资源信息。

2、对于本地图片资源信息，包括生成的卡片二维码图片信息，均不需要再次调用dowmloadFile,直接通过保存图片就行，发现网络上好多分享的文章均在保存图片前还再次调用dowmloadFile方法，这是有问题的。