因为工作需要开发小程序，之前还从来没有接触过，所以今天找时间学习了一下微信小程序的自定义tabbar功能，发现坑好多（我真的会谢）😩😩😩
今天白天在公司抽时间学习微信开放平台的例子实现了一个自定义tabbar的功能，但是我并没有将custom-tab-bar放在pages同级目录下，而是将其放到components文件夹下面，然后在每个tab页面的json文件中注册并在wxml文件中引入使用，然后向注册的tab-bar组件传递当前选中的状态值（即tabbar的下标），一切运行的都很完美。
但是！！！！ 下班到家之后照着公司的写法一模一样的实现了一遍，它报错了！！！！
搞了一晚上才整明白大概是怎么回事，总结一下吧。
当在app.json文件中这样配置：
{
// ...一些配置
"tabbar": {
"custom": true;
// ... 一些其它配置
}
// ... 还有一些其它配置
}
微信小程序编译时好像就会自动去寻找pages同级的目录中的custom-tab-bar这个文件，然后将它注册成全局组件并在每个页面中都使用（我也是猜的），所以当我在家里兴高采烈的按照在公司实现的方式敲着代码（别问为什么在公司都写好的代码还要重新敲，问就是加密了），敲完后就报错了，大概意思就是根目录下找不到custom-tab-bar文件夹。然后把tabbar文件夹提到根目录，还是在每个tabbar页面的wxml中加入tabbar组件并传参，结果就是不生效。不管点击哪个tabbar，选中状态都是默认状态（人麻了）。后来发现当配置了custom: true且custom-tab-bar在根目录时，使用的tabbar是编译时自动给加上的，和页面中引入的tabbar组件没有关系，所以当时怎么传参都没生效。
最后照着官网提供的方式稍作修改，总算是实现了能够使用的自定义tabbar组件。先上官网拉一下示例代码，然后将custom-tab-bar/index.js中的这个方法改成下面这样
switchTab(e) {
const data = e.currentTarget.dataset;
if (data.bulge) {
wx.navigateTo({
url: '/pages/test/test',
})
return;
}
const url = data.path;
wx.switchTab({url});
}
pages中的每个页面注册的还是Page，没有像实例代码中一样注册成Component。注册成Page后只需要将示例代码中的show执行的代码改为onShow中执行就可以了。
这种实现方法没有解决首次进入小程序时切换tabbar会闪烁的问题
为什么白天的写法能运行，晚上一模一样的写法就不行了呢？
看了文档和社区也没找到答案， 我在想会不会是基础库的问题？也可能写法并不是一模一样😅，不知道和那些配置文件有没有关系，我的理解应该是没啥关系的
2022-06-02 是因为在
project.config.json文件中配置了useCompilerPlugins: [ "sass" ]，就会提示根目录下没有custom-tab-bar/index.js文件。
欢迎留言讨论交流😆😆
