小程序常用的两种跳转方式
(一)
<!-- 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层 --> wx.navigateTo <!-- url:'../Atiao2/index' --> wx.navigateTo({ url:'/pages/Atiao2/index' }) <!-- 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 --> wx.redirectTo wx.redirectTo({ url: '/pages/Atiao2/index' }) <!-- 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 --> wx.switchTab wx.switchTab({ url: '/pages/Atiao2/index' }) <!-- 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。--> wx.navigateBack wx.navigateBack({ delta: 2 })
第一种方式 官方跳转文档
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
(二)
<!-- open-type="" 引号中的值与第一种方式中的一样儿 去掉(wx.) --> <navigator open-type="navigate" url="/pages/Atiao2/index"> <button >另一种</button> </navigator>
第二种方式 官方跳转文档
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
注:
<!-- hover-class="none" 去掉点击的时候的默认样式。 也可以自己写样式(用自己的class名代替none,然后在wxss中书写样式即可) -->
跳转小示例
<!-- wxml --> <button bindtap="tiao">点击跳转</button> <navigator open-type="navigate" url="/pages/Atiao2/index"> <button >另一种</button> </navigator> <!-- js --> tiao:function(){ console.log("这里是跳转") wx.navigateTo({ // url:'../Atiao2/index' url:'/pages/Atiao2/index' }) },