转自:http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-navigator.html

微信小程序中的页面跳转用navigator就行了,但如果需要跳转的页面路径跟系统底栏tabBar中的相同时,就无法跳转了......

这个navigator本来该放前面说的,不知道怎么回事就写漏掉了,现在补上来。

一、navigator是什么?

微信小程序官方释义为:页面链接。文档地址:
developers.weixin.qq.com/miniprogram/dev/component/navigator.html。此时我们应该知道这东西可以干嘛了,就是类似网页中的a标签的用途。

二、navigator有什么坑?

这一切还要从我们的设计稿说起。在首页的时候,可以看到底栏是一个tabBar,一共是有5个链接的。如图:微信小程序之商城项目首页tabBar底栏截图我们再来看下我的订单页面。如图:微信小程序之商城项目我的订单页面可以看到有“查看物流”、“确认收货”两个按钮。由于当时页面不完整,所以就直接让其跳转到了首页,也就是:/pages/index/index页面

按理说,这没毛病对吧。反正navigator是用来做超链接跳转用的,而且这个首页地址也是存在的。但是!神奇的事情出现了!那就是:此时我的订单页面中的这两个链接无法跳转到首页,点击此页面的商品图是可以成功跳转到商品详情页的!

此时出现这种结果,让我很是懵逼!不科学啊,这页面地址明明有的啊,为什么不跳转呢?!

三、当跳转的链接跟tabBar中pagePath的路径相同时无法跳转

一脸懵逼只是从网上搜索,于是后经搜索才得知:当跳转的链接跟tabBar中pagePath的路径相同时无法跳转

怎么理解呢?我们来看下app.json中的tabBar代码吧。如图:app.json中tabBar中出现了首页的路径可以看到list数组里的第一个对象的pagePath就是pages/index/index

四、解决方法:open-type=switchTab

在文档中有这样一个属性名-- open-type,释义是:跳转方式。一共有6个值,分别是:
navigate,保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabBar 页面。使用 wx.navigateBack 可以返回到原页面。;
redirect,关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面。;
switchTab,跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;
reLaunch,关闭所有页面,打开到应用内的某个页面;
navigateBack,关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。;
exit,退出小程序,target="miniProgram"时生效;
一堆描述,其实我也不知道描述的是啥!(想看官方文档的可拉上面找链接。)主要还是因为不能充分理解 tabBar 页面到底是啥!只好按照网上说的方法操作,把订单页面中的那两个按钮都添加上open-type="switchTab"。然后一保存再点击就可以跳转了,开森!

由于当时自己对两个以上按钮都用了component组件进行封装,所以这个坑在别的地方又突显了出来!

五、open-type=switchTab也有坑

需要注意的是:switchTab只能跳转到 tabBar 页面!!!。什么意思呢?拿首页的设计稿来说,底部的tabBar 里面有5个页面的链接,而在使用这个switchTab时,跳转的链接需要是这5个链接里面的才行,不在这5个链接内的继续使用open-type="switchTab"是无法跳转的!

别问我是怎么知道的,因为我掉坑中了!

posted on 2019-01-18 00:50  Sharpest  阅读(2264)  评论(0编辑  收藏  举报