当前位置:主页 > 小程序开发 > 基础 >

微信小程序配置中tabBar不显示问题详解

栏目:基础 来源: 微信小程序开发网 阅读: 2017-11-28
  在我们做微信小程序开发的过程中,有时会遇到这样的情况,就是在全局配置文件app.json配置好tabBar后不显示,这个问题在网上有很多的开发人员都遇到过。如下图所示:



  我们明明在app.json里面的tabBar字段里面配置了“组件”和“接口”两个tabBar,为什么在微信小程序底部那里不显示呢?难道是哪里出问题了?

  但是,看看也没有提示说哪里出错了,这让很多做微信小程序开始的人员感觉到莫名其妙的,既然有却不显示说明一定哪里出问题了。

  出现这个问题的原因就是我们在做tabBar配置时,在list里面配置的页面路径pagePath配置错了。

  微信小程序要求:字段tabBar里面的pagePath的路径必须与微信小程序里面的字段pages路径一致。

  即在app.json里面的pages字段首页路径,必须跟tabBar字段里面的网页路径一致,如下图所示:


  但是,在list里面的第二个路径pagePath可以与pages字段里面的路径不一样,只需要保持第一个路径与pages字段里面的首页路径一样即可。

  上图中第一个路径跟首页路径一样而第二个不一样,这样也可以正常显示,因为,“组件”tabBar本来显示的就是pages定义的首页里面的内容,所以,两者必须一致。

  而在API里面显示的则是“接口”当然跟首页不一样了,如果一样的话当用户点击“接口”后,显示的仍然是首页这样就不对了。

  如果我们在做微信小程序开始过程中遇到这种问题,只要检查一下看看这个路径是不是写借了,如果不显示的话,我们在开发时可以在这方面查看一下。

总结:

  1)list里面的页面路径pagePath,必须在 pages 中先定义。

  例如上面的例子中list里面的两个路径分别是:

  "pagePath": "page/component/index",
   "pagePath": "page/API/index"


  这两个路径都是在字段pages里面定义好的,如下所示:

  "pages": [
     
   "page/component/index",

  "page/API/index"   
  ]


  如果没有在pages里面定义好路径,那么,在微信小程序首页就不会显示“组件”和“接口”两个组件。

  2)在pages里面路径位置决定着小程序的默认显示顺序。

  如果上面在pages定义的路径变为:

  "pages": [
 
  "page/API/index",
     
   "page/component/index"
 
  ]


  则默认显示“接口”,如下图所示:



  而默认显示的tabBar与list里面的页面路径的顺序无关。