【新功能介绍】自定义tabBar功能来了！

常有开发者在社区提问，何时支持底部tabBar自定义编写，而非简单的修改样式。现在，自定义tabBar功能它来了！本期我们邀请到来自支付宝小程序框架团队的元凛，由他来介绍小程序自定义tabBar功能，以及与该功能一起在IDE 3.1.2 beta版上线的两个新配置项：app.usingComponents，entryPagePath。

怎么使用自定义tabBar

元凛：原始的tabBar比较直观、朴素和易用，但不支持位置、样式的调整，只能更换颜色和icon，没办法体现小程序自己的设计理念和特殊应用场景。
过去有开发者会单独起一个首页，然后把tabBar的页面抽成组件在首页里引入，变相实现了自定义tabBar功能。现在，在IDE 3.1.2 beta版，我们开始支持自定义tabBar能力，接入也很简单，一共需要3步：

Step1: 在现有 tabBar 配置基础上新增customize字段。

Step2:约定在代码根目录下添加 tabBar 入口文件。


Step3:编写对应的tabBar 代码，编码规范可查看 自定义组件。该自定义组件将完全接管 tabBar 的渲染及交互，同时，新增 getTabBar 接口可获取自定义 tabBar 组件实例。
customize-tab-bar/index.axml
ustomize-tab-bar/index.js

Component({
  data: {
    selected: 0,
    textColor: "#7A7E83",
    selectedColor: "#2f54eb",
    list: [
      {
        pagePath: "/pages/index/index",
        name: "customize1",
      },
      {
        pagePath: "/pages/index2/index",
        name: "customize2",
      },
    ],
  },
  methods: {
    tap(e) {
      const data = e.target.dataset;
      my.switchTab({
        url: data.value.pagePath,
      });
    },
  },
})

pages/index/index.js

Page({
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
      });
    }
  },
})

这样，就能实现小程序tabBar的自定义，像导航栏中间按钮突出这一类常见的产品需求，也能得到满足。注意，自定义tabBar的使用要求是：
• 基础库 2.7.20 及以上版本。
• 支付宝客户端 10.2.63 及以上版本。
• 小程序开发者工具 3.1.2 及以上版本。
若你的开发版本较低，则显示原始 tabBar样式。

从声明一百次到一次

此外，在IDE3.1.2 Beta版，我们还新增了 app.usingComponents的页面配置。之前，如果小程序使用了自定义组件，那么就需要在页面上定义一下，当小程序页面过多，超过100个，就需要定义100次，比较繁琐。

现在，我们支持了app.usingComponents，在app.json中生命的自定义组件会被认为是全局自定义组件，哪怕你有上百个页面，也只在要在app.json中写一次即可。但要注意该功能声明的组件将要被所有页面和组件依赖，可能会影响性能，且会占用主包大小，建议开启 app.lazyCodeLoading，即代码懒加载模式。

app.json

{
  "usingComponents": {
    "com1": "/components/com1/index",
    "com2": "./components/com2/index"
  }
}

指定默认启动首页

一般情况下，我们会在app.json中的pages里定义好所有页面，并且默认把数组中的第一项代表小程序的初始页面，也就是首页。但在某些场景中，我们需要手动指定某个页面为启动首页。

这时候entryPagePath就派上了用场，通过在app.json里添加entryPagePath，就可以指定默认启动首页。需要注意的是，此特性从基础库 2.7.20，IDE 3.1.2 开始支持。若强依赖此特性，建议设置最低基础库版本号为2.7.20。否则，在低版本的基础库，会因为无法识别正确的首页而导致渲染异常。

{
  "entryPagePath": "pages/index/index"
}