So gelangen Sie von der uniAPP-Anmeldeseite zum Einkaufszentrum

Im heutigen Zeitalter des mobilen Internets ist der Aufstieg von APPs zu einem Trend geworden, und viele Menschen nutzen APPs, um ihr Leben zu erleichtern. Für Entwickler ist es sehr wichtig, ein gutes Entwicklungstool auszuwählen. uniAPP ist für viele APP-Entwickler die erste Wahl. Es unterstützt die Entwicklung mehrerer Plattformen, ist einfach zu verwenden und verfügt über umfassende Funktionen. Allerdings werden Entwickler auf einige Probleme stoßen, wenn sie uniAPP zum Entwickeln von APPs verwenden, z. B. wie sie die Anmeldeseite zur Mall-Seite springen lassen. In diesem Artikel stellen wir kurz vor, wie uniAPP die Funktion zum Anmelden und Springen zum Einkaufszentrum implementiert.

1. So implementieren Sie den Login-Sprung zum Einkaufszentrum

1. Implementierungsprinzip

Das Prinzip der Implementierung des Login-Sprunges zur Mall-Seite besteht darin, das Vue-Routing zu verwenden, um es zu implementieren auf das Ereignis des Benutzers und entscheiden Sie dann basierend auf dem Routing, zu welcher Seite gesprungen werden soll.

2. Implementierungsschritte

Zuerst fügen wir eine Schaltfläche hinzu, um zum Einkaufszentrum auf der Anmeldeseite zu springen. Wenn der Benutzer auf die Schaltfläche klickt, werden die folgenden Vorgänge ausgeführt:

(1) Zuerst muss das Routing-Modul von Vue ausgeführt werden eingeführt werden. Kann in die main.js-Datei eingeführt werden:

import Router from 'vue-router';

Vue.use(Router);

(2) Erstellen Sie eine index.js-Datei im Router-Ordner, um Routen zu definieren.

(3) Erstellen Sie in der Datei index.js eine Route, setzen Sie das Pfadattribut auf „/mall“ und das Komponentenattribut auf den Komponentennamen der Mall-Seite.

const router = new Router({

routes: [

{

path: '/mall',

name: 'mall',

component: Mall

}

]

});

(4) Führen Sie das Vue-Router-Modul in die Anmeldeseite ein und verwenden Sie die Methode $router.push(), um zum Einkaufszentrum zu springen.

< ;script>

export default {

methods: {

toMall() {

this.$router.push('/mall');

}

}

}

2. So erhalten Sie Parameter auf der Mall-Seite

Wenn die Anmeldeseite zur Mall wechselt, müssen Sie möglicherweise einige Parameter angeben. Zu diesem Zeitpunkt können Sie Parameter in der Sprungadresse übergeben und Parameter auf der Mall-Seite empfangen. Die spezifische Implementierungsmethode lautet wie folgt:

(1) Übergeben Sie Parameter, wenn Sie zur Anmeldeseite springen.

this.$router.push({

name: 'mall',

params: {

id: 1,

name: 'mall',

}

});

(2) Empfangen Sie Parameter auf der Mall-Seite.

< script>

export default {

props: ['id', 'name'],

}

3 So erhalten Sie Anmeldeinformationen auf der Mall-Seite

In der tatsächlichen Entwicklung, Die Seite des Einkaufszentrums muss die Anmeldeinformationen des Benutzers abrufen, um einige Vorgänge auszuführen, z. B. das Abrufen der Warenkorbinformationen, Bestellungen usw. des Benutzers. Zu diesem Zeitpunkt können wir die Benutzerinformationen beim Anmelden im lokalen Cache speichern und dann die Anmeldeinformationen über den lokalen Cache auf der Mall-Seite abrufen.

Die spezifische Implementierungsmethode lautet wie folgt:

(1) Wenn die Anmeldung erfolgreich ist, speichern Sie die Benutzerinformationen im lokalen Cache.

uni.setStorageSync('userInfo', JSON.stringify(userInfo));

(2) Erhalten Sie Benutzerinformationen von der Mall-Seite.

<script></p> <p>Exportstandard {</p> <p>data() {</p> <p>return {</p> <p>userInfo: null,</p> <p>}</p> <p>},</p> <p>created() {</p> <p>this.getUserInfo();</p> <p>},</p> <p>methods: {</p> <p> getUserInfo () {</p> <p>let userInfo = uni.getStorageSync('userInfo');</p> <p>if (userInfo) {</p> <p>this.userInfo = JSON.parse(userInfo);</p> <p>}</p> <p>}</p> <p>}</p> <p>} </p> <p></script>

Durch die obigen Schritte können wir die Funktion des Springens von der uniAPP-Anmeldeseite zur Mall-Seite realisieren und gleichzeitig das Problem lösen, wie Parameter empfangen und Anmeldeinformationen im Einkaufszentrum abgerufen werden Seite. Ich hoffe, dass dieser Artikel für uniAPP-Entwickler hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo gelangen Sie von der uniAPP-Anmeldeseite zum Einkaufszentrum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!