Implémentation de la fonction de sauvegarde des images et de partage avec Moments dans le mini programme

Cette fois, je vais vous présenter la mise en œuvre de la fonction du mini programme de sauvegarde et de partage d'images dans Moments. Quelles sont les précautions à prendre pour mettre en œuvre la fonction du mini programme de sauvegarde et de partage d'images dans Moments ? jetons un coup d'oeil.

Explication

Tout d'abord, il est impossible de partager directement sur Moments au sein du mini programme. 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 très gênantdébogage.

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

1. Dessinez les informations requises sur la toile

Après avoir préparé toutes les images, vous pouvez les dessiner sur la toile, puis exporter la toile 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 de dessin. Selon l'API officielle, elle doit être exécutée dans le rappel de l'achèvement de draw(). Cependant, via la méthode

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

, le rappel n'est jamais terminé. 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 = '您的好友邀请您一起分享精品好货';
  const title2 = '立即打开看看吧';
  const codeText = '长按识别小程序码查看详情';
  const imgWidth = 780;
  const imgHeight = 1600;
  const canvasCtx = wx.createCanvasContext('shareCanvas');
  //绘制背景
  canvasCtx.setFillStyle('white');
  canvasCtx.fillRect(0, 0, 390, 800);
  //绘制分享的标题文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  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('#333333');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText(value, 20, yOffset);
    yOffset += 25;
  });
  //绘制价格
  yOffset += 8;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('￥', 20, yOffset);
  canvasCtx.setFontSize(30);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText(price, 40, yOffset);
  //绘制原价
  const xOffset = (price.length / 2 + 1) * 24 + 50;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#999999');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);
  //绘制原价的删除线
  canvasCtx.setLineWidth(1);
  canvasCtx.moveTo(xOffset, yOffset - 6);
  canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
  canvasCtx.setStrokeStyle('#999999');
  canvasCtx.stroke();
  //绘制最底部文字
  canvasCtx.setFontSize(18);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  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: 'shareCanvas',
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath,
          showSharePic: true
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res)
        wx.hideLoading();
      }
    })
  }, 2000);
},

Enfin, jetez un œil aux rendus.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser des méthodes frontales pour convertir des images en peintures de personnages

Explication détaillée des étapes à suivre utilisez la méthode du tableau JS

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!