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

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

前言

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

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

下面的是我的公众号二维码图片,欢迎关注。
在这里插入图片描述

发布了28 篇原创文章 · 获赞 96 · 访问量 12万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览