小程序配置tabBar

1. 配置信息

- 在app.json中的tabBar项内指定custom字段，同时其余tabBar相关配置也补充完整。
- 要所有tab页的json里声明usingComponents项，或可在app.json这里全局开启

示例代码：app.json
{
  "debug": true,
  "darkmode": false,
  "pages": ["pages/main/Home/index", "pages/main/Mall/index", "pages/main/MyAccount/index"],
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/main/Home/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/main/MyAccount/index",
        "text": "我的"
      },
      {
        "pagePath": "pages/main/Mall/index",
        "text": "商城"
      }
    ]
  },
}

2. 添加tabBar代码文件

在代码根目录下，建立custome-tab-bar文件夹，添加入口文件如下：
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

注意：路由文件 routes.ts

`export const ROUTE_MALL = 'main/Mall';
 export const pageRoutes: Record<string, string> = {
 [ROUTE_HOME]: '/pages/main/Home/index',
 [ROUTE_MALL]: '/pages/main/Mall/index'
 };
export const tabBarPageRoutes: string[] = [
  ROUTE_HOME,
  ROUTE_MALL,
  ROUTE_MY_ACCOUNT,
];`

3. 编写tabBar代码

- 用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。
- 另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

（每一个对应文件都可参考小程序开发者工具里的demo，这里主要提一下设置tabBar顺序的方法-通过getTabBar接口～）

3.1.为tab页面编写setTabBarIndex()

````
示例代码：utils/tab-bar.ts
    export const setTabBarIndex = (context: Context, index: number): void => {
      context.getTabBar().setData({
        selected: index,
      });
    };
    type Context =
    | WechatMiniprogram.Component.InstanceMethods<PageDataOption>
    | WechatMiniprogram.Component.InstanceMethods<ComponentDataOption>;
```` 
（由于项目中使用了TypeScript，这里贴上的相关的代码依赖只属于本项目且没有继续解释清楚）
 
 3.2.注意各tab的index.ts文件中设置其在tabBar的顺序，比如
     ````
    onShow() {
      setTabBarIndex(this, 1);
    },
    ````

参考资料： developers.weixin.qq.com/miniprogram…