微信小程序页面间的5种跳转方法

下面总结一下微信小程序页面间的跳转方法,一共有5种:

1. wx.navigateTo() // 推出新页面,并把新页面放入页面堆栈
2. wx.navigateBack() // 返回到前面的页面,并把页面堆栈中的上层页面弹出
3. wx.redirectTo() // 释放当前页面,进入新页面
4. wx.switchTab() // tabBar布局的页面,切换tab
5. wx.reLaunch() // 释放所有页面,并进入目标页面,相当于重新打开程序,进入到指定页面

下面代码示例主要使用两个页面:

/pages/index/index
/pages/logs/logs

跳转时候的url可以使用绝对路径,也可以使用相对路径,示例代码统一使用相对路径。url后面可以携带参数,格式跟html的链接格式一致。

代码片段:
1. wx.navigateTo()
从index页面跳转到logs页面,index页面依然存在于内存中。

wx.navigateTo({
      url: '../logs/logs?id=111&name=abcd',
    })

2. wx.navigateBack()
delta:表示会退的步数,默认为1,即回到上一个页面,也可以设置更大的值

wx.navigateBack({
      delta : 1,
    })

3. wx.redirectTo()
从index跳转到logs页面,index页面会被释放

wx.redirectTo({
      url: '../logs/logs?id=111&name=abcd',
    })

4. wx.switchTab()
切换tabBar中的标签页,也可以用于从非tab页跳转到tab页,比如从tabBar中的某个页面点击,然后redirectTo进入登录页面,登录成功后返回tabBar标签页,就可以使用switchTab

wx.switchTab({
      url: '../logs/logs?id=111&name=abcd',
    })

5. wx.reLaunch()
释放所有页面,进入指定页面,也可以用于解决方案4中登录页面登录成功后返回的问题

wx.reLaunch({
      url: '../logs/logs?id=111&name=abcd',
    })

参考资料:
小程序开发文档:路由 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

Add a Comment

邮箱地址不会被公开。 必填项已用*标注