Several methods of passing parameters between uniapp pages

Several methods of passing parameters between uniapp pages

The parameter passing in Uniapp is mainly divided into the following three types:

1. Upper-level page → lower-level page (one-way)
2. Upper-level page ← lower-level page (one-way)
3. Upper-level page ↔ Lower-level page (two-way)

This article will focus on these three parameters, share their usage methods, and the problems and solutions I encountered during use.

1. Upper-level page → lower-level page (one-way)

uni.navigateTo: URL programmatic parameter transfer

As the most commonly used and simplest API for jumping and carrying parameters, I won’t go into details here. Friends who want to know more can go to the official document to learn. Here I only share parameters.

Official documentation: uni.navigateTo(OBJECT)

carry static parameters

//在起始页面跳转到test.vue页面并传递参数
//作用场景，需要提供固定传参状态的页面，一般和动态参数一起使用
uni.navigateTo({
    
    
	url: 'test?id=1&name=uniapp'
});

carry dynamic parameters

//在起始页面跳转到test.vue页面并传递参数
let uniapp = {
    
    
    uniappItem: 0,
};
//当传递的参数是对象时，必须先转化为JSON格式
uni.navigateTo({
    
    
	url: 'test?id=1&name=' + JSON.stringify(uniapp),
});

page reception

// 在test.vue页面接受参数
export default {
    
    
	onLoad: function (option) {
    
     //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

<navigator> tag parameter passing

The URL has a length limit. If the string is too long, the transmission will fail. You can use form communication and global variables instead. In addition, when there are special characters such as spaces in the parameters, you need to encode the parameters. The following is encodeURIComponentan example of using the parameters to encode.

label parameter

//此处的 :URL 是动态载入，参数是变量;
//当使用了 :URl 却使用了静态地址，有可能不生效，同样如果使用了变量却没有用 :URL 也会有问题
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))">
</navigator>

page reception

// 在test.vue页面接受参数
onLoad: function (option) {
    
    
	const item = JSON.parse(decodeURIComponent(option.item));
}

2. Upper-level page ← lower-level page (one-way)

Generally speaking, the parameter transfer of uni.navigateTo can satisfy the page transfer, but when encountering the need to update the upper-level page, you need to use uni.emit ( ) $emit\left(\right)anduni.$ on () for inter-page communication$.$

This method is generally used when you change data from a lower-level page (or component), and notify the upper-level page to refresh or perform other operations. It doesn’t matter if you don’t know it.

uni.$on(eventName, callback): listen to events

Set on the upper-level page uni.$emit()to monitor the call of the lower-level page, where eventName is the event name, and the second parameter is the callback function triggered after receiving the function. After the listening event is over, the listening event must be removed, otherwise there will be a problem of repeated monitoring.

// 我的页面  
onLoad(){
    
      
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{
    
      
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {
    
      
    // 移除监听事件  
    uni.$off('login');  
},

trigger event

The parameters passed must be properties in the object

uni.$emit('login', {
    
      
	avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
	token: 'user123456',  
	userName: 'unier',  
	login: true  
});

3. Upper-level page ↔ lower-level page (two-way)

In general, one-way transmission can already meet our business needs, such as passing parameters to be displayed and changing status to the lower-level page, data that needs to be updated or functions that need to be called again to the higher-level page.

But when encountering two closely related pages, one-way transmission cannot meet our business needs, and it will be particularly cumbersome to pass parameters and monitor events to lower-level pages. In uniapp, it combines the above two delivery methods to provide such a method to achieve two-way delivery:uni.navigateTo({ event:{} })

Code in parent page

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
    
    
  url: 'pages/test?id=1',
  // 调用通信事件对象
  events: {
    
    
    // 获取下级页面参数：
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    // 注意看下级页面中所对应的函数名，你可以定义多个方法去管理传递的参数
    acceptDataFromOpenedPage: function(data) {
    
    
      // 对数据做处理
      console.log(data)
    },
    someEvent: function(data) {
    
    
      // 对数据做处理
      console.log(data)
    }
  },
  // 发送通信方法
  success: function(res) {
    
    
    // 通过eventChannel向被打开页面传送数据
    // 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
    res.eventChannel.emit('acceptDataFromOpenerPage', {
    
     data: 'data from starter page' })
  }
})

Sub-page code

// 在test.vue页面，向起始页通过事件传递数据
// 此方法不是一定要在 onLoad 内调用，哪里需要哪里调
onLoad: function(option) {
    
    
  // 此处声明只是为了显示看起来简洁一点
  const eventChannel = this.getOpenerEventChannel();
  // emit 代表的就是向上一个页面传递需要更新的数据
  eventChannel.emit('acceptDataFromOpenedPage', {
    
    data: 'data from test page'});
  eventChannel.emit('someEvent', {
    
    data: 'data from test page for someEvent'});
  // 接收上个页面传递的数据
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    
    
    // 对数据做处理
    console.log(data)
  })
}