小程序开发之底部导航菜单（四）

一、小程序之底部导航

学习过原生IOS和Android的朋友肯定做过底部导航菜单，这一经典设计和交互功能在移动手机端的APP上几乎无处不在，在原生的IOS和Android上实现这一功能并不十分简单（当然网上有很多成熟的模板可以参考和借鉴），在小程序上这一复杂功能的实现将彻底变得异常简单

每一个底部菜单导航页面需要你新建一个页面模块（对应就是一个文件夹，包含四个同名文件）；

但是这样显然是不够的，导航菜的标题，导航菜的高度，导航菜单的颜色，导航菜单首选页，导航菜单包含哪几个菜单，每个菜单图标，每个菜单标题，等等这些一系列问题还没有解决，不用着急，小程序给我们提供了一个核心配置文件app.json，在这里就能配置我们底部导航菜单的一切信息，当然这个小程序核心初始化配置文件最主要看是用来配置小程序信息的，导航菜单在这里作为小程序的配置的一部分

 二、app.json详细说明

为了方便说明，我先贴出我的app.json文件如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "ONE",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#888",
    "selectedColor": "#89bdf7",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/home.png",
        "selectedIconPath": "image/home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "阅读",
        "iconPath": "image/reading.png",
        "selectedIconPath": "image/reading_active.png"
      },
      {
        "pagePath": "pages/mypage/mypage",
        "text": "我的",
        "iconPath": "image/music.png",
        "selectedIconPath": "image/music_active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1、pages

该部分是用来注册页面的，所有在小程序中需要的页面必须都要在这里注册，否则小程序将无法使用该页面，这点类似Android（做过安卓开发的同学应该有印象）；

他是一个数组，每个数组是各个页面的完整路径，注意的是不用带上后缀名.wxml，因为小程序中所有的页面都必须只能是.wxml后缀的文件；

2、window

这部分是用来配置整个小程序总体窗口属性的，比如背景文字的样式backgroundTextStyle、导航条背景颜色navigationBarBackgroundColor、导航条标题文字navigationBarTitleText、导航条文字样式navigationBarTextStyle，更多设置属性请参考官网文档：在微信开发者中打开【帮助】-》【开发者文档】

3、tabBar

color：设置导航栏主体默认颜色

selectedColor：设置导航条主体被选中后的颜色

backgroundColor：设置导航条背景颜色

borderStyle： 设置导航条边框样式

list：设置导航条菜单项

pagePath：导航条菜单项页面全路径

text：导航条菜单项名称

iconPath：导航菜单项默认的图标全路径

selectedIconPath：导航菜单项选中后的图标全路径

4、style

app主体样式

5、sitemapLocation

配置sitemap位置，这个一般在app.json同级目录

再次申明：更多配置内容请务必参考官方文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

这里只做最简单的入门解释和说明，篇幅有限不能全部解释完整，作为程序猿员的你一定不能懒（懒人不适合做程序猿，真的不骗你，赶紧改行吧）；

通过这个最经典的底部导航栏让你对小程序的全部配置有个一个初步的印象，增加你的入门感觉和印象，你完成了底部导航栏的配置就基本可以自豪的说我也是曾经开发过小程序的流弊程序猿啊，今天的内容到此为止，我们继续下回再见！