Comment accéder au centre commercial depuis la page de connexion uniAPP

À l’ère actuelle de l’Internet mobile, l’essor des applications est devenu une tendance et de nombreuses personnes utilisent les applications pour faciliter leur vie. Pour les développeurs, il est très important de choisir un bon outil de développement. UniAPP est le premier choix de nombreux développeurs d'applications. Il prend en charge le développement de plusieurs plates-formes, est facile à utiliser et possède des fonctions complètes. Cependant, les développeurs rencontreront certains problèmes lors de l'utilisation d'uniAPP pour développer des applications, comme par exemple comment faire passer la page de connexion à la page du centre commercial. Dans cet article, nous présenterons brièvement comment uniAPP implémente la fonction de connexion et d'accès au centre commercial.

1. Comment implémenter le saut de connexion au centre commercial

1. Principe de mise en œuvre

Le principe de réalisation du saut de connexion à la page du centre commercial dans uniAPP est d'utiliser le routage Vue pour l'implémenter. En termes simples, l'événement de saut est déclenché en fonction. sur l'événement de l'utilisateur, puis décidez à quelle page accéder en fonction du routage.

2. Étapes de mise en œuvre

Nous ajoutons d'abord un bouton pour accéder au centre commercial dans la page de connexion. Lorsque l'utilisateur clique sur le bouton, les opérations suivantes sont effectuées :

(1) Tout d'abord, le module de routage de Vue doit. être introduit. Peut être introduit dans le fichier main.js :

import Router from 'vue-router' ;

Vue.use(Router);

(2) Créez un fichier index.js dans le dossier du routeur pour définir les routes.

(3) Dans le fichier index.js, créez un itinéraire, définissez l'attribut path sur "/mall" et l'attribut composant sur le nom du composant de la page du centre commercial.

const router = new Router({

routes : [

{

chemin : '/mall',

nom : 'mall',

composant : Mall

}

]

});

(4) Introduisez le module Vue-router dans la page de connexion et utilisez la méthode $router.push() pour accéder au centre commercial.

< ;script>

export par défaut {

méthodes : {

toMall() {

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

}

}

}

2. Comment recevoir les paramètres sur la page du centre commercial

Lorsque la page de connexion accède au centre commercial, vous devrez peut-être y apporter certains paramètres. À ce stade, vous pouvez transmettre des paramètres dans l'adresse de saut et recevoir des paramètres sur la page du centre commercial. La méthode de mise en œuvre spécifique est la suivante :

(1) Transmettez les paramètres lors du passage à la page de connexion.

this.$router.push({

name: 'centre commercial',

params: {

id: 1,

name: 'centre commercial',

}

});

(2) Recevez les paramètres sur la page du centre commercial.

< script>

export default {

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

}

3. Comment obtenir les informations de connexion sur la page du centre commercial

En développement réel, le centre commercial La page doit obtenir les informations de connexion de l'utilisateur pour effectuer certaines opérations, telles que l'obtention des informations sur le panier d'achat de l'utilisateur, les commandes, etc. À ce stade, nous pouvons stocker les informations utilisateur dans le cache local lors de la connexion, puis obtenir les informations de connexion via le cache local sur la page du centre commercial.

La méthode d'implémentation spécifique est la suivante :

(1) Une fois la connexion réussie, stockez les informations utilisateur dans le cache local.

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

(2) Obtenez des informations sur l'utilisateur à partir de la page du centre commercial.

<script></p> <p>export par défaut {</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>

Grâce aux étapes ci-dessus, nous pouvons réaliser la fonction de passer de la page de connexion uniAPP à la page du centre commercial, et en même temps résoudre le problème de la façon de recevoir les paramètres et d'obtenir les informations de connexion dans le centre commercial. page. J'espère que cet article pourra être utile aux développeurs d'uniAPP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!