open-type跳转方式 | 对应点击事件 | 功能区别 |
navigator(默认) | wx.navigateTo | 跳转到应用内的某个页面 可返回原页面 但不可跳转到Tab页 |
返回上一页 | ||
redirect | wx.redirectTo | 关闭当前页面,跳转到应用内的某个页面,不能返回原页 |
switchTab | wx.switchTab | 可跳转到tab菜单页 |
reLaunch | | 关闭所有页面,打开到应用内的某个页面 |
navigateBack | | 返回上一页 |
exit | target="miniProgram" 时生效 | 退出小程序 |
一、navigator(静态跳转,相当于html中的<a>)
注意:这种方式,不能跳转到tabbar页面(底部菜单导航)
<view>
【默认】:不能跳转到tabbar页面(底部菜单导航)
</view>
<view style="height: 30px;"></view>
<view>
<navigator url="/pages/my/my" style="background-color: rgb(193, 252, 252);height: 40px;width: 200px;text-align: center;line-height: 40px;">
不能跳转到“我的”>
</navigator>
</view>
<view style="height: 30px;"></view>
<view>
【switchTab】:可跳转tabbar页面(底部菜单导航)
</view>
<view style="height: 30px;"></view>
<view>
<navigator url="/pages/my/my" open-type="switchTab" style="background-color: rgb(193, 252, 252);height: 40px;width: 200px;text-align: center;line-height: 40px;">
可跳转到“我的”>
</navigator>
</view>
<view style="height: 30px;"></view>
<view>
用【点击事件】实现跳转
</view>
<view style="height: 30px;"></view>
<view>
<button type="primary" bindtap="urlClick">
点击事件跳转到【我的】
</button>
</view>
二、index.json代码
urlClick() {
// ========= 不可跳转到tabbar页面(底部菜单导航)
wx.navigateTo({
url:"/pages/my/my"
})
// ========= 可跳转到tabbar页面(底部菜单导航)
wx.switchTab({
url:"/pages/my/my"
})
// ========= 可传参数:可跳转到tabbar页面(底部菜单导航)
wx.reLaunch({
url:"/pages/my/my?id=888"
})
},