小程序跳转
小程序常用的两种跳转方式
(一)
<!-- 保留当前页面,跳转到应用内的某个页面。但是不能跳到 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' }) },
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步