Das WeChat-Applet wird durch die Funktion implementiert, Bilder zu speichern und in Moments zu teilen.

In diesem Artikel wird hauptsächlich die Funktion des WeChat-Applets zum Speichern und Teilen von Bildern in Moments vorgestellt. Es hat einen gewissen Referenzwert. Jetzt können Freunde in Not auf das

-Applet verweisen direkt auf Moments geteilt. Daher können wir nur Bilder generieren, den QR-Code des Miniprogramms übertragen, sie im Handyalbum speichern und den Benutzern die Möglichkeit geben, sie an ihren Freundeskreis zu senden. Anschließend können Sie die vorgesehene Seite des Miniprogramms aufrufen, indem Sie den QR-Code im Miniprogramm identifizieren. Der unten stehende Herausgeber wird den Implementierungscode mit Ihnen teilen. Freunde, die ihn benötigen, können darauf verweisen

Erklärung

Lassen Sie mich zunächst Erklären Sie, dass Sie Momente nicht direkt teilen können. Daher können wir nur Bilder generieren, den QR-Code des Miniprogramms übertragen, sie im Handyalbum speichern und den Benutzern die Möglichkeit geben, sie an ihren Freundeskreis zu senden. Anschließend können Sie die vorgesehene Seite des Miniprogramms aufrufen, indem Sie den QR-Code im Miniprogramm identifizieren. Bezogen auf die Anwendungen auf dem Markt, die das Teilen unterstützen, werden diese grundsätzlich auf diese Weise implementiert.

Vorbereitungsphase

1. Erhalten Sie den Applet-Code über den Server

Sie können darauf verweisen Dazu gibt die offizielle Dokumentation von WeChat Parameter, Pfade und andere Informationen für das Backend an, die es dem Backend ermöglichen, den angegebenen Miniprogrammcode zu generieren. Rufen Sie dann wx.getImageInfo auf, um den im Hintergrund generierten kleinen Programmcode zu speichern.

Lesen Sie unbedingt die WeChat-Dokumentation sorgfältig durch. Wenn der offizielle Server zum Generieren des Miniprogrammcodes nicht vorhanden ist, schlägt die Generierung fehl. Dies ist auch sehr ärgerlich und für das Debuggen unpraktisch.

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

1. Zeichnen Sie die erforderlichen Informationen durch die Leinwand

Nachdem alle Bilder fertig sind, können Sie sie zeichnen durch die Leinwand und exportieren Sie die Leinwand dann als Bild. In Bezug auf das Zeichnen können Sie sich auf die Canvas-API von WeChat beziehen. Die folgenden basieren im Wesentlichen auf den API-Methoden.

Es gibt mehrere Punkte, die beachtet werden müssen.

1. Ich kenne die Länge des gezeichneten Textes nicht, daher weiß ich nicht, wann der Text umbrochen werden soll. Daher sind die mehrzeiligen Daten möglicherweise auf 18 Zeichen festgelegt pro Zeile.

2. Es geht um den Export gezeichneter Bilder, der im Callback durch draw() ausgeführt werden soll, aber durch

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

Auf diese Weise wird der Rückruf nie abgeschlossen. Ich weiß nicht, was schief gelaufen ist. Am Ende musste ich also eine Verzögerung hinzufügen, um das Bild zu speichern.

/**
 * 绘制分享的图片
 * @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);
},

Schauen Sie sich zum Schluss noch die Renderings an.

Nachdem das Bild generiert wurde, kann der Benutzer aufgefordert werden, es zu speichern und zu teilen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Analyse des Selektors (Uhrzeit, Datum, Region) des WeChat-Applets

Über die Implementierung der Sammlungsfunktion des WeChat Mini-Programms

Implementierung der Funktionen zum Liken, Löschen von Listen und Teilen des WeChat Mini-Programms

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet wird durch die Funktion implementiert, Bilder zu speichern und in Moments zu teilen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!