微信小程序页面跳转二三事

微信小程序里是没有a标签打开新页面这回事的,除了小程序原生提供的后退按钮其他页面跳转都要通过小程序的跳转函数来完成,尤其自定义小程序导航栏后,上面的跳转按钮均需要自定义。

官网提供了五个路由跳转函数

  • wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
  • wx.reLaunch 关闭所有页面,打开到应用内的某个页面。
  • wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
  • wx.navigateBack 关闭当前页面,返回上一页面或多级页面。

除了wx.navigateBack,其他几个函数参数格式都一样,url success fail complete,这里就不详细介绍了,主要说一下这几个函数应用时应注意的问题。

小程序中页面栈最多十层,和浏览器中的前进后退不一样,后退再前进可以返回到原页面,小程序使用wx.navigateBack 会关闭当前页面,当前页面不会保存再小程序页面栈中,如果需要将当前页面保存在页面栈中只能使用wx.navigateTo

wx.reLaunch可以打开任意页面,其他除了wx.navigateBack 均有限制。

wx.navigateBack 传递参数

wx.navigateBack 和其他几个跳转不同,不能直接通过url 传递参数,如果想向上级页面传递参数只能通过其他方法。

笨方法可以将数据存在app.globalData 或者localStorage 中,既然是笨方法肯定是不太可取了。

小程序提供了一个getCurrentPages() 函数,可以获取到页面栈实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。获取到页面栈后可以直接调用上一个页面对象的setData()方法,把数据存到上一个页面中去,示例代码。

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
 
prevPage.setData({
  data:data
});
wx.navigateBack({
        delta: 1
        });

以上。

Bigfa

computer loser / Travel with

可能感兴趣的文章

Responses

  1. 奶爸de笔记的头像

    这个前段时间了解过,不过也仅仅是了解,并不会。

  2. 奶爸de笔记的头像

    你博客评论提交速度是我订阅的这些里面最快的一个。 :oops:

    1. 枫叶的头像

      @奶爸de笔记 我感觉我博客里要是给那个评论邮件提醒插件去掉的话,应该也会达到这个速度。 :arrow:

  3. 雅绿的头像

    大发最近文章高产啊 :oops:

  4. repostone的头像

    确定是二三事吗?

  5. 郑永的头像

    可以,微信小程序的运行速度总感觉有点慢,应该是服务器问题,期待5G带来,看看能否快一些。

发表留言

人生在世,错别字在所难免,无需纠正。

:mrgreen::neutral::twisted::arrow::shock::smile::???::cool::evil::grin::idea::oops::razz::roll::wink::cry::eek::lol::mad::sad::!::?: Smilies powered by wp-alu

Post Comment