Applets communicate across pages

Note the ways in which the applet communicates across pages for future reference

Small program is composed of A page, if there is A routing stack [A,B], A->B can naturally pass the value layer by layer, but B->A transfer data needs additional auxiliary way, the following discussion of several common ways.

1, localStorage + onShow

Application scenarios: A->B/B->A

Advantages: Simple operation, easy to understand

Disadvantages: Call to storage, may fail to set; In addition, it is a persistent cache, which may pollute the original logic, so it should be deleted in time

Application example:

// Use A->B as an example

/ / A page
Page({
    onShow(){
        if(wx.getStorageSync('$datas')) {console.log(wx.getStorageSync('$datas'))  / / 11111}}})/ / B page
Page({
    someActions(){
        wx.setStorageSync('$datas'.'11111')}})Copy the code

2, globalData + onShow

Application scenarios: A->B/B->A

Advantages: Simple operation, easy to understand; Direct manipulation of globalData objects is more efficient than storage

Disadvantages: after the setting is small program life cycle can access, may pollute the original logic, should be deleted in time

Application example:

// Use A->B as an example

/ / A page
const app = getApp();
Page({
    onShow(){
        if(app.globalData.$datas){
            console.log(app.globalData.$datas)  / / 11111}}})/ / B page
const app = getApp();
Page({
    someActions(){
        app.globalData.$datas = '11111'; }})Copy the code

3, the small program itselfEventChannel

Application scenario: B->A

Advantages: small program provided native, can be destroyed at any time

Cons: Restricted to navigateTo only and requires base library version 2.7.3 or higher

Application example:

/ / A page
wx.navigateTo({
  url: 'B? id=1'.events: {
    // Add a listener for the specified event to retrieve the data passed from the opened page to the current page
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // Send data to the opened page via eventChannel
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test'})}})/ / B page
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // Listen for acceptDataFromOpenerPage acceptDataFromOpenerPage to retrieve data sent from the previous page to the current page via eventChannel
    eventChannel.on('acceptDataFromOpenerPage'.function(data) {
      console.log(data)
    })
  }
})

Copy the code

Customize EventBus

Application scenarios: A->B/B->A

Advantages: Custom implementation, extensibility

Disadvantages: With extended custom variables for WX, the same eventName may be repeatedly bound to listen for events

EventBus: Refer to this EventBus implementation

Application example:

// app.js
const EventBus = require('./utils/eventBus.js');
App({
    onLaunch(){
        // Initialize eventBus to WX
        wx['$uhomesBus'] = (function () {
            if (wx['$uhomesBus']) return wx['$uhomesBus'];
            return new EventBus();
        })();
    }
})

/ / A page
Page({
    someActions(){
        wx.$uhomesBus.$on('$datas'.(data) = >{
            console.log(data); / / 11111})}})/ / B page
Page({
    emitActions(){
        wx.$uhomesBus.$emit('$datas'.'11111'); }})Copy the code

Get the page stack instance getCurrentPages

Application scenario: B->A

Advantages: small program native provided, basic processing logic in B page

Disadvantages: Rules for matching pages need to be added, and at least two pages exist in the routing stack

Application example:

/ / A page
Page({
    someActions(datas){
        console.log(datas); / / 11111}})/ / B page
Page({
    someActions(){
        const pages = getCurrentPages();
        if (pages.length < 2) return;
        
        // If the page has many layers, use A loop to match to A page;
        // Here is an example of just two pages
        const prevPage = pages[pages.length - 1];
        
        // The route matches A
        if (prevPage.route === 'A') {
            prevPage.someActions('11111'); }}})Copy the code

6, globalData proxy

This method has not been tested yet, and is feasible in principle;

The corresponding principle can refer to Vue3 data hijacking and subscription notification combination;