uniappはタイトル名を動的に設定します

uniapp を使用して開発している場合、Web ページのタイトルを動的に設定する必要がある状況によく遭遇します。たとえば、モバイル アプリを開発する場合、現在使用しているモジュールの名前や現在閲覧しているコンテンツの名前をページ タイトルに表示する必要がある場合、Web ページを動的に設定する必要があります。タイトル。

uniapp では、グローバル構成ファイルを変更することで、ページ タイトル名を動的に設定する効果を実現できます。以下に具体的な実装方法を説明していきます。

1. main.js ファイルでグローバル構成を実行する

uniapp では、通常、main.js ファイルでグローバル構成を実行します。このファイルはプログラム全体のエントリ ファイルであるため、ここでいくつかのグローバル構成操作を実行できます。

Web ページのタイトル名を設定する必要がある場合は、次のコードを main.js ファイルに追加できます:

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 设置页面标题名称
Vue.prototype.$setTitle = function (title) {
  uni.setNavigationBarTitle({
    title: title || ''
  });
};

App.mpType = 'app';

const app = new Vue({
  ...App
});

app.$mount();

上記のコードでは、Vue プロトタイプ メソッドを定義しました。 $setTitle()、Web ページのタイトル名を動的に設定するために使用されます。このメソッドは、ページのタイトル名を設定できる uni.setNavigationBarTitle() メソッドを呼び出します。

タイトル名を設定するとき、タイトル名パラメータ title を渡すことも、パラメータを渡すこともできないことに注意してください。パラメータが渡されない場合、タイトル名は次のように設定されます。デフォルトでは空文字。

2. ページ コンポーネントで $setTitle() メソッドを呼び出します

ページ コンポーネントで $setTitle() メソッドを呼び出して、Web ページのタイトル名を動的に設定します。サンプル コードを使用して説明します。

<template>
  <view class="index">
    <view class="content">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      title: '首页'
    };
  },
  onReady() {
    this.$setTitle(this.title);
  },
  methods: {
    ...
  }
};
</script>

上記のコードでは、Index という名前のページ コンポーネントを定義します。これは、 data() data に初期値 "Home Page" を持つ title 属性を定義します。 onReady() ライフサイクルでは、$setTitle() メソッドを呼び出して Web ページのタイトルを設定します。

ページコンポーネントが異なると、$setTitle() メソッドを異なる方法で呼び出す必要があることに注意してください。したがって、実際の開発プロセスでは、$setTitle() メソッドを柔軟に使用してページ タイトルを設定する必要があります。

まとめると、プロトタイプメソッド $setTitle() を Vue に追加し、ページコンポーネント内で合理的に呼び出すことで、uniapp で Web ページのタイトル名の動的な設定を実現できます。

以上がuniappはタイトル名を動的に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。