微信小程序跳转函数总结

微信小程序跳转函数总结

​ 笔者在微信小程序前端的开发过程中，在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况，以下是我对这些函数的使用场景的一个总结介绍。

wx.navigateTo

这是最常用也是最基本的一个页面跳转函数，该函数跳转之前会先保留当前页面指针，然后跳转到目标页面。因此使用该跳转函数跳转到的页面也都可以回退到上一个页面。示例如下：

//保留当前页面，跳转到指定页面
wx.navigateTo({
  url: 'page/des/des'   // 目的页面url
})

wx.redictTo

上面提到，利用wx.navigateTo跳转到的页面均可以返回的上机页面，当我们不希望用户在跳转以后再次返回到当前页面，那么我们就需要在跳转前把当前的页面给关闭掉，wx.redictTo则实现了这个功能，通过该函数进行跳转到的目的页面，将无法返回到它的父级页面。（注意：如果目的页面父级页面是由它父级页面通过wx.navigateTo跳转而来的话，那么目的页面返回上一层的话，将会返回到其父级页面的父级页面。）代码示例如下：

// 关闭当前页面，跳转到目的页面
wx.redirectTo({
  url: 'page/des/des'  //目的页面url
})

wx.reLanch

wx.redictTo只能关闭当前层的页面，如果我们需要在跳转时关闭其所有父级的页面话，就需要从父级到当前，每一级的跳转都用wx.redictTo。而且如果我们只希望在当前层关闭所有页面，那么仅仅使用wx.redictTo就会很不方便，wx.reLanch及实现了关闭所有页面以后的跳转功能，代码示例如下：

// 关闭所有页面，跳转到目的页面
wx.reLanch({
  url: 'page/home/home' //目的页面url
})

wx.navigateBack

该函数为页面回退函数，我们在实际使用的过程中不仅仅是需要跳转到新的页面，当用户完成一些操作以后我们可能需要自动返回到上级页面来增加用户的体验。navigateBack与navigateTo相对应，即利用navigateTo保存的页面指针来实现跳转操作。具体示例如下:

//假设我们从页面A 跳转到页面B 在跳转到页面C.

wx.navigateTo({
  url: 'page/A/A　　// 页面 A
})
wx.navigateTo({
  url: 'page/B/B'　　// 页面 B
})
wx.navigateTo({
  url: 'page/C/C'　　// 页面 C
})
//接下来进行回退
//delta 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
//如果想回退到页面A,则delta 为 3 即返回三个页面
wx.navigateBack({
  delta: 2
})

文章参考

• https://developers.weixin.qq.com/miniprogram/dev/api/