uniapp saute et passe les paramètres pour changer le titre

Avec l'essor des applications mobiles et l'augmentation du nombre d'utilisateurs, de plus en plus de développeurs choisissent d'utiliser uniapp comme cadre de développement multiplateforme. Dans le processus de développement actuel, nous sommes souvent confrontés au besoin de passer aux pages et de transmettre des paramètres. En même temps, nous devons également modifier le titre en fonction du contenu des différentes pages. Ainsi, cet article présentera comment implémenter les fonctions de saut de paramètres et de modification de titres dans uniapp.

1. Saut de route dans uniapp

uniapp est un framework basé sur Vue.js, et son saut de route est fondamentalement le même que Vue.js. Dans uniapp, nous pouvons utiliser la méthode uni.navigateTo() pour accéder à la page, et nous pouvons également utiliser la méthode uni.navigateBack() pour revenir à la page précédente. Il est à noter que lors de l'utilisation du simulateur uni-app côté H5 (page web), la méthode uni.navigateBack() ne peut pas être utilisée.

Ce qui suit est un exemple de code pour accéder à la page cible :

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

2. Passer les paramètres

Dans le développement réel, nous devons souvent transmettre des données entre les pages. Par exemple, après vous être connecté, nous devons afficher le nom d'utilisateur et l'avatar de l'utilisateur sur la page du centre personnel. Dans uniapp, passer des paramètres est très simple, il suffit d'ajouter des paramètres dans le lien de saut.

Ce qui suit est un exemple de code pour transmettre des paramètres :

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

Dans la page cible (c'est-à-dire targetPage), nous pouvons utiliser la méthode uni.getStorageSync() pour obtenir les paramètres transmis. Voici un exemple de code pour obtenir des paramètres :

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

Il convient de noter que lors de la transmission de paramètres, il est recommandé d'utiliser la méthode encodeURIComponent() pour l'encodage afin d'éviter les caractères tronqués. Dans la page cible, nous pouvons utiliser la méthode decodeURIComponent() pour décoder.

3. Changer le titre

Dans uniapp, nous pouvons mieux afficher le contenu de la page en définissant le titre de la page, ce qui permet aux utilisateurs de comprendre plus facilement le contenu présenté sur la page actuelle. Vous pouvez définir la propriété « navigationBarTitleText » dans le fichier page.json ou utiliser la méthode uni.setNavigationBarTitle().

Ce qui suit est un exemple de code pour définir le titre de la page :

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

Il est à noter que :

1. Si vous définissez le titre de la barre de navigation dans le fichier page.json, il sera écrasé dans le fichier js via la méthode uni.setNavigationBarTitle() Définir le titre.
2. Cela ne prend effet que sur la page actuelle. Vous devez réinitialiser le titre à chaque fois que vous entrez dans une nouvelle page.

4. Implémenter les paramètres de saut et modifier le titre

Pour la nécessité de transmettre des paramètres et de modifier le titre lors du passage à la page, nous pouvons y parvenir des manières suivantes :

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

Il convient de noter que le saut doit réussir. Définissez le titre de la page cible dans la fonction de rappel, sinon le titre risque de ne pas être modifié avec succès.

5. Résumé

Cet article présente comment implémenter les opérations de base de saut de page, de passage de paramètres et de changement de titre dans uniapp. Les développeurs peuvent personnaliser davantage le code selon les besoins des projets réels. Pendant le développement, quels que soient les besoins, vous pouvez trouver un moyen de les implémenter dans 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!