The WeChat applet is implemented through the function of saving pictures and sharing them in Moments.

This article mainly introduces the function of WeChat applet to save pictures and share them in Moments. It has a certain reference value. Now I share it with you. Friends in need can refer to

applet It cannot be shared directly to Moments. Therefore, we can only generate pictures, carry the QR code of the mini program, save them to the mobile phone album, and let users choose to send them to their circle of friends. Then you can enter the designated page of the mini program by identifying the QR code in the mini program. The editor below will share the implementation code with you. Friends who need it can refer to it

Explanation

First of all, let me explain that you cannot directly Share to Moments. Therefore, we can only generate pictures, carry the QR code of the mini program, save them to the mobile phone album, and let users choose to send them to their circle of friends. Then you can enter the designated page of the mini program by identifying the QR code in the mini program. Referring to the applications on the market that support sharing, they are basically implemented in this way.

Preparation stage

1. Obtain the mini program code through the server

You can refer to it here WeChat's official documentation specifies parameters, paths and other information for the backend, allowing the backend to generate the specified mini program code. Then call wx.getImageInfo to save the small program code generated in the background.

Note that you must read the WeChat documentation carefully. If the path to generate the mini program code on the official server does not exist, the generation will fail. This is also very annoying and inconvenient for debugging.

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

1. Draw the required information through canvas

After preparing all the pictures, you can draw them through canvas , and then export the canvas as a picture. Regarding drawing, you can refer to WeChat's canvas API. The following are basically based on the API methods.

There are several points that need to be noted.

1. I don’t know the length of the drawn text, so I don’t know when the text should wrap. Therefore, for the product title, the multi-line data may be fixed to 18 characters per line.

2. It is about the export of drawing pictures. According to the official API, it should be executed in the callback completed by draw(), but through

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

In this way, the callback is never completed. Don't know what went wrong. So in the end I had to add a delay to save the picture.

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
  wx.showLoading({
    title: '正在生成图片...',
    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);
},

Finally take a look at the renderings.

After the image is generated, the user can be prompted to save and share it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the analysis of the selector (time, date, region) of the WeChat applet

About Implementation of the collection function of the WeChat mini program

Implementation of the like, delete list and sharing functions of the WeChat mini program

The above is the detailed content of The WeChat applet is implemented through the function of saving pictures and sharing them in Moments.. For more information, please follow other related articles on the PHP Chinese website!