Weiterleitungsfunktion des WeChat-Miniprogramms an Freunde

Heute werde ich kurz auf die Weiterleitungsfunktion des WeChat-Applets eingehen, da es hier hauptsächlich um die Weiterleitung an Freunde oder Gruppen geht Komplizierter. Okay, lassen Sie mich zunächst etwas verraten. Es gibt zwei Hauptmethoden zum Teilen mit Moments. Eine besteht darin, Posterbilder direkt im Hintergrund zu generieren, und die andere darin, Poster über die Leinwand zu generieren. Ich werde später ausführlicher darüber sprechen, wenn ich die Gelegenheit dazu habe. Kommen wir nun zurück zur Sache und reden weiter über unsere Speditionsfreunde.

Stellen Sie zunächst die API eines WeChat-Applets vor: onShareAppMessage(options)

Definieren Sie die onShareAppMessage-Funktion in Seite, um die Weiterleitungsinformationen der Seite festzulegen.

• Nur ​​wenn dieser Event-Handler definiert ist, wird die Schaltfläche „Weiter“ im Menü in der oberen rechten Ecke angezeigt

• Es wird aufgerufen wenn der Benutzer auf die Weiterleitungsschaltfläche klickt

• Dieses Ereignis muss ein Objekt zum Anpassen des Weiterleitungsinhalts zurückgeben

Optionsparameterbeschreibung

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

Selbst Definieren Sie das Weiterleitungsfeld

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

und es gibt einen weiteren Wert, nämlich shareTickets, der bei erfolgreicher Weiterleitung zurückgegeben wird und ein Array ist. Jedes Element ist ein shareTicket, entsprechend a Weiterleitungsobjekt

Lassen Sie uns zuerst über die API und dann über die Implementierung der Weiterleitung sprechen

Sehen Sie sich zuerst das Bild an:

Konfigurieren Sie zuerst wx.showShareMenu in onLoad

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

Dann konfigurieren Sie 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));
      }
    }
  },

Lassen Sie mich wx.getShareInfo erklären, mit dem Weiterleitungsdetails abgerufen werden können

Der vollständige js-Code ist

//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));
      }
    }
  },
})

Kluge Schüler sollten wissen, dass der nächste Schritt der WXML-Code ist

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

Eine freundliche Erinnerung daran, dass beim Klicken auf die Schaltfläche zum Teilen die Schaltfläche mit open-type= festgelegt werden muss „Teilen“, sonst funktioniert es nicht.

Wenn Sie denken, dass der Artikel gut und hilfreich für Sie ist, teilen Sie ihn bitte mit Ihren Freunden und liken Sie ihn. Wenn Sie etwas nicht verstehen, können Sie unten eine Nachricht hinterlassen.

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonWeiterleitungsfunktion des WeChat-Miniprogramms an Freunde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!