uniapp sets the current page title

In uniapp, we can set the current page title to let users understand the content of the current page more clearly. In this article, we will explore how to set the current page title using uniapp.

1. Use the page configuration file to set the current page title

In uniapp, we can set the current page title by using the page configuration file. The page configuration file can create a file named "page.json" in the directory where the page is located. In this file, we can set the title of the current page, navigation bar style, page background color, etc.

For example, we can set a title in the page.json file:

{
  "navigationBarTitleText": "我的博客",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#F78E44"
}

In this example, we set the page title to "My Blog" and the navigation bar title text color to White, the navigation bar background color is orange.

2. Use JSAPI to set the current page title

In addition to using the page configuration file, we can also use JSAPI to set the current page title. JSAPI is a set of operating system native APIs provided by uniapp, through which we can call many system functions, such as obtaining device information, sending text messages, making calls, etc.

In uniapp, we can use the uni.setNavigationBarTitle() method to set the current page title. This method receives an object as a parameter, where the title attribute represents the title to be set.

For example, we can call this method in the page's life cycle function onLoad() and set the title of the current page to "My Album":

onLoad: function () {
  uni.setNavigationBarTitle({
    title: '我的相册'
  })
}

3. Set the current page in the component Title

In uniapp, we can use components to build pages. If we want to set the current page title in the component, we can use the page communication API provided by uniapp.

In the child component, we can send an event to the parent component through the uni.$emit() method and pass a title as a parameter. The parent component can listen to this event and get the passed title, and then use the uni.setNavigationBarTitle() method to set the current page title.

For example, in a picture component, we can send a picture title to the parent component, and the parent component sets the current page title:

// 子组件
methods: {
  navigateToPhotoDetail: function () {
    let title = this.photoTitle
    uni.$emit('set-page-title', title)
    uni.navigateTo({
      url: '/pages/photo-detail/photo-detail'
    })
  }
}

// 父组件
onLoad: function () {
  uni.$on('set-page-title', function (title) {
    uni.setNavigationBarTitle({
      title: title
    })
  })
}

In this example, we use the picture component In the click event, an event named "set-page-title" is sent to the parent component through the uni.$emit() method, and a title is passed as a parameter. When the page is loaded, the parent component listens to the event "set-page-title" through the uni.$on() method, and calls the uni.setNavigationBarTitle() method to set the current page title.

Summary

In uniapp, we can use page configuration files, JSAPI, page communication API and other methods to set the current page title. By setting the title of the current page, we can help users understand the content of the current page more clearly and improve user experience.

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