技术小白之记录微信小程序底部导航栏

有了图片有了文字怎么能没有导航栏呢，所以下面来记录下底部导航栏的过程，先展示下我做的简易的导航栏图片。

可以在上面的图片中看到底部的包含“推荐”“反馈”的一个底部导航栏。制作导航栏只需要打开微信小程序app.json，向{}里填入下列代码：

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "img/tj.png",
        "iconPath": "img/tjw.png",
        "pagePath": "pages/recommend/recommend",
        "text": "推荐"
      },
      
      {
        "selectedIconPath": "img/fk.png",
        "iconPath": "img/fkw.png",
        "pagePath": "pages/fb/fb",
        "text": "反馈"
      }
    ]
  }

先简易的解释下tabBar是表示“底部 tab 栏的表现”；
color—>tab 上的文字默认颜色；
selectedColor—>tab 上的文字选中时的颜色；
borderStyle—>tabbar上边框的颜色， 仅支持 black / white；
list—>tab 的列表，最少2个、最多5个 tab；
list包含的内容：
selectedIconPath—>选中时的图片路径，不支持网络图片。
iconPath—>图片路径，不支持网络图片。
pagePath—>页面路径，必须在 pages 中先定义。
text—>底部导航栏上的指示文字。
注：上述说的图片指的是导航栏上显示的小块图片，有个非常值得推荐的导航图片地址：http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

另外对于上述的tabBar功能可以在官网上看到更加详细的说明，
网站地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html