Micro channel applet — transfer value between pages

Applets pass values between pages

Good evening, everyone. Good evening because it was written at night, because it doesn’t begin abruptly. NavigateTo (wx. NavigateTo) has an event parameter, so I can jump from the current page to the next page. If I need to return, NavigateTo: Wx. NavigateTo: Wx. NavigateTo: Wx. Like 🦐 :

index.js

wx.navigateTo({
  url: url,
  events: {
    // Adds a listener to the specified event to get data from the opened page to the current page
    acceptDataFromOpenedPage: (data) = > { // The method name is arbitrary and does not require much, but the first argument to the open page is the method name
      console.log ('Stuffed with sour bean from next door.', data)},},success: function (res) {
    // Send data to the opened page via eventChannel
    // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })}})Copy the code

gebi.js

// Confirm the selection
confirm() {
  const eventChannel = this.getOpenerEventChannel()  // This should be wechat's own method, directly use, no problem
  eventChannel.emit('acceptDataFromOpenedPage', data)  // The name of the method that received the parameter in the event on the previous page
  wx.navigateBack()   // Return to the previous page
}
Copy the code

These two operations complete the same parent-child component transfer as vue2. X, and the emit is exactly the same.

So how do you pass values to the next page? NavigateTo (wx. NavigateTo) navigateTo (wx. NavigateTo) navigateTo (wx. NavigateTo) navigateTo Although I haven’t used the SUCCESS callback before, it looks a lot like how the main thread and child threads receive data when I use Webworker to pass values to the child thread and the child thread to the main thread. To put it bluntly, I think it’s addeventListener (0O -_^o).

It’s important to note that the URL path is preceded by pages and it jumps with a slash, so that’s it

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

Applets URL pass value

Small program URL value, with our ordinary route with the same parameter, are behind the question mark (?) The and and symbol (&) is used, but is divided into basic and reference data transfers. The common ones are as follows:

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

/pages/home/home = ‘/pages/home/home’;

Applets URL pass object

So to pass an object or array:

Pass: first turn the string, in the encoding.

Receive: decode first, in turn the object.

data = {
	name: 'the steamed stuffed bun'.type: 'Beef fan'
}
wx.navigateTo({
  url: `/pages/index/index? page=/pages/home/home&params=The ${encodeURIComponent(JSON.stringify(data))}`
})
Copy the code

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

Copy the code

Well, that’s the way it goes.

A mouth store

I used mobx for this project, and the array data in MOBX became very strange. The solution is unknown. There’s a toJS () method in Mobx, just use it.

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

Rotating jump

About the jump, the official website of the small program said very clearly, I will make a table here.

Wx.switchtab. -0-0—-> Jump to tabBar page and close all other non-tabbar pages.

As for EventChannel, I only use emit, the rest of off, on and once, which I have not used before. It is hard to explain because there is no scene and it is not easy to understand. I guess maybe I can write something in publish and subscribe mode.

Do you think the two forms are very clear? Hey, hey, hey. Actually, my Markdown form is not good enough, and it feels more appropriate to separate it.

It’s Friday and it’s still in the office. It’s pathetic. Pick up my cool open. Cheers to My Life.