Summary of 4 solutions for returning values ​​on WeChat Mini Program pages

Usage scenarios

The applet jumps from page A to page B, selects a value on page B, and then returns to page A, using the value selected on page B on page A. For example: on the purchase order page, jump to the address list, and after selecting the address, return to the order page. The delivery address on the order page needs to be updated synchronously.

Solution

The common and easier solution is to use the applet's global storage globalData, local cache storage, get the applet's page stack, call the setData method of the previous Page, and use the events property of wx.navigateTo to listen to the data sent by the opened page to the current page. Here is a brief comparison of the advantages and disadvantages of the four methods:

1. Use globalData to implement

//page A
const app = getApp() //Get the App.js instance onShow() { //Life cycle function--listen to page display if (app.globalData.backData) {
    this.setData({ //Render the updated value of page B to the page backData: app.globalData.backData
    },()=>{
     	delete app.globalData.backData //Delete data to avoid repeated rendering of onShow})
  }
}
//page B
const app = getApp() //Get the App.js instance changeBackData(){
   app.globalData.backData = 'I was modified'
   wx.navigateBack()
}

2. Use local cache Storage to implement

//page A
  onShow: function () {
    let backData = wx.getStorageSync('backData')
    if(backData){
       this.setData({
     		 backData
    	},()=>{
     		 wx.removeStorageSync('backData')
    	})
    }
  },
 //page B
 changeBackData(){
    wx.setStorageSync('backData', 'I was modified')
    wx.navigateBack()
 },

3. Use the Page stack of the applet to implement

The page stack of the mini program is more convenient than the other two methods and renders faster. There is no need to wait until you return to page A to render the data. The value on page A will be directly updated on page B. When you return to page A, the value has been updated. The principle of globalData and Storage is to modify the value on page B, then return to page A, trigger the onShow lifecycle function, and update the page rendering.

//page B
changeBackData(){
    const pages = getCurrentPages();
    const beforePage = pages[pages.length - 2]
    beforePage.setData({ // Will directly update the data of page A, and page A does not need other operations backData: "I have been modified"
    })
}

4. Implementation of events using wx.navigateTo API

The implementation principle of wx.navigateTo events is implemented by using the publish-subscribe model of the design pattern. Students who are interested can implement a simple one by themselves to achieve the same effect.

//page A
 goPageB() {
    wx.navigateTo({
      url: 'B',
      events: {
        getBackData: res => { //Add listener event in events this.setData({
            backData: res.backData
          })
        },
      },
    })
  },
//page B	
changeBackData(){
    const eventChannel = this.getOpenerEventChannel()
       eventChannel.emit('getBackData', {  
     	 backData: 'I have been modified'
    });
     wx.navigateBack()
 }

Summarize

Methods 1 and 2 are slightly slower than the latter two in terms of page rendering effect. Methods 3 and 4 have triggered the update before page B falls back to page A, while methods 1 and 2 trigger the update on page A after returning to page A. And for methods 1 and 2, you need to consider that after page A is updated, the data in globalData and Storage must be deleted to avoid repeated triggering of setData in the onShow method to update the page. Therefore, I personally recommend that you use the following methods 3 and 4.

This concludes this article about 4 solutions for returning and passing values ​​on WeChat Mini Program pages. For more relevant content on returning and passing values ​​on WeChat Mini Program pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!