实现底部导航栏

先上干货 –
在小程序开发工具中自动生成的app.json文件中添加：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/user/userInfo"
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/首页.png",
        "iconPath": "images/首页.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/消息.png",
        "iconPath": "images/消息.png",
        "pagePath": "pages/logs/logs",
        "text": "消息"
      },
      {
        "selectedIconPath": "images/购物车.png",
        "iconPath": "images/购物车.png",
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "selectedIconPath": "images/我的.png",
        "iconPath": "images/我的.png",
        "pagePath": "pages/user/userInfo",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

这里要注意了pagePath这个绝对路径需要在pages中添加进去
展示目录结构：

展示效果图：

总结：当前实现方案是参考了官方文档实现https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar