Detaillierte Erläuterung des Datenübertragungsprozesses, wenn das WeChat-Applet von der untergeordneten Seite zur übergeordneten Seite zurückkehrt

Y2J
Freigeben: 2017-04-27 14:59:55
Original
1937 Leute haben es durchsucht

Wir wissen, dass Sie im WeChat-Applet beim Navigieren oder Umleiten im Allgemeinen Parameter über die URL übertragen und diese URL-Parameter dann in den onLoad-Funktionsparametern der Zielseite abrufen können, wenn Sie von einer Seite zur anderen wechseln. Zum Beispiel:

// 源页面A相关代码
wx.navigateTo({
  url: "/pages/mypage/mypage?a=1&b=2"
})

// 目标页面B相关代码
Page({
  onLoad: function (options) {
    var a = options.a; // 值:1
    var b = options.b; // 值:2
  }
})
Nach dem Login kopieren

Diese Methode ist jedoch nur wirksam, wenn die Zielseite noch nicht erstellt wurde. Denn die onLoad-Methode einer Seite wird im Lebenszyklus der Seite nur einmal ausgeführt.

Betrachten wir das folgende Szenario:

1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】
Nach dem Login kopieren

Für ein praktischeres Beispiel, wie in der Abbildung unten gezeigt, trage ich die Daten auf dieser Formularseite A ein:

Detaillierte Erläuterung des Datenübertragungsprozesses, wenn das WeChat-Applet von der untergeordneten Seite zur übergeordneten Seite zurückkehrt

Seite A

Dann gibt es auf dieser Seite eine Suchschaltfläche, um zu einer anderen Sicherheitscode-Suchseite B zu springen:

Detaillierte Erläuterung des Datenübertragungsprozesses, wenn das WeChat-Applet von der untergeordneten Seite zur übergeordneten Seite zurückkehrt

Seite B

Wenn ich in dieser Suchliste einen Sicherheitscode auswähle, kehre ich zur vorherigen Formularseite zurück und setze mein Unvollendetes fort Vorgänge zum Ausfüllen und Absenden von Formularen.

Dieses Szenario ist sehr vernünftig und häufig.

Aber denken wir darüber nach: Wie können wir den auf Seite B ausgewählten Sicherheitscode auf Seite A zurückgeben, wenn wir Seite B verlassen und zu Seite A zurückkehren? Wie verwende ich eine URL, um Parameter in navigationTo() zu übertragen?

Basierend auf dem Seitenlebenszyklus lautet unsere Antwort: Nein!

Was kann also getan werden?

Methode 1: Globalen Datenspeicher verwenden
  • Speichern Sie die Daten, die an das App-Objekt übergeben werden sollen (z. B. das Attribut globalData).

  • Die zu übertragenden Daten werden im lokalen Datencache (Storage) des Miniprogramms gespeichert.

Wenn wir beispielsweise gerade dabei sind, Seite B zu verlassen, tätigen wir den folgenden Aufruf:

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一个页面
  }
})
Nach dem Login kopieren

Auf diese Weise, wenn wir zur vorherigen Seite zurückkehren, Wir können durch Lesen dieser globalen Speicherbereiche die Daten erhalten, die wir benötigen.

Diese Methode weist jedoch auch offensichtliche Mängel auf. Da es sich um einen globalen Datenspeicher handelt, müssen Sie beim Speichern dieser Daten die globalen Daten sorgfältig verwalten (wenn sie zerstört werden). Andernfalls treten Nebenwirkungen auf, wenn Sie nicht vorsichtig sind.

Methode 2: Erhalten und betreiben Sie das Zielseitenobjekt direkt aus dem Seitenrouting-Stack

Diese Methode ruft den aktuellen Seitenrouting-Stack ab, indem Sie die API des Miniprogramms aufrufen: getCurrentPages() Informationen, die entsprechenden Das Seitenobjekt wird in diesem Routing-Stack entsprechend der Routing-Reihenfolge der Seite gespeichert. Wir können problemlos das vollständige Page-Objekt der vorherigen Seite abrufen, wodurch es möglich wird, die Eigenschaften und Methoden des Page-Objekts direkt aufzurufen.

Wie unten gezeigt:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})
Nach dem Login kopieren

Im Vergleich zur globalen Datenspeichermethode ist diese Methode logisch viel klarer und es gibt keinen zusätzlichen Verwaltungsaufwand für die Datenvernichtung.

Kurz gesagt, wenn Sie derzeit auf ein solches Szenario stoßen, empfehle ich Ihnen, Methode 2 zum Entwerfen Ihres Codes zu verwenden. Ich hoffe auch, dass das Miniprogramm-Framework einen besseren und eleganteren Weg zur Lösung dieses Datenrückgabeproblems einführen kann.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Datenübertragungsprozesses, wenn das WeChat-Applet von der untergeordneten Seite zur übergeordneten Seite zurückkehrt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!