Eine kurze Analyse der Kommunikation zwischen Webseiten und kleinen Programmen

Wie kommuniziere ich zwischen Webseiten und Miniprogrammen? Der folgende Artikel führt Sie in das relevante Wissen über die Kommunikation zwischen Webseiten und kleinen Programmen ein. Ich hoffe, er wird Ihnen hilfreich sein!

Unser WeChat-Applet verwendet die Web-View-Methode zum Einbetten von H5-Projekten, wodurch der Entwicklungsaufwand reduziert wird. Im Folgenden werden wir auf die funktionalen Anforderungen von Webseiten und der Applet-Kommunikation stoßen und Lösungen.

Von Miniprogrammen bereitgestellte Funktionen

WeChat bietet eine Methode für Webseiten zum Senden von Nachrichten an Miniprogramme: wx.miniProgram.postMessage Diese Methode sendet Nachrichten an Miniprogramme und wird zu bestimmten Zeiten verarbeitet (Miniprogrammrückzug, Komponentenzerstörung, Teilen) löst das Nachrichtenereignis der Komponente aus.

Die spezifischen API-Details können angezeigt werden WeChat Open Document

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

Eine kurze Einführung in die Verwendung B. wenn Seite A spezielle Freigabeinhalte wie Weiterleitungstitel, Miniaturansichten usw. einrichten muss. Sie können den Variablenwert auf der Webseite festlegen und ihn an die Applet-Webseite senden time Die benutzerdefinierte Freigabefunktion ist abgeschlossen, aber die postMessage-Methode kann Nachrichten nur in bestimmten Szenarien abrufen. Wie kann also Kommunikation erhalten werden, wenn es sich nicht um ein bestimmtes Szenario handelt?

Ein einfacher Weg zur Kommunikation

Die von mir angebotene Lösung ist möglicherweise nicht die optimale oder universellste, kann aber als Alternative verwendet werden, wenn Sie auf ein Problem stoßen.

1. Szenenwiederherstellung

Sie müssen die Stadt auswählen, wenn Sie das Miniprogramm zum ersten Mal auswählen Wenn Sie das Miniprogramm erneut aufrufen, müssen Sie keine Stadt mehr auswählen. Die Funktion ist wie folgt: Screenshot

Nach der Auswahl der Stadt wird diese in der oberen rechten Ecke der Homepage angezeigt

Da sowohl die Stadtauswahlseite als auch die Homepage mit kleinen Programmen über das Web eingebettet sind. Ansicht, es wird offensichtlich auf der H5-Seite zwischengespeichert. Cache-Informationen können in Miniprogrammen nicht abgerufen werden. 2. Lösung

Nachdem ich mit meinem Back-End-Partner kommuniziert habe, habe ich ihn gebeten, mir eine Schnittstelle zur Verfügung zu stellen, um die Stadt-ID mit den Benutzerinformationen zu verknüpfen Nehmen Sie während des Programms kleine Änderungen am Benutzer vor. Die vom Benutzer zuletzt ausgewählte Stadt-ID wird abgerufen und dann im Miniprogramm zwischengespeichert, sodass der Benutzer die Stadt beim erneuten Aufrufen des Miniprogramms nicht erneut auswählen muss

Webseite

let shareData = {
  path: '转发路径',
  title: '自定义转发标题',
  imageUrl: '缩略图url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });

Miniprogramm

nach Erhalt der Stadt-ID Zwischenspeichern Sie es über wx.setStorageSync für die spätere Verwendung.

<web-view bindmessage=&#39;getMessage&#39; src=&#39;{{ src }}&#39;></web-view>

Zusammenfassung

„Sie können Lehrer werden, indem Sie die Vergangenheit Revue passieren lassen und Neues lernen.“

Wenn Sie auf bestimmte Wissenspunkte zurückblicken, haben Sie manchmal neue Ideen und teilen diese mit Ihnen.ヾ(◍°∇°◍)ﾉﾞ

Ein kleines Gedicht

Ich habe auf das Datum geschaut und festgestellt, dass Dezember der letzte Monat des Jahres 2021 ist. Ich habe zuvor ein kleines Gedicht geschrieben, das jetzt einigermaßen zu mir passt meiner Stimmung, ich habe auch einige Segnungen für mich und alle.

// 获取从网页发送来的消息
getMessage(e) {
  const getMessage (e) {
  // data是多次postMessage的参数组成的数组
  const { data } = e.detail;
  // 需要取最后一条数据
  let shareMessage = data[data.length - 1];
  this.shareMessage = JSON.parse(shareMessage);
};

// 设置分享
onShareAppMessage(options) {
  return {
    title: this.shareMessage.title,
    path:  this.shareMessage.path,
    imageUrl: this.shareMessage.imageUrl,
  };
}

【Verwandte Lernempfehlungen:

Mini-Tutorial zur Programmentwicklung

】

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Kommunikation zwischen Webseiten und kleinen Programmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!