微信小程序> 【微信小程序】几个路由函数(wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack)的用法

【微信小程序】几个路由函数(wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack)的用法

浏览量:716 时间: 来源:hellocc233

在微信公众平台的小程序开发文档里,目前微信提供的路由函数有5个,由于本人在编写代码的时候碰到了问题(花了近一个早上才找到了解决方案,所以想记录下就这个问题),顺便再重新上去查阅了下,记录下这个几个函数的用法。


①首先是wx.switchTab,用这个函数的前提是,你的app.json下要添加tabBar并且有list(里面的属性一般不能少于2个,但是也不能多于5个),也就是说你的小程序要有底部导航栏,刚刚已经说了如果你有导航栏的话,导航栏一般是2到5个。

用法也是比较简单,就是关闭其他所有非 tabBar 页面,跳转到 tabBar 页面。从wx.switchTab(Object object)中,可以看到可传入的参数类型是object类型,提供的参数有:


调用示例:

//app.json{  "tabBar": {    "list": [      {        "pagePath": "pages/index/index",        "text": "首页"      },      {        "pagePath": "pages/other/other",        "text": "其他"      }    ]  }}//然后在相应的js页面里wx.switchTab({  url: 'pages/index/index'})

这样就可以跳转到别的导航栏里。


②接下来是wx.reLaunch,这个到目前为止,本人基本没怎么用到过,不过还是简单记录下:意思就是关闭所有页面,跳转到小程序内的某个页面。wx.reLaunch(Object object),参数也是object类型,用法与wx.switchTab一样,这里就省略了。

调用示例:

//你想用在的.js里wx.reLaunch({  url: 'page页面的完整路径?id=1'})//需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

③第三个是wx.redirectTo,它跟接下来的第四个wx.navigateTo函数有很多相似的地方。wx.redirectTo(Object object)是用在关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面(这个算是它跟wx.switchTab最大的区别吧)。wx.redirectTo(Object object),参数也是object类型,用法跟前两个一样,这里就省略了。

调用示例:

//你想用在的.js里wx.redirectTo({  url: 'page页面的完整路径?id=2'})//需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

④第四个是wx.navigateTo,前面说了它跟wx.redirectTo有很多相似的地方。wx.navigateTo(Object object)也是不能跳到 tabbar 页面,保留当前页面,跳转到应用内的某个页面。参数也是object类型,用法跟前面一样,这里不再说。

//你想用在的.js里wx.navigateTo({  url: 'page页面的完整路径?id=3'})//需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

注:这里顺便说一下wx.redirectTo和wx.navigateTo的区别,wx.navigateTo导航到另一个页面,会将当前的页面隐藏起来,使页面进入hide状态,并不会关闭可以通过返回按钮回到当前的页面;redirectTo()会使当前界面进入unload状态,即关闭该页面,将无法回到当前页面。


⑤最后一个是wx.navigateBack,这个想重点记录下。当有底部导航栏时,我们可以通过wx.switchTab跳转到相应的导航栏里。加入我把要跳转过去的底部导航栏去掉后,原本页面的数据要想传过去,如果用wx.redirectTo和wx.navigateTo,那么需要在url路径后附加上参数,有点不太方便。这时候如果用wx.navigateBack这个函数的话,可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。wx.navigateBack(Object object)的参数依然是object类型,但是跟前面的有区别:

调用示例:

let pages = getCurrentPages(); //获得当前js页面里的pages里的所有信息。 let prevPage = pages[ pages.length - 2 ];   //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,以此类推。  //最后就是返回上一个页面。 wx.navigateBack({     delta: 1  // 返回上一级页面 })

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎