一、需求：实现如图所示的tabBar效果

二、实现步骤：

1.拷贝图标资源

把image文件夹拷贝到小程序项目根目录中

图片中包含-active的是选中之后的图标

图片中不包含-active的是默认图标

2.新建3个对应的tab页面

3.配置tabBar选项

（1）打开app.json配置文件，和pages、windows平级，新增tabBar节点

（2）tabBar节点中，新增list数组，存放每个tab项的配置对象

（3）在list数组中，新增每一个tab项的配置对象，对象中包含的属性如下：

          pagePath指定当前tab对应的页面路径（必填）

          text指定当前tab上按钮的文字（必填）

          iconPath指定当前tab未选中时候的图片路径

          selectedIconPath指定当前tab被选中后高亮的图片路径

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
  ],  
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "NA",
    "navigationBarBackgroundColor": "#2b4b6b",
    "enablePullDownRefresh":true,
    "backgroundColor":"#efefef"
  },

  "tabBar":{
    "list":[
      {
        "pagePath": "pages/home/home",
        "text":"首页",
        "iconPath":"/image/home.png",
        "selectedIconPath":"/image/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text":"消息",
        "iconPath":"/image/message.png",
        "selectedIconPath":"/image/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text":"联系我们",
        "iconPath":"/image/contact.png",
        "selectedIconPath":"/image/contact-active.png"
      }
    ]
  },

  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}