常有开发者在社区提问，何时支持底部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" }
