微信小程序实现原生 tabbar 和自定义 tabbar

原生 tabbar：

如果小程序是一个多 tab 应用，可以通过 app.json 中的 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。

多 tab 应用：客户端窗口的底部或顶部有 tab 栏可以切换页面。

// app.json
{
  "tabBar": {
    "list": [ // tab 的列表，最少 2 个、最多 5 个 tab
    	{
	      "pagePath": "pages/index/index",  // 页面路径，必须在 pages 中先定义
	      "text": "首页", // tab 上按钮文字
	      "iconPath": "../../images/index.png", // 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
	      "selectedIconPath": "../../images/index-selected.png", // 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
	    }, 
	    {
	      "pagePath": "pages/logs/logs",
	      "text": "日志",
	      "iconPath": "../../images/log.png", 
	      "selectedIconPath": "../../images/log-selected.png",
   		},
    ],
    "color": "#333333", // tab 上的文字默认颜色，仅支持十六进制颜色
    "selectedColor": "#FF4A2F", // tab 上的文字选中时的颜色，仅支持十六进制颜色
    "backgroundColor": "#FFFFFF", // tab 的背景色，仅支持十六进制颜色
    "borderStyle": "black", // tabbar 上边框的颜色， 仅支持 black / white
    "position": "bottom", // tabBar 的位置，仅支持 bottom / top
  },
}

自定义 tabbar：

1. 配置信息：在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

   为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

   {
     "tabBar": {
       "custom": true,
       "color": "#333333",
       "selectedColor": "#FF4A2F",
       "backgroundColor": "#FFFFFF",
       "list": [{
         "pagePath": "page/index/index",
         "text": "首页"
       }, {
         "pagePath": "page/log/log",
         "text": "日志"
       }]
     },
     "usingComponents": {}
   }
   

2. 添加 tabBar 代码文件，编写 tabBar 代码：需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染，推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。

   与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。
   每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。
   如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

3. 在需要的页面引入 tabbar 组件即可。