微信小程序通过保存图片分享到朋友圈的功能实现-小程序开发-PHP中文网

首页

微信小程序

小程序开发

微信小程序通过保存图片分享到朋友圈的功能实现

不言

Jun 26, 2018 pm 03:51 PM

这篇文章主要介绍了关于微信小程序通过保存图片分享到朋友圈的功能实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

小程序内是不能直接分享到朋友圈的。所以只能通过生成图片，携带小程序二维码，保存到手机相册，让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。下面小编给大家分享实现代码，需要的朋友参考下吧

说明

首先说明一点，小程序内是不能直接分享到朋友圈的。所以只能通过生成图片，携带小程序二维码，保存到手机相册，让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用，基本都是这种实现方式。

准备阶段

1.通过服务器获取小程序码

这里可以参考下微信的官方文档，给后台指定的参数和路径等信息，让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。

注意一定要仔细看下微信的文档，如果生成小程序码的路径正式服务器不存在，将会生成失败。这点也很蛋疼，很不方便调试。

wx.getImageInfo({            
  src:&#39;https://xxx.jpg&#39;,//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});

登录后复制

1.通过canvas绘制所需信息

准备好所有的图片之后就可以通过canvas绘制了，然后再将canvas导出为图片。关于绘制这块，可以参考微信的canvas api，下面的基本都是查着api的方法走的。

其中需要注意的有几点。

1.是不知道绘出来的文字长度，所以不知道文字到底什么时候该换行，所以针对商品标题，可能多行的数据固定了一行18个字符。

2.是关于绘制图片的导出，按照官方api的说法应该在draw()完成的回调中执行，但是通过

canvasCtx.draw(false,function(res){
});

登录后复制

这种方式，一直不回调完成。不知道哪里出问题了。所以最后只好加了一个延时去保存图片。

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
  wx.showLoading({
    title: &#39;正在生成图片...&#39;,
    mask: true,
  });
  //y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。
  let yOffset = 20;
  const goodsTitle = this.data.orderDetail.paltProduct.name1;
  let goodsTitleArray = [];
  //为了防止标题过长，分割字符串,每行18个
  for (let i = 0; i < goodsTitle.length / 18; i++) {
    if (i > 2) {
      break;
    }
    goodsTitleArray.push(goodsTitle.substr(i * 18, 18));
  }
  const price = this.data.orderDetail.price;
  const marketPrice = this.data.orderDetail.marketPrice;
  const title1 = &#39;您的好友邀请您一起分享精品好货&#39;;
  const title2 = &#39;立即打开看看吧&#39;;
  const codeText = &#39;长按识别小程序码查看详情&#39;;
  const imgWidth = 780;
  const imgHeight = 1600;

  const canvasCtx = wx.createCanvasContext(&#39;shareCanvas&#39;);
  //绘制背景
  canvasCtx.setFillStyle(&#39;white&#39;);
  canvasCtx.fillRect(0, 0, 390, 800);
  //绘制分享的标题文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle(&#39;#333333&#39;);
  canvasCtx.setTextAlign(&#39;center&#39;);
  canvasCtx.fillText(title1, 195, 40);
  //绘制分享的第二行标题文字
  canvasCtx.fillText(title2, 195, 70);
  //绘制商品图片
  canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
  //绘制商品标题
  yOffset = 490;
  goodsTitleArray.forEach(function (value) {
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle(&#39;#333333&#39;);
    canvasCtx.setTextAlign(&#39;left&#39;);
    canvasCtx.fillText(value, 20, yOffset);
    yOffset += 25;
  });
  //绘制价格
  yOffset += 8;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle(&#39;#f9555c&#39;);
  canvasCtx.setTextAlign(&#39;left&#39;);
  canvasCtx.fillText(&#39;￥&#39;, 20, yOffset);
  canvasCtx.setFontSize(30);
  canvasCtx.setFillStyle(&#39;#f9555c&#39;);
  canvasCtx.setTextAlign(&#39;left&#39;);
  canvasCtx.fillText(price, 40, yOffset);
  //绘制原价
  const xOffset = (price.length / 2 + 1) * 24 + 50;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle(&#39;#999999&#39;);
  canvasCtx.setTextAlign(&#39;left&#39;);
  canvasCtx.fillText(&#39;原价:¥&#39; + marketPrice, xOffset, yOffset);
  //绘制原价的删除线
  canvasCtx.setLineWidth(1);
  canvasCtx.moveTo(xOffset, yOffset - 6);
  canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
  canvasCtx.setStrokeStyle(&#39;#999999&#39;);
  canvasCtx.stroke();
  //绘制最底部文字
  canvasCtx.setFontSize(18);
  canvasCtx.setFillStyle(&#39;#333333&#39;);
  canvasCtx.setTextAlign(&#39;center&#39;);
  canvasCtx.fillText(codeText, 195, 780);
  //绘制二维码
  canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
  canvasCtx.draw();
  //绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。
  setTimeout(function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 390,
      height: 800,
      destWidth: 390,
      destHeight: 800,
      canvasId: &#39;shareCanvas&#39;,
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath,
          showSharePic: true
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res)
        wx.hideLoading();
      }
    })
  }, 2000);
},

登录后复制

最后看下绘制出来的效果图。