Detailed solutions for communication between different pages

  • 的头像-Tumi
  • 36 day agopublish

When the small program is developed, it is inevitable that there is a need for communication between different pages, such as the home page opens a new page search acquisition result Returns to the home page, data interaction between different TAB pages, etc. So the following summary

The current page opens new page

Opened the new page can be implemented by the Navigator component, and achieved by URL transmission, For example

Search
     
can be transmitted in the new page OnLoad event Parameters Options
ONLOAD: Function (options) {Console.log (options.id);}

  New page return data to the current page  
Define a method in the current page


Searchret (Results) {Console

  The result of the search page acquired, since the small program page is stored by the stack, it can be obtained by getCurrentPages (). Page stack instance, the first element is the homepage, the last element is the current page  

Let Pages = getCurrentPages (); let HomePage = Pages [Pages.LENGTH – 2 ]; if (homepage) {homepage.searchret (results);}

  And storage life cycle 

by wx.setStorageSync () method may store data locally, after obtaining the correction value storage in onShow page’s corresponding processing, for example,

// index.jswx.setStorageSync ( ‘refresh’, true); // mycenter.jsif (wx.getStorageSync ( ‘refresh’)) {// do update wx.removeStorageSync ( ‘refresh’);}

  storage globalData also be used instead of, as in principle, not expand here, two approaches are possible, but it is dumb, it can not engage in complex scenes & # 128555; method  
event listener

personal feeling through the global event listeners to handle is a good, in page page monitor events by triggering the corresponding events in another page, you can do the corresponding processing, real-time and efficient, so I wrapped a can declare event listeners nsevent namespace, you can install the small program (micro-channel official by npm npm use) nsevent usage is also very simple, just () listens to achieve by listening nsevent.on pages, it is recommended to add a third parameter namespace, which can be tied back to the appropriate mediation in onUnload events, for example less

// select.jsconst nsevent = require ( ‘nsevent’); Page ({onLoad () {nsevent.on ( ‘add’ , (num) => {console.log (`select.js received the add event, parameter $ {num}`)}, ‘select.js’)}, addnumber () {nsevent.emit (‘add’, 1);}, ONUNLOAD ) {Console.log (‘select.js Remove Add Event’) NSEvent.off (‘add’, ‘select.js’);}});

  The EMIT method not only triggers a normal event, but also triggers events that specify namespaces, such as Pagea and Pageb, and Pagec listen to the locationchange event, you want to trigger Pagea's callback in the Pagec page, you can write & # 128512;  
NSEvent.emit (‘locationchange’, {ns: [‘Pagea’]});

 Attachment The code snippet, the above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment