在微信小程序的开发中经常会遇到页面跳转的情况,有的在跳转的时候还需要在页面之间传递参数,今天整理下常见的几种页面跳转方式。
保留当前页面,跳转到应用内的某个页面,但是不能跳到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.navigateTo方法很相似,微信官方文档中是这么定义的:
关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面。
从定义来看这两者差不多,一个是保留当前页面一个是关闭当前页面,这个要怎么理解呢?区别在于:
调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会
也就是说如果用redirectTo方法从A页面跳到B页面,A页面会被删掉,从B页面调到C页面,B页面会被删掉,如果这个时候想从C页面回到B页面就没法返回了,因为B页面这个时候已经被销毁了。
关闭当前页面,返回上一页面或多级页面。可通过 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方法来进行数据修改绑定了。
下面的是我的公众号二维码图片,欢迎关注。