WeChat Applet Offline -Formulareingabe: Wie speichern und senden Sie Benutzerdaten auch ohne Netzwerk?

WeChat Applet Offline -Formular: Daten können ohne Netzwerk eingereicht werden

Viele Entwickler hoffen, dass Mini -Programme auch dann eine gute Benutzererfahrung bieten können, auch wenn sie offline oder schlechtes Netzwerk sind. In diesem Artikel wird detailliert eingeführt, wie die Funktion der Offline -Formularübermittlung in WeChat -Applets implementiert wird, und wird mit Codebeispielen geliefert.

Anforderungen: Erstellen Sie ein WeChat -Applet mit einem Formular. Selbst ohne Netzwerk oder Instabilität des Netzwerks können Benutzer das Formular ausfüllen, die Daten lokal speichern und nach dem Wiederherstellen des Netzwerks automatisch einreichen.

Implementierungsmethode: Das WeChat -Applet selbst unterstützt keine vollständigen Offline -Funktionen, aber wir können wx.setStorageSync , wx.getStorageSync und wx.onNetworkStatusChange kombinieren, um Offline -Funktionen zu simulieren.

Schritte und Code:

1. Konfigurieren von Netzwerk -Zeitüberschreitungen (App.JSON): Konfigurieren Sie die Zeitlimit für Netzwerkanforderungen in app.json um Anforderungen besser zu behandeln, wenn die Netzwerkbedingungen nicht gut sind:

 {
  "Seiten": ["Seiten/Form/Form"],
  "Fenster": {
    "HintergrundTextStyle": "Licht",
    "NavigationBarbackgroundColor": "#fff",
    "NavigationBartitletExt": "Offline -Formular",
    "NavigationBartextstyle": "Schwarz"
  },
  "NetworkTimeout": {
    "Anfrage": 10000,
    "DownloadFile": 10000
  },
  "Debug": Richtig
}

2. Formularseite (Seiten/Form/Form.WXML): (hier weggelassen, erstellen Sie ein Formular entsprechend den tatsächlichen Bedürfnissen)

3. Formularlogik (Seiten/Form/Form.JS): Diese Datei ist für das Sammeln von Formdaten, lokalen Speicher- und Netzwerkstatusprüfungen verantwortlich:

 Seite({
  Daten: {
    FormData: {}
  },
  subjektinform: function (e) {
    const formData = e.detail.value;
    this.saveformData (FormData);
    this.CheckNetworkandSubmit ();
  },
  SaveFormData: Funktion (FormData) {
    wx.setStorageSync ('formData', formData);
  },
  checkNETWORKANDSUBMIT: function () {
    konstant das = dies;
    wx.getNetworkType ({{
      Erfolg: Funktion (res) {
        if (res.networkType! == 'none') {
          that.submitformData ();
        } anders {
          wx.showtoast ({title: 'net ist nicht verfügbar, Daten werden gespeichert', icon: 'keine'});
        }
      }
    });
  },
  subineFormData: function () {
    const formData = wx.getStorageSync ('FormData');
    wx.request ({{
      URL: "Ihre Serverschnittstelle",
      Methode: 'Post',
      Daten: Formdata,
      Erfolg: Funktion (res) {
        wx.showtoast ({title: 'erfolgreicher', icon: 'success'});
        wx.removestorageSync ('formData');
      },
      fehler: function (res) {
        wx.showtoast ({Titel: 'Einreichung fehlgeschlagen, bitte versuchen Sie es erneut', Symbol: 'None'});
        // Logik wiederholen können hier hinzugefügt werden}
    });
  }
});

4. Network Status Listening (App.JS): Hören Sie Änderungen der Netzwerkstatus in app.js an und versuchen Sie, lokal gespeicherte Daten zu übermitteln, wenn das Netzwerk wiederhergestellt wird:

 App ({{
  onlaunch: function () {
    konstant das = dies;
    wx.onnetworkStatuSchange (Funktion (res) {{
      if (res.isconnected) {
        const formData = wx.getStorageSync ('FormData');
        if (formData) {
          that.submitformData (FormData);
        }
      }
    });
  },
  subineFormData: function (formData) {
    // wie subjekteFormData -Funktion in Seiten/Form/Form.js}
});

Denken Sie daran, '你的服务器接口地址' im Code durch Ihre tatsächliche Serverschnittstelle zu ersetzen. Entwickler müssen die Fehlerbehebung und die Wiederholung von Mechanismen auf der Grundlage der tatsächlichen Bedingungen verbessern.

Das obige ist der detaillierte Inhalt vonWeChat Applet Offline -Formulareingabe: Wie speichern und senden Sie Benutzerdaten auch ohne Netzwerk?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!