uniapp jumps and passes parameters to change the title

With the rise of mobile applications and the increase in the number of users, more and more developers are beginning to choose to use uniapp as a cross-platform development framework. In the actual development process, we often encounter the need to jump to pages and pass parameters. At the same time, we also need to change the title according to the content of different pages. So, this article will introduce how to implement the functions of jumping parameters and changing titles in uniapp.

1. Route jump in uniapp

Uniapp is a framework based on Vue.js, and its route jump is basically the same as Vue.js. In uniapp, we can use the uni.navigateTo() method to jump to the page, and we can also use the uni.navigateBack() method to return to the previous page. It should be noted that when using the uni-app simulator in the H5 side (web page), the uni.navigateBack() method cannot be used.

The following is a sample code that jumps to the target page:

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

2. Pass parameters

In actual development, we often need to pass data between pages. For example, after logging in, we need to display the user's username and avatar on the personal center page. In uniapp, passing parameters is very simple, we only need to add parameters in the jump link.

The following is a sample code for passing parameters:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

In the target page (i.e. targetPage), we can use the uni.getStorageSync() method to obtain the passed parameters. The following is a sample code for obtaining parameters:

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

It is worth noting that when passing parameters, it is recommended to use the encodeURIComponent() method for encoding to avoid garbled characters. In the target page, we can use the decodeURIComponent() method to decode.

3. Change the title

In uniapp, we can better display the page content by setting the page title, allowing users to more easily understand the content presented on the current page. You can set the "navigationBarTitleText" property in the page.json file or use the uni.setNavigationBarTitle() method.

The following is a sample code for setting the page title:

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

It should be noted that:

1. If you set the title of the navigation bar in the page.json file, Will overwrite the title set in the js file through the uni.setNavigationBarTitle() method.
2. It only takes effect on the current page. You need to reset the title every time you enter a new page.

4. Implement jump parameters and change the title

For the need to pass parameters and change the title when jumping to the page, we can achieve it in the following ways:

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

It should be noted that the title of the target page should be set in the callback function of successful jump, otherwise the title may not be modified successfully.

5. Summary

This article introduces how to implement the basic operations of page jump, parameter passing and title change in uniapp. Developers can further customize the code as needed in actual projects. During development, no matter what the needs are, you can find a way to implement them in uniapp.

The above is the detailed content of uniapp jumps and passes parameters to change the title. For more information, please follow other related articles on the PHP Chinese website!