Nachdem Sie sich erfolgreich bei uniapp angemeldet haben, wechseln Sie zu anderen Seiten und aktualisieren Sie sie

Mit der Entwicklung des Internets ist die mobile Entwicklung immer wichtiger geworden. Auf dieser Grundlage entstand uniapp, wie es die Zeit erforderte, und hat sich heute zu einem beliebten plattformübergreifenden Framework für die mobile Entwicklung entwickelt. In Uniapp ist die Anmeldung eine sehr häufige Funktion, und das Aktualisierungsproblem ist auch ein Problem, das während des Entwicklungsprozesses berücksichtigt werden muss. In diesem Artikel wird detailliert beschrieben, wie Sie nach erfolgreicher Anmeldung in uniapp zu anderen Seiten springen und diese aktualisieren können.

1. Vorkenntnisse

Bevor wir mit der Einführung beginnen, müssen wir einige Vorkenntnisse in uniapp einführen.

1. Routing

Routing in uniapp wird durch die integrierten Methoden uni.navigateTo und uni.redirectTo implementiert. Unter anderem wird uni.navigateTo verwendet, um zur nächsten Seite zu springen und zur vorherigen Seite zurückzukehren. uni.redirectTo wird verwendet, um zur nächsten Seite umzuleiten, und kann nicht zur vorherigen Seite zurückkehren.

Darüber hinaus verfügt uniapp über uni.reLaunch zum Schließen aller Seiten und Öffnen der aktuellen Seite, uni.switchTab zum Springen zur tabBar-Seite und uni.navigateBack zum Zurückkehren zur vorherigen Seite.

2.vue.js-Framework

uniapp wird basierend auf dem vue.js-Framework implementiert. Daher müssen Sie während des Entwicklungsprozesses die relevante grundlegende Syntax und Funktionen von vue.js beherrschen, z. B. Komponentenentwicklung, Zustandsverwaltung und Lebensdauer Zyklus usw.

3. Asynchrone Anfrage

Bei der Implementierung der Anmeldefunktion muss eine Anfrage an den Hintergrund gesendet werden, um die Richtigkeit der Anmeldeinformationen des Benutzers zu überprüfen. Daher müssen Sie über die entsprechenden Kenntnisse der asynchronen Anforderungen von uni.request verfügen.

4. Lokaler Speicher

In uniapp können Sie uni.setStorageSync und uni.getStorageSync verwenden, um lokale Daten zu speichern und zu lesen. Lokaler Speicher hilft beim Teilen von Daten über mehrere Seiten hinweg und ermöglicht die dauerhafte Speicherung von Daten.

2. Lösungseinführung

Um nach erfolgreicher Anmeldung zu anderen Seiten zu springen, müssen wir die folgenden zwei Aufgaben ausführen:

1. Benutzeranmeldung auf anderen Seiten ermitteln Statusinformationen und erneutes Rendern der Seite

Als nächstes werden wir detailliert beschreiben, wie diese beiden Aufgaben erreicht werden.

1. Anmeldestatusinformationen des Benutzers speichern

Nachdem sich der Benutzer erfolgreich angemeldet hat, müssen wir die Anmeldestatusinformationen des Benutzers speichern. Der Implementierungsplan sieht wie folgt aus:

Schritt 1: Senden Sie in der Rückruffunktion einer erfolgreichen Anmeldung eine Anfrage an den Hintergrund, um die Anmeldestatusinformationen des Benutzers abzurufen und diese lokal zu speichern.

uni.request({
  url: 'http://www.example.com/login',
  data: {
    username: 'username',
    password: 'password'
  },
  success: (res) => {
    if(res.statusCode !== 200) {
      uni.showModal({
        content: '登录失败，请检查用户名和密码是否正确'
      })
    } else {
      // 保存用户登录状态信息
      uni.setStorageSync('isLogin', true)
      //跳转到其他页面
      uni.navigateTo({
        url: '/pages/other/other'
      })
    }
  }
})

In der Rückruffunktion einer erfolgreichen Anmeldung senden wir eine Anmeldeanfrage an den Hintergrund. Wenn die Anfrage erfolgreich ist, speichern wir die Anmeldestatusinformationen des Benutzers lokal. In diesem Beispiel setzen wir den Schlüsselnamen der Anmeldestatusinformationen des Benutzers auf isLogin und sein Wert ist true.

2. Stellen Sie fest, ob sich der Benutzer angemeldet hat, und rendern Sie die Seite auf anderen Seiten erneut.

Nachdem sich der Benutzer angemeldet hat und zu anderen Seiten gesprungen ist, müssen wir feststellen, ob sich der Benutzer auf anderen Seiten angemeldet hat, und die Seite erneut rendern Seite basierend auf den Anmeldestatusinformationen. Der Implementierungsplan sieht wie folgt aus:

Schritt 1: Stellen Sie in der onLoad-Lebenszyklusfunktion anderer Seiten fest, ob sich der Benutzer angemeldet hat.

onLoad() {
  if(!uni.getStorageSync('isLogin')) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

In der onLoad-Lebenszyklusfunktion anderer Seiten erhalten wir die lokal gespeicherten Benutzeranmeldestatusinformationen über uni.getStorageSync. Wenn isLogin nicht existiert, d. h. der Benutzer nicht angemeldet ist, leiten wir zur Anmeldeseite weiter, damit sich der Benutzer erneut anmelden kann.

Schritt 2: Bestimmen Sie in der onShow-Lebenszyklusfunktion anderer Seiten, ob der Benutzer angemeldet ist, und rendern Sie die Seite basierend auf den Anmeldestatusinformationen.

onShow() {
  if(uni.getStorageSync('isLogin')) {
    //重新渲染页面
    console.log('已经登录')
  } else {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

In der onShow-Lebenszyklusfunktion anderer Seiten erhalten wir auch die lokal über uni.getStorageSync gespeicherten Benutzeranmeldestatusinformationen. Wenn isLogin vorhanden ist, d. h. der Benutzer angemeldet ist, können wir die Seite neu rendern. Wenn isLogin nicht existiert, d. h. der Benutzer nicht angemeldet ist, leiten wir zur Anmeldeseite weiter, damit sich der Benutzer erneut anmelden kann.

3. Zusammenfassung

Dieser Artikel stellt die Lösung vor, um nach erfolgreicher Anmeldung in uniapp zu anderen Seiten zu springen und diese zu aktualisieren. Indem wir die Anmeldestatusinformationen des Benutzers speichern und feststellen, ob sich der Benutzer auf anderen Seiten angemeldet hat, und die Seite basierend auf den Anmeldestatusinformationen neu rendern, können wir die Anmeldefunktion des Benutzers besser implementieren und verwalten. Die oben genannten Lösungen dienen nur als Referenz und Entwickler können sie entsprechend ihren tatsächlichen Anforderungen ändern und optimieren.

Das obige ist der detaillierte Inhalt vonNachdem Sie sich erfolgreich bei uniapp angemeldet haben, wechseln Sie zu anderen Seiten und aktualisieren Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!