最详细的【微信小程序+阿里云Web服务】开发部署指引（十三）：小程序底部菜单

---

前言

案例的运行效果，可以扫码观看：

本篇文章，我们来介绍一下怎样实现底部菜单效果。

一、素材准备

案例在小程序底部设计了3个菜单按钮进行页面切换，需要相应准备3套图标，每套有2张，分别是选中和未选中。

二、代码实现

这个功能，无需太多自己亲手编写的代码。在app.json中，添加“tabBar”节，定义“list”内容为对应的3个菜单页面目录（index，setting，feedback），及选中和非选中状态下的显示图片文件。

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/index1.png",
        "iconPath": "images/index2.png",
        "pagePath": "pages/index/index"
      },
      {
        "selectedIconPath": "images/setting1.png",
        "iconPath": "images/setting2.png",
        "pagePath": "pages/setting/setting"
      },
      {
        "selectedIconPath": "images/feedback1.png",
        "iconPath": "images/feedback2.png",
        "pagePath": "pages/feedback/feedback"
      }
    ]
  }

编写完成，程序即可实现点击菜单按钮切换页面，且更新菜单图标的效果。

---

专题文章链接

最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
最详细的【微信小程序+阿里云Web服务】开发部署指引（二）：注册微信小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引（三）：开通阿里云主机
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
最详细的【微信小程序+阿里云Web服务】开发部署指引（五）：实现服务端调用逻辑
最详细的【微信小程序+阿里云Web服务】开发部署指引（六）：开发微信小程序的准备
最详细的【微信小程序+阿里云Web服务】开发部署指引（七）：小程序项目中的文件资源
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（九）：开发小程序卡片浏览功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十）：实现发音朗读
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十三）：小程序底部菜单
最详细的【微信小程序+阿里云Web服务】开发部署指引（十四）：发布小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引（十五）：结语