【微信小程序】之如何创建底部菜单？tabBar、mp-tabbar

方法一：通过app.json配置底部菜单（常用）

 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象全局配置 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

  "tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#F7F7F7","list": [{"pagePath": "pages/home/home","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "首页"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "内页1"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "内页2"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "我的"}]},

方法二：通过小程序扩展组件mp-tabbar创建底部菜单

app.json根节点加入

 "useExtendedLib": {"weui": true}, 

 需要使用组件的页面json文件里面加入

  "usingComponents": {"mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"}

  需要使用组件的页面html文件里面加入

<mp-tabbar style="position:fixed;width:100%;bottom:0;" list="{
   {list}}" bindchange="tabChange"></mp-tabbar>

  需要使用组件的页面js文件里面加入 

  data: {list: [{text: '栏目1',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",badge: '8'},{text: '栏目2',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",badge: 'new'},{text: '栏目3',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",dot: true},{text: '栏目4',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",}]},tabChange(e:any) {console.log('tab change', e)},