Small program to do the development of the inevitable need for communication between different pages, such as the home page to open a new page search results returned to the home page, data interaction between different TAB pages and so on. So I made the following conclusion

The current page opens a new page

Opening a new page can be done through the Navigator component, by passing in url parameters, for example

<navigator url=".. /search/search? id=123" open-type="redirect"Search < / > the navigator >Copy the code

On the new page, the onLoad event can get the parameter options passed in

onLoad: function(options) {
  console.log(options.id);
}Copy the code

The new page returns data to the current page

Define a method on the current page

searchRet(results) {
  console.log(results);
}Copy the code

GetCurrentPages () retrieves an instance of the current page stack, with the first element being the home page and the last element being the current page, since the applet pages are stored on a stack

let pages = getCurrentPages();
let homePage = pages[pages.length - 2];
if (homePage) {
  homePage.searchRet(results);
}Copy the code

Life cycle and storage

The wx.setStoragesync () method can be used to store data locally, and the onShow callback of page can be used to fetch the value of storage and do the corresponding processing, for example

// index.js
wx.setStorageSync('refresh'.true);

// mycenter.js
if (wx.getStorageSync('refresh'Wx.removestoragesync () {wx.removeStoragesync ();'refresh');
}Copy the code

Storage can also be used as globalData. The same principle is used here. Both methods work, but the scenario is too stupid to handle 😫

Event listeners

In my opinion, it is a good method to handle the event through the global event listener. By listening on the Page and triggering the corresponding event in another Page, we can do the corresponding processing in real time and efficiently. Therefore, I package a nsevent event listener that can declare the namespace. Can be installed into the small program through NPM (wechat official NPM usage method)

Nsevent is also easy to use. Just use nsevent.on() to listen on the same page. It is recommended to add a third parameter namespace

// select.js
const nsevent = require('nsevent');
Page({
  onLoad() {
    nsevent.on('add', (num) => {console.log(' select.js' receives the add event${num}`)},'select.js')},addnumber() {
    nsevent.emit('add', 1);
  },
  onUnload() {
    console.log('select.js removes the Add event ')
    nsevent.off('add'.'select.js'); }});Copy the code

The emit method can fire not only normal events, but also namespace-specific events, such as pageA and pageB. PageC both listens for locationChange events. If you want to fire a pageA callback on a pageC page, you can write 😀

nsevent.emit('locationChange', { ns: ['pageA']});Copy the code

I don’t know if this tool is useful to you, if it is useful, please give a star, or there are other good opinions can be discussed.

First published in personal blog address: www.kelen.cc/posts/5bf58…