Example of how to implement value transfer between WeChat mini program pages

Passing values ​​between mini program pages

Good evening everyone. I say good evening because I wrote this at night. I say this because the beginning of this sentence is not so sudden. As for the value passing between pages of the mini program, during the time I have been using it, I have very subjectively divided them into wx.navigateTo and non-wx.navigateTo, because wx.navigateTo has an event parameter event. I jump from the current page to the next page. If I need to return, I use wx.navigateTo. The function of this event is to receive the parameters returned by the next page. Like this:

index.js

wx.navigateTo({
  url: url,
  events: {
    // Add a listener for the specified event to get the data sent from the opened page to the current page acceptDataFromOpenedPage: (data) => { // This method is named casually, there are not many requirements, but the first parameter of the opened page emit should be the method name console.log('sour bean buns thrown from next door', data)
    },
  },
  success: function (res) {
    // Send data to the opened page through eventChannel // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

gebi.js

// Confirm the selection confirm() {
  const eventChannel = this.getOpenerEventChannel() // This should be WeChat's own method, just use it, it's OK eventChannel.emit('acceptDataFromOpenedPage', data) // The name of the method that receives parameters in the previous page event wx.navigateBack() // Return to the previous page }

These two operations complete the parent-child component value transfer similar to vue2.x, and the emit is exactly the same.

How to pass the value to the next page? When store and storage are not used, you can use the method with parameters after the Url or the success callback of wx.navigateTo above. Although I have not used the success callback, after taking a look at it, I feel that it is very similar to the way the main thread and child thread receive data when I use webworker to pass values ​​to the child thread and the child thread passes values ​​to the main thread. To put it simply, I think it is 'monitoring' (addeventlistener) (0o-_^o)
I want to mention here that the URL path is preceded by pages with a / when jumping, that's it.

wx.navigateTo({
  url: '/pages/index/index'
})

URL value transfer of mini program

The URL value passing of the mini program is the same as our ordinary routing parameters, both of which are followed by a question mark (?) and an ampersand (&), but it is divided into basic type data value passing and reference type data value passing. The common ones are as follows:

wx.navigateTo({
  url: '/pages/index/index?page=/pages/home/home&id=0077FF'
})

Yes, you read it right, you can pass a value like '/pages/home/home'. Other special characters should be converted, but I haven't tried it.

URL transfer object of applet

If you pass an object or array:

Transmission: Convert to string first, then encode.

Receive: Decode first, then convert the object.

data = {
	name: '包子',
  type: 'Beef Vermicelli'
}
wx.navigateTo({
  url: `/pages/index/index?page=/pages/home/home&params=${encodeURIComponent(JSON.stringify(data))}`
})

onLoad (options) {
	const {page} = options;
	const params = JSON.parse(decodeURIComponent(options.params))
}

Well, just spread it like this, there is nothing wrong with it.

Mention store

I use mobx in this project. The array data obtained in mobx becomes very strange. The solution is unknown. There is a toJS() method in mobx, just use it.

import { toJS } from 'mobx-miniprogram';
let value = toJS(xxxx)

Spin Jump

Regarding jumps, the official website of the mini program explains it very clearly, so I will make a table here.

wx.switchTab. -0-0----> Jump to the tabBar page and close all other non-tabBar pages (original words from the official website)

Regarding EventChannel, it is the value passing between pages mentioned above. I only used emit. I have not used the rest of off, on, once, so it is difficult to explain because it is difficult to understand without the scenario. I guess I can write something by using the publish-subscribe model.

Do you think the two tables are very clearly divided? Hehehe. In fact, I didn’t use the markdown table well, and it feels more appropriate to separate them.

Summarize

This is the end of this article about transferring values ​​between WeChat Mini Program pages. For more relevant content about transferring values ​​between WeChat Mini Program pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!