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

xiaoxiao2021-04-19  137

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

微信小程序页面跳转方式的总结前言wx.navigateTowx.redirectTowx.navigateBack

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

前言

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

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方法来进行数据修改绑定了。

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

转载请注明原文地址: https://www.6miu.com/read-4821220.html

最新回复(0)