uniappでページタイトルを変更する方法

uniapp では、ページのタイトルを変更する必要がよくあります。たとえば、WeChat 共有機能を実装する場合、ページ タイトルを変更して共有タイトルを設定する必要があります。以下では、uniappでページタイトルを変更する方法を詳しく紹介します。

まず、uniapp では、vue-meta-info プラグインを使用して、ページのタイトル、説明、キーワード、その他のメタ情報を変更できます。このプラグインの使用方法は、通常の Vue プロジェクトと同じです。インストール後、タイトルを変更する必要があるコンポーネントで、次のコードを使用してページ タイトルを設定できます。

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

このうち、name はコンポーネントの名前を表し、コンポーネントのタイトル接頭辞として使用されます。ページとmetaInfo() メソッド 次に、メタ情報を含むオブジェクトが返されるので、このオブジェクトに title 属性を設定して、ページのタイトルを変更できます。

vue-meta-info プラグインを使用する場合は、main.js でプラグインをグローバルに登録する必要があることに注意してください:

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

vue-メタ情報プラグインを使用すると、uni-app が提供するカスタム ナビゲーション バーとページ構成を使用して、ページ タイトルを変更することもできます。具体的な方法は次のとおりです。

1. カスタム ナビゲーション バー

uni-app では、カスタム ナビゲーション バーを設定することでページ タイトルを変更できます。次のコードをページ コンポーネントの最上部のテンプレートに追加できます。

<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>

このコードでは、カスタム ナビゲーション バー コンポーネントを導入し、title 属性を使用してページ タイトルを設定します。ここでの title 属性はカスタム ナビゲーション バー コンポーネントの属性であり、コンポーネント定義で定義する必要があることに注意してください。

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

このカスタム ナビゲーション バー コンポーネントでは、props 属性 title を定義します。親コンポーネントによって渡されたページ タイトルを受け取ります。同時に、カスタムの戻るボタンなどの独自のビジネス コードをこのカスタム ナビゲーション バー コンポーネントに追加することもできます。

2. ページ構成

uni-app の Pages.json ファイルで、ページごとに独立した構成情報を設定することもできます。たとえば、pages.json ファイルに次のコードを追加して、ページのタイトルを設定できます。

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

この構成情報では、navigationBarTitleText 属性を設定してページ タイトルを変更します。この方法は uni-app のネイティブ ページにのみ適用されることに注意してください。uni-app のページ コンポーネントについては、vue-meta-info プラグインまたはカスタム ナビゲーション バーを使用して変更する必要があります。

要約すると、vue-meta-info プラグイン、カスタム ナビゲーション バー、ページ構成を使用して、uniapp のページのタイトルを変更できます。実際の開発では、特定のシナリオに応じてさまざまな方法を選択して、開発効率を向上させることができます。

以上がuniappでページタイトルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。