1. Declarative Navigation
1.1 Declarative Jump Tab Page
1.1.1 Configured Tab page
1.1.2 Page jump writing
<navigator url="/pages/home/home" open-type="switchTab">跳转首页</navigator>1.2.3 Page display
1.2 Declarative jump to non-Tab pages
1.2.1 Page jump code
<navigator url="/pages/info/info" open-type="navigate">跳转非tab页面</navigator>In fact, the default jump is the non-Tab page, which can be abbreviated as follows
<navigator url="/pages/info/info">跳转非tab页面</navigator>1.2.2 Picture display
1.3 Declarative navigation parameter passing
<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>Note: jump tab pages cannot pass parameters, but non-Tab pages can pass parameters, the lower left corner of WeChat development!
or on the page after the jump
1.4 Back navigation
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>Description: The number of layers backed by the delta code, the default is 1. If you specify a few layers, just enter the number directly!
2. Programmatic Navigation
2.1 Programmatically jump to the Tab page
2.1.1wxml
<view bindtap="change1">编程式导航1跳转Tab页面</view>2.1.2 js file
change1(){
wx.switchTab({
//路径
url: '/pages/home/home',
//成功的回调函数
success:(res)=>{
console.log(res);
},
//失败的回调函数
fail:(error)=>{
console.log(error);
}
})
},2.2 Programmatically jump to non-Tabe pages
2.2.1wxml file
<view bindtap="change2">编程式导航1跳转非Tab页面</view>2.2.2js file
change2(){
wx.navigateTo({
url: '/pages/info/info',
success:(res)=>{
console.log(res);
},
fail:(error)=>{
console.log(error);
}
})
},2.3 Programmatic parameter passing
2.3.1js file
change2(){
wx.navigateTo({
url: '/pages/info/info?name=forever&age=18',
success:(res)=>{
console.log(res);
},
fail:(error)=>{
console.log(error);
}
})
},
Note : It is still not possible to pass parameters to the Tab page.
2.4 Back navigation
2.4.1 wxml file
<button bindtap="change1">编程式返回上一级</button>2.4.2js file
change1(){
wx.navigateBack({
delta:2
})
},3. Part of the source code display
3.1wxml file
<!--pages/message/message.wxml-->
<!-- 声明式导航 -->
<!-- 跳转tab页面 -->
<navigator url="/pages/home/home" open-type="switchTab">跳转tab页面</navigator>
<!-- 跳转非tab页面 -->
<!-- navigate默认可以不用写 -->
<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>
<!-- delta默认值为1 -->
<!-- 编程式导航 -->
<view bindtap="change1">编程式导航1跳转Tab页面</view>
<view bindtap="change2">编程式导航2跳转非Tab页面</view>
3.2 js file
change1(){
wx.switchTab({
url: '/pages/home/home?name=forever&age=18',
success:(res)=>{
console.log(res);
},
fail:(error)=>{
console.log(error);
}
})
},
change2(){
wx.navigateTo({
url: '/pages/info/info?name=forever&age=18',
success:(res)=>{
console.log(res);
},
fail:(error)=>{
console.log(error);
}
})
},