Summary of examples of several methods of passing parameters between uniapp pages

Preface

In Uniapp, the parameters are mainly divided into the following three types:
Advanced page → Lower page (one-way) Advanced page ← Lower page (one-way) Advanced page ↔ Lower page (two-way)
This article will focus on these three transmissions and share their usage methods, as well as the problems and solutions I encountered during my use.

1. Advanced page → Lower page (one-way)

: URL programming parameter transfer

As the most commonly used and simplest API for jumping and carrying parameters, I won't go into the official document to learn more. Here I will only share the contents.

Official Documentation:(OBJECT)

Carry static parameters

//Skip to the page at the start page and pass parameters//Asset scenarios, pages with fixed parameter transfer status need to be provided, generally used with dynamic parameters({
	url: 'test?id=1&amp;name=uniapp'
});

Carry dynamic parameters

//Skip to the page at the start page and pass parameterslet uniapp = {
    uniappItem: 0,
};
//When the passed parameter is an object, it must be converted to JSON format first({
	url: 'test?id=1&amp;name=' + (uniapp),
});

Page Received

// Accept parameters on the pageexport default {
	onLoad: function (option) { //The option is of object type, and the parameters passed on the previous page will be serialized		(); //Print out the parameters passed on the previous page.		(); //Print out the parameters passed on the previous page.	}
}

<navigator> tag parameter transfer

The URL has a length limit. Strings that are too long will fail to pass. You can use it instead.Form communication、Global variables, In addition, when special characters such as spaces appear in the parameters, the parameters need to be encoded, as followsencodeURIComponentAn example of encoding parameters.

Tag parameters

//The :URL here is dynamic loading, and the parameters are variables;//When :URl is used but a static address is used, it may not take effect. Similarly, if a variable is used but it is useless :URL will also have problems&lt;navigator :url="'/pages/test/test?item='+ encodeURIComponent((item))"&gt;
&lt;/navigator&gt;

Page Received

// Accept parameters on the pageonLoad: function (option) {
	const item = (decodeURIComponent());
}

2. Advanced page ← Lower page (one-way)

Generally speaking, parameter passing can meet the delivery of pages, but when encountering the need to update the previous page, you need to use uni.em i t ( ) and u n i . emit() and uni. emit() and () for inter-page communication.

This method is generally used when you change data from the lower page (or component) and notify the upper page to refresh or other operations. It doesn't matter if you really don't know it, but you will naturally understand it when you need it.

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

Settings on the previous pageuni.$emit()To listen to calls to the lower page, the eventName is the event name, and the second parameter is the callback function triggered after receiving the function. After the listening event is over, you must remove the listening event, otherwise there will be repeated listening problems.

// My pageonLoad(){  
    // Listen to events    uni.$on('login',(usnerinfo)=&gt;{  
         = usnerinfo;  
    })  
},  
onUnload() {  
    // Remove the listening event    uni.$off('login');  
},

Trigger event

The passed parameters must be attributes in the object

uni.$emit('login', {  
	avatarUrl: '/uploads/nav_menu/',  
	token: 'user123456',  
	userName: 'unier',  
	login: true  
});

3. Advanced page ↔ Lower page (two-way)

In general, one-way delivery can meet our business needs, such as passing parameters to the lower page and changing status to display, data to the higher page and functions to be updated or functions to be called again.

However, when encountering two pages that are closely connected, one-way delivery cannot meet our business needs, and passing parameters and listening events to lower pages will become particularly cumbersome. In uniapp, it combines the above two delivery methods and provides such a method to achieve two-way delivery:({ event:{} })

Code in the previous page

// Jump to the page on the start page and listen to the sent event data({
  url: 'pages/test?id=1',
  // Call the communication event object  events: {
    // Get the following page parameters:    // Add a listener for the specified event to obtain the data transmitted to the current page by the open page    // Pay attention to the corresponding function name in the lower page. You can define multiple methods to manage the passed parameters    acceptDataFromOpenedPage: function(data) {
      // Process the data      (data)
    },
    someEvent: function(data) {
      // Process the data      (data)
    }
  },
  // Send communication method  success: function(res) {
    //Transfer data to the opened page through eventChannel    // It contains two parameters. The first is the received function name, and the second is the parameter that needs to be carried.    ('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

Code in the following page

// On the page, pass data through events to the start page// This method does not have to be called in onLoad, and it is called wherever it is needed.onLoad: function(option) {
  // This is just for the sake of showing that it looks a bit concise  const eventChannel = ();
  // emit means passing data that needs to be updated to the previous page  ('acceptDataFromOpenedPage', {data: 'data from test page'});
  ('someEvent', {data: 'data from test page for someEvent'});
  // Receive data passed on the previous page  // Listen to the acceptDataFromOpenerPage event to get the data transmitted to the current page through eventChannel  ('acceptDataFromOpenerPage', function(data) {
    // Process the data    (data)
  })
}

Summarize

This is the end of this article about several methods of transferring parameters between uniapp pages. For more related contents of transferring parameters between uniapp pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!