微信小程序警告 Component is not found in path “custom-tab-bar/index”

问题描述

微信小程序开发中使用自定义导航栏（底部 tabbar）时，控制台警告提示 Component is not found in path “custom-tab-bar/index” 。虽然这个警告不影响开发，但是有精神洁癖的程序员还是要搞掉这个问题。

问题分析

首先官方文档没有说明这个是说明这是什么问题。经过查找资料和尝试发现，这个问题是因为自定义导航栏需命名为custom-tab-bar，且必须位于 pages 同一级别的目录，另外组件也需命名为 index，也就是说小程序的目录结构必须是这样子的：

your project directory
├─ app.js
├─ app.json
├─ ...
├─ custom-tab-bar
│  ├─ idnex.js
│  ├─ index.json
│  ├─ index.wxml
│  └─ index.wxss
└─ pages

找到问题原因之后就准备解决问题，因为作者同时开发了原生和 uni-app 两个项目，所以把两种解决方法都在这里写一下。

原生开发

在原生开发中使用自定义的 tabbar 需要在 app.json 中设置 tabbar.custom 为 true。

// app.json

{
  "tabBar": {
      "custom": true,
      // ...
  }
}

解决方案

• tabbar 组件放到 custom-tab-bar 目录下，并命名为 index
• tabbar 组件放到其他文件夹里，custom-tab-bar 目录下放一个空文件 index

uni-app开发

uni-app 微信小程序开发使用自定义的tabbar 需要在 pages.json 中设置 tabbar.custom 为 true。

// pages.json

{
	"tabBar": {
        "custom": true,
    }
}

解决方案

uni-app 项目在 pages 同级目录下创建 custom-tab-bar 目录，并在该目录下创建 index.vue 开发 tabbar 组件。