uniapp dynamically sets title name

When developing using uniapp, we often encounter situations where we need to dynamically set the title of the web page. For example, when developing a mobile app, we may need to have the page title display the name of the module we are currently in or the name of the content we are currently browsing. In this case, we need to dynamically set the web page title.

In uniapp, we can achieve the effect of dynamically setting the page title name by changing the global configuration file. Below I will explain in detail how to implement it.

1. Perform global configuration in the main.js file

In uniapp, we generally perform global configuration in the main.js file. Because this file is the entry file for the entire program, we can perform some global configuration operations here.

When we need to set the title name of the web page, we can add the following code to the main.js file:

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();

In the above code, we defined a Vue prototype method $setTitle(), using Used to dynamically set the title name of a web page. This method calls the uni.setNavigationBarTitle() method, which can set the title name of the page.

It should be noted that when setting the title name, we can pass in a title name parameter title, or we can not pass in the parameter. If no parameter is passed in, the title name will be set to an empty character by default. string.

2. Call the $setTitle() method in the page component

Call the $setTitle() method in the page component to dynamically set the webpage title name. Let's use a sample code to explain:

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

In the above code, we define a page component named Index, which defines a title attribute with an initial value of "Home Page" in the data() data . In the onReady() life cycle, we call the $setTitle() method to set the web page title.

It should be noted that in different page components, we need to call the $setTitle() method differently. Therefore, in the actual development process, we need to flexibly use the $setTitle() method to set the page title.

To sum up, by adding the prototype method $setTitle() to Vue and calling it reasonably in the page component, we can realize the dynamic setting of the webpage title name in uniapp.

The above is the detailed content of uniapp dynamically sets title name. For more information, please follow other related articles on the PHP Chinese website!