Usage scenarios

The applet jumps from page A to page B, selects A value on page B and returns to page A, using the value selected on page B on page A. For example, skip to the address list on the purchase order page. After selecting the address, go back to the order page. The shipping address on the order page needs to be updated simultaneously.

The solution

A common solution that is easier than volume is to use the global storage globalData for the applet, the local cache storage, and the page stack for the applet. Call the setData method of the previous Page and listen for data sent to the current Page from the opened Page using the Events property of wX. navigateTo. Here is a simple comparison of the advantages and disadvantages of the four methods:

1, using globalData implementation

//page A const app = getApp() // Get app.js instance onShow() {// life cycle function -- monitor page display if (app.globalData.backdata) {this.setdata ({ // Render the updated value of B page to the page backData: App.globaldata.backdata},()=>{delete app.globalData.backdata // Delete data to avoid onShow repeat rendering})}} // Page B const app = getApp() // Get app.js instance changeBackData(){app.globalData.backdata = 'I was modified' wx.navigateBack()}Copy the code

2. Use the local cache Storage

//page A onShow: function () { let backData = wx.getStorageSync('backData') if(backData){ this.setData({ backData },()=>{ wx.removeStorageSync('backData') }) } }, //page B changeBackData(){ wx.setStorageSync('backData', 'I've been modified ') wx.navigateback ()},Copy the code

3, using small program Page Page stack implementation

Make the small program page stack, than the other two ways will be A little more convenient and rendering will be faster, do not need to wait back to A page to render the data out, in the B page will directly update the value of A page, back to A page, the value has been updated. Both globalData and Storage implement the idea that after modifying the value on page B, they revert back to page A and trigger the onShow lifecycle function to update the rendering of the page.

//page B changeBackData(){ const pages = getCurrentPages(); Const beforePage = pages[pages.leng-2] beforePage.setData({// updates the data of page A directly, backData: "I was modified"})}Copy the code

NavigateTo API

Wx. navigateTo’s events implementation principle is the use of design pattern publish subscribe mode to achieve, interested students can do their own to achieve a simple, can also achieve the same effect.

//page A goPageB() { wx.navigateTo({ url: 'B', events: { getBackData: Res => {// Add listener events to this.setdata ({backData: res.backData }) }, }, }) }, //page B changeBackData(){ const eventChannel = this.getOpenerEventChannel() eventChannel.emit('getBackData', {backData: 'I was modified'}); wx.navigateBack() }Copy the code

conclusion

Methods 1 and 2 are slightly slower than the latter two in terms of page rendering effect. Methods 3 and 4 trigger the update before page B goes back to page A, while methods 1 and 2 trigger the update after page A goes back to page A. In addition, the first and second methods should be considered to delete globalData and Storage data after the update of A page, so as to avoid the repeated triggering of setData update page in onShow method, so I recommend you to use the latter two methods of 3 and 4.