Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is the solution for the return value of WeChat Mini Programs page". In the daily operation, I believe that many people have doubts about the solution of WeChat Mini Programs page return value. The editor consulted all kinds of data and sorted out a simple and easy-to-use operation method. I hope it will be helpful for you to answer the doubt of "what is the solution of WeChat Mini Programs page return value?" Next, please follow the editor to study!

Working with scen

Mini Program jumps from page A to page B, selects a value on page B, returns to page A, and uses the value selected on page B on page A. For example, jump to the address list on the purchase order page and return to the order page after selecting the address. The shipping address of the order page needs to be updated synchronously.

Solution

The common solutions that are easy to solve are to use Mini Program's global storage globalData, local cache storage, access to Mini Program's page stack, call the setData method of the previous Page, and use the events property of wx.navigateTo to listen for data sent to the current page by the opened page. Here is a brief comparison of the advantages and disadvantages of the four methods:

1. Use globalData to implement / / page Aconst app = getApp () / / get the App.js instance onShow () {/ / Lifecycle function-listening page displays if (app.globalData.backData) {this.setData ({/ / render the updated values of the B page to the page backData: app.globalData.backData} () = > {delete app.globalData.backData / / Delete data to avoid repeated rendering of onShow})} / / page Bconst app = getApp () / / get App.js instance changeBackData () {app.globalData.backData = "I have been modified" wx.navigateBack ()} 2, Implement / / page An onShow using local cache Storage: function () {let backData = wx.getStorageSync ("backData") if (backData) {this.setData ({backData}) () = > {wx.removeStorageSync ("backData")}}, / / page B changeBackData () {wx.setStorageSync ("backData", "I have been modified") wx.navigateBack ()}, 3. Use Mini Program's Page page stack to implement

Make Mini Program's page stack a little more convenient and render faster than the other two ways. You don't need to go back to page An and then render the data. On page B, the value on page A will be updated directly. By the time you fall back to page A, the value has been updated. The principle of globalData and Storage implementation is that after modifying the values on page B, go back to page An and trigger the onShow lifecycle function to update the page rendering.

/ / page BchangeBackData () {const pages = getCurrentPages (); const beforePage = pages [pages.length-2] beforePage.setData ({/ / will update the data of page A directly, and page A does not require other operations backData: "I have been modified"})} 4. Use events implementation of wx.navigateTo API

The implementation principle of wx.navigateTo 's events is realized by using the publish and subscribe pattern of the design pattern. Interested students can implement a simple one by themselves, or they can achieve the same effect.

/ / page A goPageB () {wx.navigateTo ({url: "B", events: {getBackData: res = > {/ / add listening event this.setData ({backData: res.backData})},},}) to events, / / page B changeBackData () {const eventChannel = this.getOpenerEventChannel () eventChannel.emit ("getBackData") {backData: "I have been modified"}) Wx.navigateBack ()} at this point, on the "WeChat Mini Programs page return value of the solution is what is the end of the study, I hope to be able to solve your doubts." The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.