微信小程序页面跳转问题

刚开始看微信小程序相关说明,发现如下跳转方式

1.wx.navigateTo、wx.switchTab

2.app.json中加入tabBar

3.navigate控件中加入url地址,最好再加上open-type

app.json中加入tabBar,就是页面下方多一组tab按钮,用来切换页面

{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/modules/first/first",
"pages/modules/superior/superior",
"pages/modules/subordinate/subordinate"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "weChat-啦啦啦",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/modules/first/first",
"text": "first"
},
{
"pagePath": "pages/modules/superior/superior",
"text": "superior"
},
{
"pagePath": "pages/modules/subordinate/subordinate",
"text": "suboridnate"
}
]
}
}

js文件中加入跳转

getMySuperior: function(){
wx.switchTab({
url: '../modules/superior/superior',
})
},

如果app.json中有tabBar,这里使用navigateTo是无效的,只能使用switchTab,所以navigate控件中也要使用switch类型

< navigator open-type= "switchTab" url= "../modules/subordinate/subordinate">我的下级 </ navigator >

如果app.json中没有tabBar,则页面下方不会有tab按钮,可以直接使用

getMySuperior: function(){
wx.navigateTo({
url: '../modules/superior/superior',
})
},
//或者
  getMySuperior: function(){
wx.redirectTo({
url: '../modules/superior/superior',
})
},

其中navigate左上角会有返回按钮,redirectTo没有返回按钮

没有tabBar的情况下,navigate控件使用switchTab是无效的,要使用navigate

< navigator open-type= "redirect" url= "../modules/subordinate/subordinate">我的下级 </ navigator >
或者
< navigator open-type= "navigate" url= "../modules/subordinate/subordinate">我的下级 </ navigator >

差异同上。

终结:

跳转方式分为switch跳转和redirect跳转、navigate跳转

switch跳转依赖tabBar,redirect、navigate不依赖

redirect不会记录上级页面,navigate会记录上级页面,并且左上角会有返回按钮

跳转还分为控件跳转navigate、function跳转wx.navigateTo、wx.switchTab、wx.redirectTo

有tabBar的时候可以通过下方tab按钮切换,也可以通过调用wx.switchTab跳转,也可以通过navigate控件的switchTab方式跳转

没有tabBar的时候可以通过navigate控件的navigate、redirect方式跳转。或者调用wx.redirectTo、wx.navigateTo方式跳转。

猜你喜欢

转载自blog.csdn.net/youyudexiaowangzi/article/details/81063070
今日推荐