微信小程序页面跳转方式的总结

微信小程序页面跳转方式的总结

前言

在微信小程序的开发中经常会遇到页面跳转的情况，有的在跳转的时候还需要在页面之间传递参数，今天整理下常见的几种页面跳转方式。

wx.navigateTo

保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面

示例1：

wx.navigateTo({
  url: `/pages/demo/demo?name=${name}`
})

需要注意的是，需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 =相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'。这样在目标页面中就可以这样引用传入参数：

示例2：

Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

传递的参数在跳转页面中的onLoad函数中通过option.query就可以获取到。

wx.redirectTo

这个方法和wx.navigateTo方法很相似，微信官方文档中是这么定义的：

关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。

从定义来看这两者差不多，一个是保留当前页面一个是关闭当前页面，这个要怎么理解呢？区别在于:

调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会

也就是说如果用redirectTo方法从A页面跳到B页面，A页面会被删掉，从B页面调到C页面，B页面会被删掉，如果这个时候想从C页面回到B页面就没法返回了，因为B页面这个时候已经被销毁了。

wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

这个方法很简单，返回上一页面。但是需要注意的是，这个方法返回上一页面的时候是无法传参的，如果父页面想要获取子页面的参数怎么办呢？微信为我们提供了一个很强大的方法叫getCurrentPages。

示例2：

    const pages = getCurrentPages();
    // let currpage = pages[pages.length - 1]; 
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      id
    });

通过getCurrentPages();获取当前的页面湛，let currpage = pages[pages.length - 1];pages[pages.length - 1];得到当前页面，let prevPage = pages[pages.length - 2]得到父页面，这样就可以直接在子页面中调用父页面的prevPage.setData方法来进行数据修改绑定了。

下面的是我的公众号二维码图片，欢迎关注。