L'applet WeChat est implémentée grâce à la fonction de sauvegarde d'images et de partage dans Moments.

Cet article présente principalement la fonction de l'applet WeChat pour enregistrer des images et les partager dans Moments. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à l'applet

. partagé directement sur Moments. Par conséquent, nous pouvons uniquement générer des images, transporter le code QR du mini-programme, les enregistrer dans l'album du téléphone mobile et laisser les utilisateurs choisir de les envoyer à leur cercle d'amis. Ensuite, vous pouvez accéder à la page désignée du mini programme en identifiant le code QR dans le mini programme. L'éditeur ci-dessous partagera avec vous le code d'implémentation. Les amis qui en ont besoin peuvent s'y référer

Explication

Tout d'abord, laissez-moi expliquez que vous ne pouvez pas partager directement sur Moments. Par conséquent, nous pouvons uniquement générer des images, transporter le code QR du mini-programme, les enregistrer dans l'album du téléphone mobile et laisser les utilisateurs choisir de les envoyer à leur cercle d'amis. Ensuite, vous pouvez accéder à la page désignée du mini programme en identifiant le code QR dans le mini programme. En ce qui concerne les applications sur le marché qui prennent en charge le partage, elles sont essentiellement mises en œuvre de cette manière.

Phase de préparation

1. Obtenez le code de l'applet via le serveur

Vous pouvez vous référer ici, la documentation officielle de WeChat spécifie les paramètres, les chemins et d'autres informations pour le backend, permettant au backend de générer le code du mini-programme spécifié. Appelez ensuite wx.getImageInfo pour enregistrer le petit code de programme généré en arrière-plan.

Assurez-vous de lire attentivement la documentation WeChat. Si le serveur officiel pour générer le code du mini programme n'existe pas, la génération échouera. C'est également très ennuyeux et peu pratique pour le débogage.

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

1. Dessinez les informations requises à travers la toile

Après avoir préparé toutes les images, vous can La toile est dessinée, puis la toile est exportée sous forme d'image. Concernant le dessin, vous pouvez vous référer à l'API canevas de WeChat. Les éléments suivants sont essentiellement basés sur les méthodes API.

Il y a plusieurs points à noter.

1. Je ne connais pas la longueur du texte dessiné, donc je ne sais pas quand le texte doit être renvoyé à la ligne. Par conséquent, pour le titre du produit, les données multilignes peuvent être fixées à 18 caractères. par ligne.

2. Il s'agit de l'exportation d'images dessinées. Selon l'API officielle, elle doit être exécutée dans le rappel complété par draw(), mais via

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

.

De cette façon, il n'est jamais terminé sans rappel. Je ne sais pas ce qui n'a pas fonctionné. J'ai donc finalement dû ajouter un délai pour sauvegarder l'image.

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

Jetez enfin un oeil aux rendus dessinés.

Une fois l'image générée, l'utilisateur peut être invité à la sauvegarder et à la partager.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse du sélecteur (heure, date, région) de l'applet WeChat

À propos de la mise en œuvre de la fonction de collecte du programme WeChat Mini

Mise en œuvre des fonctions de type, de suppression de liste et de partage du programme WeChat Mini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!