Fonction de transfert du mini programme WeChat vers des amis

Aujourd'hui, je vais parler brièvement de la fonction de transfert de l'applet WeChat. Pourquoi devrais-je l'expliquer brièvement car elle parle principalement de transfert vers des amis ou des groupes. Il existe également un autre type de partage vers le cercle d'amis. C'est plus compliqué. D'accord, permettez-moi de vous révéler un peu d'abord. Il existe deux méthodes principales pour partager sur Moments. L'une consiste à générer directement des images d'affiche en arrière-plan, et l'autre consiste à générer des affiches via le canevas dans le front-end. J’en parlerai en détail plus tard quand j’en aurai l’occasion. Bon, revenons aux choses sérieuses et continuons à parler de nos amis transitaires.

Introduisez d'abord l'API d'une applet WeChat : onShareAppMessage(options)

Définissez la fonction onShareAppMessage dans Page pour définir les informations de transfert de la page.

• Uniquement lorsque ce gestionnaire d'événements est défini, le bouton "Suivant" sera affiché dans le menu du coin supérieur droit

• Il sera appelé lorsque l'utilisateur clique sur le bouton Suivant

• Cet événement doit renvoyer un objet pour personnaliser le contenu du transfert

description du paramètre d'options

参数	类型	说明	最低版本
from	String	转发事件来源。button：页面内转发按钮；menu：右上角转发菜单	1.2.4
target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined	1.2.4

Self Définissez le champ de transfert

字段	说明	默认值	最低版本
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4		1.5.0
success	转发成功的回调函数		1.1.0
fail	转发失败的回调函数		1.1.0
complete	转发结束的回调函数（转发成功、失败都会执行		1.1.0

et il y a une autre valeur, qui est shareTickets, qui est renvoyée par un transfert réussi, et est un tableau. Chaque élément est un shareTicket, correspondant à un. objet de transfert

Parlons d'abord de l'API, puis de la mise en œuvre du transfert

Regardez d'abord l'image :

Tout d'abord, configurez wx.showShareMenu dans onLoad

  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目标信息
      withShareTicket: true
    }); 
  },

Ensuite, configurez onShareAppMessage

/* 转发*/
  onShareAppMessage: function (ops) {    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }    return {
      title: '转发dom',
      path: `pages/index/index`,
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //可以获取群组信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  },

Laissez-moi vous expliquer wx.getShareInfo, qui peut être utilisé pour obtenir les détails du transfert

Le code js complet est

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
  },
  onLoad: function (e) {
    wx.showShareMenu({
      // 要求小程序返回分享目标信息
      withShareTicket: true
    }); 
  },
  /* 转发*/
  onShareAppMessage: function (ops) {    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }    return {
      title: '转发dom',
      path: `pages/index/index`,
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false;
        // }
        // //可以获取群组信息
        // wx.getShareInfo({
        //   shareTicket: shareTickets[0],
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  },
})

Étudiants intelligents, devrais-je savoir que la prochaine étape est le code wxml

<view class="container">
  <view class="userinfo">
   <button open-type="share">分享好友</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

Un rappel amical que si vous cliquez sur le bouton pour partager, le bouton doit être défini avec open-type= "partager" sinon ça ne marchera pas.

Si vous pensez que l'article vous est utile et utile, partagez-le avec vos amis et aimez-le. Si vous ne comprenez rien, vous pouvez laisser un message ci-dessous.

Tutoriel recommandé : "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!