刚开始看微信小程序相关说明,发现如下跳转方式
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方式跳转。