[wechat applet development] page navigation and parameter transmission

Catalog

One 、 Page navigation

（1） summary

（2） classification

（3） Declarative navigation

1） Navigate to tabBar page

2） Navigate to non tabBar page

3） Back navigation

（4） Programming navigation

1） Navigate to tabBar page

2） Navigate to non tabBar page

3） Back navigation

（5） Navigation parameters

1） Declarative navigation parameters

 2） Programming navigation parameters

---

One 、 Page navigation

（1） summary

seeing the name of a thing one thinks of its function , Page navigation refers to the mutual jump between pages ,

And page parameter passing is to pass specific parameters to become parameters of the page when loading the page .

（2） classification

• Declarative navigation ： Declare a... On the page <navigator> Navigation components , Click this component to realize page Jump
• Programming navigation ： By calling the applet for special navigation API, Realize the jump between pages

（3） Declarative navigation

1） Navigate to tabBar page

tabBar The page refers to being configured as the bottom tabBar The page of , Click to switch quickly between pages

Configuration steps

• Statement <navigator> Components
• Appoint URL attribute , That is, the path of the page to jump to , Note that the path must be in   /  start
• Appoint open-type attribute , That is, the way to realize jump , Jump to tabBar The property of the page must be switchTab

Sample code

<navigator url="/pages/index/index" open-type="switchTab"> Navigate to home home page </navigator>

2） Navigate to non tabBar page

Not tabBar The page is not configured as the bottom tabBar The page of

Configuration steps

• Statement <navigator> Components
• Appoint URL attribute , That is, the path of the page to jump to , Note that the path must be in   /  start
• Appoint open-type attribute , That is, the way to realize jump , Jump to tabBar The property of the page must be navigator
• ( For development convenience , Official regulations at this time open-type Attributes can also be omitted without writing )

Sample code

<navigator url="/pages/info/info" open-type="navigate"> Navigate to info page </navigator>

3） Back navigation

Configuration steps

• Statement <navigator> Components
• Appoint open-type attribute , That is, the way to realize jump , Back jump this attribute must be navigateBack
• Appoint delta Value , Represents the number of layers to retreat , Must be Integers

Sample code

<navigator open-type="navigateBack" delta="1"> Back to previous page </navigator>

 

---

 

 

（4） Programming navigation

1） Navigate to tabBar page

Configuration steps

• Declare a button component
• Bind event functions for buttons
• Call in the time handler wx.switchTab(Object object) Method
• Specify url、success、fail Equal attribute

among object The attribute list of the parameter object is as follows ：

 （ Be careful ：url The attribute is mandatory , Others are optional ）

Sample code ：

.wxml

<button bindtap="gotoIndex" type="default"> Click to jump to home home page </button> 

.js

// Click the event handler button , Jump to the home page 
  gotoIndex(){
    wx.switchTab({
      url: '/pages/index/index',
      success:function(){
        console.log(' Jump successful ！')
      },
      fail:function(){
        console.log(' Jump failure ！')
      },
      complete:function(){
        console.log(' Jump event has been triggered ！')
      }
    })
  }

2） Navigate to non tabBar page

Configuration steps

• Declare a button component
• Bind event functions for buttons
• Call in the time handler wx.navigateTo(Object object) Method
• Specify url、success、fail Equal attribute

Sample code

The code is the same as the above , Just a calling applet API Different , You need to call wx.navigateTo(Object object) Method

 

3） Back navigation

Configuration steps

• Declare a button component
• Bind event functions for buttons
• Call in the time handler wx.navigateBack(Object object) Method
• Specify delta、success、fail Equal attribute

  among object The attribute list of the parameter object is as follows ：

  Sample code

.wxml

<button bindtap="gotoBack" type="default"> Click to return to the previous page </button> 

.js

gotoBack(){
    wx.navigateBack({
        //delta The default value of the property is 1 , So the following sentence can be written or not 
        delta:1 
    })
}

 

---

 

（5） Navigation parameters

1） Declarative navigation parameters

navigator Component's url Property is used to specify the path of the page to jump to . meanwhile , Parameters can be carried behind the path ：

• Use... Between parameters and paths ? Separate
• Between parameter key and parameter value = Connected to a
• Different parameters are used & Separate

Sample code

<navigator url="/pages/info/info？name=gy&number=1" open-type="navigate"> Navigate to info page </navigator>

Result of parameter transmission

 

 2） Programming navigation parameters

When calling wx.navigateTo(Object object) Method for page Jump , You can also carry parameters , It is the same as declarative navigation parameter passing , Write parameters into url in , The method is consistent

Sample code

 gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=gy&number=1',
      success:function(){
        console.log(' Jump successful ！')
      },
      fail:function(){
        console.log(' Jump failure ！')
      },
      complete:function(){
        console.log(' Jump event has been triggered ！')
      }
    })
  }