Mini-program navigation parameters

How does the applet pass parameters between pages?

There are two main methods, one is declarative navigation parameter passing , and the other is programmatic navigation parameter passing .

First introduce the declarative navigation parameter passing

Using the navigator component, /pages/index1/index1 after the url is the address after passing the parameters (that is, the object we want to pass parameters)

<navigator url="/pages/index1/index1?name=FZH&number=123456">Data transfer parameter</navigator>

?name=FZH&number=123456

annotation:

1. The question mark is used to separate the address (/pages/index1/index1) and the parameter (name);

2. The equal sign is used to connect the parameter key (name) and parameter value (FZH).

3.& is used to connect different parameter keys; that is, name and number

Next is programmatic navigation parameter passing

Programmatic navigation parameter passing is actually using a button component to make a button and then defining a function.

In wxml:

<button bindtap="chauncan2">Pass parameters</button> //bindtap is followed by the function name

in the js file

//The js file is to define what this function does for it

chauncan2() {

    wx.navigateTo({

      url: '/pages/index1/index1?student=FZH&number=123456'

    })

In fact, the two ideas are basically the same, except that one is in the function (js and wxml are used), and the other is directly declared (only wxml is used).

So how do you receive the passed parameters? ? ?

Then we use the onLoad function that comes with js to accept

Among them, options are used to accept the passed parameters , and we can put options in the brackets of console.log() to display the passed parameters in reality.

 onLoad(options) {

    console.log(options)

  }

 This can be viewed in the console panel of the debugger

However (option has limitations, please read on)

This options can only be used in the onLoad() function

So how do we use the passed parameters in other functions? ?

Then we need to define a query pointing to an empty object in data in the same js file , // query is generally the object passed by the navigation

  data: {

    query:{}

  }

Add a this.setData({} ) function in the onLoad() function to assign the value of option to query

onLoad(options) {

    this.setData({

      query: options

    })

  }

This way other functions can access the passed value

 Thank you for watching. If you have any questions about this chapter, you can come and discuss with me. If there are any mistakes, please give me advice!

Guess you like

Origin blog.csdn.net/weixin_71247694/article/details/127471135