微信小程序学习笔记（四）----微信小程序底部菜单实现

我们在用小程序的时候大部分都会有一个类似于这样的底部菜单：

这个样例图是显示了三个菜单，但是实际上还可以更多，小程序的底部菜单，是最多不能超过五个。

那么接下来就看看是如何实现的吧。

第一步，寻找合适的图标

在找图标的时候还是费了一番功夫的，毕竟不是一个专业的前端，最后在一篇文章里找到了这个网站（阿里巴巴矢量图标库）：

http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

感觉非常good，于是就在上面下载了几个图片，用来做示例图。

同样的一个图片我们要下载两种颜色，这样才能出现点击的不同效果，就像我下载的这样：

第二步，将图片放在自己程序的路径下

大家可以建立一个images目录，然后把图片改好名字放进去，我的文件目录是这样的：

第三步，添加代码

小程序的底部菜单在官方文档是一个app.json中的一个全局配置属性，详细的介绍可以看这个官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

大家可以直接将下面的代码放到app.json中，注意要在外面还有一个整体的{}

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/menuicon/index.png",
        "iconPath": "images/menuicon/index1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/menuicon/list.png",
        "iconPath": "images/menuicon/list1.png",
        "pagePath": "pages/list/list",
        "text": "列表"
      },
      {
        "selectedIconPath": "images/menuicon/user.png",
        "iconPath": "images/menuicon/user1.png",
        "pagePath": "pages/user/user",
        "text": "个人中心"
      }
    ]
  }

下面是一些详细的属性介绍，大家可以自己看看：

往期的基础学习课程，可以查看我的csdn个人博客小程序学习笔记目录下的内容。