[applet development] page navigation details

Learning objectives of this section ：
Learn how to use the navigation jump between pages

@[toc]

---

One . Page navigation

What is page navigation

Page navigation It refers to the mutual jump between pages .

2. Two ways to realize page navigation

Page navigation has Two ways of implementation ：

1. Declarative navigation

Method ： Declare a navigator Components , Click this component to jump to the page .

2. Programming navigation

Method ： Calling applet navigation API Realize page Jump .

Two . Declarative navigation

1. Navigate to tabBar page

tab Page fingers are configured as tabBar The page of , In the use of specified navigator When the component jumps to the specified page , Must specify url Properties and open-style attribute , among ：

• url Indicates the page address to jump to , Must be / start
• open-strle Indicates how to jump , This must be switchTab

<navigator url="/pages/message/message" open-type="switchTab"> Jump to the message page </navigator>

2. Navigate to non tabBar page

Not tabBar A page is one that is not configured to tabBar The page of . In the use of naxigator Component jump to non tabBar When the page is , You also need to specify url Properties and open-type attribute , among ：

• url Indicates the page address to jump to , Must be / start
• open-style Indicates how to jump , This must be navigate, At this point, this attribute can be omitted

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

3. Back navigation

If you want to go back to the previous page or multi-level page , You need to specify open-type Properties and delta attribute , among ：

• open-type The value of must be navigateBack, Indicates that you want to perform back navigation
• delta The value of must be a number , Indicates the level to go back , The default is 1

<navigator open-type="navigateBack" delta="1"> Go back to the previous page </navigator>

3、 ... and . Programming navigation

1. Navigate to tabBar page

call ==wx.switchTab(Object object)== Method , You can jump to tabBar page . among Object The attribute list of the parameter object is explained in the official document as follows :

wxml Code ：

<button bindtap="gotoMessage" type="primary"> Jump to the message page </button>

js Code ：

  gotoMessage(){  	wx.switchTab({  		url: '/pages/message/message',})  },

2. Navigate to non tabBar page

call ==wx.navigateTo(Object object)== Method , You can jump to non tabBar The page of . among Object The attribute list of the parameter object is explained in the official document as follows ：

wxml\ Code ：

<button bindtap="gotoinfo" type="primary"> Jump to info page </button>

js Code ：

  gotoinfo(){    wx.navigateTo({      url: '/pages/info/info',    })  },

3. Back navigation

call ==wx.navigateBack(Object object)== Method , You can return to the previous page or multiple pages . among Object The optional attribute list of the parameter object is explained in the official document as follows ：

wxml Code ：

<button bindtap="goBack"> Go back to the previous page </button>

js Code ：

  goBack(){    wx.navigateBack({      delta: 1,    })  },

Four . Navigation parameters

1. Declarative navigation parameters

navigator Component's url Attribute is used to specify that <fonr color=blue> The path of the page to jump to . meanwhile , Parameters can also be carried behind the path ：

• Use... Between parameters and paths ? Separate
• Parameter key and parameter value = Connected to a
• Use... For different parameters & Separate

<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate"> Jump to info page </navigator>

2. Programming navigation parameters

call ==wx.navigateTo(Object object)== Method to jump to the page , You can also carry parameters .

  gotoinfo(){    wx.navigateTo({      url: '/pages/info/info?name=ls&age=22',    })  },

3. stay onLoad Receive navigation parameters in

Parameters carried by declarative navigation parameters or programmatic navigation parameters , Can be directly in onLoad Get directly from the event .

  data: {    // Navigate the parameter object passed ： Define an empty array of objects 	quary:{}  },  onLoad(options) {	console.log(options)	this.setData({  	quary:options})

5、 ... and . summary

This section learned two ways of page navigation and two ways of navigating to tabBar Page and non tabBar The way of the page , And the method of navigation and parameter transmission .