Comment modifier le titre de la page dans uniapp

Dans uniapp, nous devons souvent modifier le titre de la page. Par exemple, lors de la mise en œuvre de la fonction de partage WeChat, vous devez définir le titre du partage en modifiant le titre de la page. Ci-dessous, je présenterai en détail comment modifier le titre de la page dans uniapp.

Tout d'abord, dans uniapp, nous pouvons utiliser le plug-in vue-meta-info pour modifier le titre, la description, les mots-clés et autres méta-informations de la page. L'utilisation de ce plug-in est la même que dans les projets Vue ordinaires. Après installation, dans le composant qui doit modifier le titre, nous pouvons utiliser le code suivant pour définir le titre de la page :

export default {
  name: 'MyComponent',
  metaInfo() {
    return {
      title: '页面标题'
    }
  }
}

Parmi eux, name représente le nom du composant et est utilisé comme préfixe de titre de la page, et la méthode metaInfo() renvoie un objet contenant des méta-informations. Nous pouvons définir l'attribut title dans cet objet pour modifier le titre de la page.

Il est à noter que lors de l'utilisation du plug-in vue-meta-info, vous devez enregistrer le plug-in globalement dans main.js :

import Vue from 'vue'
import VueMeta from 'vue-meta-info'
Vue.use(VueMeta)

En plus du plug-in vue-meta-info, nous peut également utiliser la personnalisation fournie par la barre de navigation uni-app et la configuration de la page pour modifier le titre de la page. La méthode spécifique est la suivante :

1. Barre de navigation personnalisée

Dans uni-app, nous pouvons modifier le titre de la page en définissant une barre de navigation personnalisée. Nous pouvons ajouter le code suivant dans le modèle supérieur du composant de page :

<template>
  <view>
    <custom-navigation :title="title"></custom-navigation>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import CustomNavigation from '@/components/custom-navigation'
export default {
  components: { CustomNavigation },
  data() {
    return {
      title: '页面标题'
    }
  }
}
</script>

Dans ce code, nous introduisons un composant de barre de navigation personnalisé et utilisons l'attribut title pour définir le titre de la page. Il est à noter que l'attribut title ici est un attribut du composant de barre de navigation personnalisée et doit être défini dans la définition du composant :

export default {
  name: 'CustomNavigation',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 自定义返回事件
    handleClickBack() {
      uni.navigateBack()
    }
  }
}

Dans ce composant de barre de navigation personnalisée, nous définissons un attribut props title pour recevoir le parent La page titre transmis par le composant. Dans le même temps, nous pouvons également ajouter notre propre code métier à ce composant de barre de navigation personnalisée, comme un bouton de retour personnalisé, etc.

2. Configuration de la page

Nous pouvons également définir des informations de configuration indépendantes pour chaque page dans le fichier pages.json dans uni-app. Par exemple, nous pouvons ajouter le code suivant au fichier pages.json pour définir le titre d'une page :

{
  "path": "pages/my-page/my-page",
  "style": {
    "navigationBarTitleText": "页面标题"
  }
}

Dans ces informations de configuration, nous modifions le titre de la page en définissant l'attribut navigationBarTitleText. A noter que cette méthode s'applique uniquement à la page native d'uni-app. Pour les composants de page d'uni-app, vous devez utiliser le plug-in vue-meta-info ou une barre de navigation personnalisée pour la modifier.

Pour résumer, nous pouvons modifier le titre de la page dans uniapp via le plug-in vue-meta-info, la barre de navigation personnalisée et la configuration de la page. Dans le développement réel, nous pouvons choisir différentes méthodes selon des scénarios spécifiques pour améliorer l'efficacité de notre développement.

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!