Comment encapsuler la méthode de saut dans Uniapp

Dans le processus de développement d'applications Uniapp, vous devez souvent accéder à différentes pages, telles que la page de connexion, la page du centre personnel, etc. Afin de faciliter le développement, nous pouvons encapsuler une méthode de saut pour gérer uniformément les sauts de page. Cet article explique comment encapsuler la méthode de saut dans uniapp.

1. Encapsuler la méthode de saut

1. Créez un nouveau fichier util.js pour stocker la méthode encapsulée et définissez une méthode nommée naviguerTo dans le fichier. Cette méthode reçoit deux paramètres, le premier paramètre est le chemin de la page cible et le deuxième paramètre correspond aux données qui doivent être transmises. Parmi eux, le paramètre path est obligatoire et les données sont facultatives.

// util.js

export function navigateTo(url, data = {}) {
  uni.navigateTo({
    url: `${url}?${getObjectKeys(data)
      .map(key => `${key}=${data[key]}`)
      .join('&')}`
  });
}

function getObjectKeys(obj) {
  return Object.keys(obj);
}

2. Dans la méthode, nous utilisons getObjectKeys pour obtenir tous les noms de clés dans l'objet de données, puis utilisons les méthodes map et join pour fusionner les paires clé-valeur en une chaîne. Nous pouvons brièvement présenter les méthodes map et join ici :

　La méthode map() crée un nouveau tableau, et le résultat est le résultat renvoyé après avoir appelé une fonction fournie pour chaque élément du tableau.

　La méthode join() convertit tous les éléments du tableau (s'il s'agit d'une chaîne, affichez-la directement ; s'il s'agit d'un tableau ou d'un objet, convertissez-le en chaîne) en une chaîne, puis concaténez la chaîne en une seule. chaîne. Et vous pouvez spécifier une chaîne comme séparateur pour séparer les éléments du tableau.

3. Enfin, nous exportons cette méthode pour l'utiliser par d'autres modules.

2. Utilisez la méthode de saut encapsulé

1. Là où vous devez accéder à la page cible, appelez la méthode encapsuléenavigaTo.

//index.vue

import { navigateTo } from '@/utils/util.js';

// 模拟获取用户登录状态
const isLogin = true;

export default {
  methods: {
    goLogin() {
      if (!isLogin) {
        navigateTo('/pages/login/login'); // 跳转到登录页面
      } else {
        navigateTo('/pages/personal/personal'); // 跳转到个人中心页面
      }
    }
  }
}

2. Dans l'exemple ci-dessus, nous déterminons si l'utilisateur est connecté en fonction de la valeur de isLogin. S'il n'est pas connecté, il accédera à la page de connexion. S'il est connecté, il accédera à la page du centre personnel. .

À ce stade, nous avons réussi à encapsuler une méthode de saut et à l'utiliser dans d'autres composants. De cette façon, nous pouvons éviter la confusion du code causée par une logique complexe de saut de page et améliorer la lisibilité et la maintenabilité du code.

3. Optimisation de la méthode

Bien que nous ayons encapsulé la méthode de saut, elle n'est pas parfaite et présente encore quelques défauts. Par exemple, si la page cible doit transmettre plusieurs paramètres, nous devons fusionner manuellement les paramètres, ce qui est plus gênant. Afin de résoudre ce problème, nous pouvons optimiser la méthode d’emballage.

1. Passez les paramètres dans un objet :

// index.vue

export default {
  methods: {
    goDetail() {
      navigateTo('/pages/detail/detail', {
        id: 123,
        name: 'uniapp封装跳转方法'
      });
    }
  }
}

2. Modifiez la méthode naviguerTo, utilisez JSON.stringify() pour convertir l'objet paramètre en une chaîne json, puis encodez-le et transmettez-le à la page cible comme valeur de la chaîne de requête :

// util.js

export function navigateTo(url, data = {}) {
  uni.navigateTo({
    url: `${url}?data=${encodeURIComponent(JSON.stringify(data))}`
  });
}

3. Une fois que la page cible a obtenu les paramètres, utilisez JSON.parse() pour les convertir en objets js :

// detail.vue

export default {
  onLoad(options) {
    this.queryParams = JSON.parse(decodeURIComponent(options.data));
  }
}

À ce stade, nous avons optimisé la méthode de saut pour transmettre rapidement plusieurs paramètres et commodément.

En bref, l'encapsulation de la méthode jump peut non seulement améliorer la lisibilité et la maintenabilité du code, mais également simplifier davantage l'écriture du code. J'espère que cet article pourra vous aider à mieux apprendre et utiliser 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!