微信开发者工具创建的小程序的目录结构无法很好地使用npm的“自定义组件”。想要漂亮地使用“自定义组件”，就得自己修改项目结构。

注意：这里指的是wxml中使用的“自定义组件”，不是ts或js中可以调用的纯js

问题现象分析如下：

微信开发者工具创建的小程序项目结构如下：

|--miniprogram | |--pages | |--app.js | |--app.wxss | |--app.json |--typings | |--wx | |--index.d.ts | |--lib.wa.es6.d.ts |--package.json |--project.config.js |--ts.json

这样的结构，小程序的根目录就在那里，导致.json不在小程序的根目录下，即该目录下的第三方组件不在小程序的根目录下程序，违反了npm支持中的位置要求：npm支持-使用npm包

此时如果是app.json或者.json，无论如何都不能引用第三方组件（注意微信“自定义组件”是第三方开发的，比如vant-，而纯js是可以的）

喜欢：

无论图中的“.../”如何修改，控制台都会报类似的错误：

问题原因：

经过测试，导致上述问题的原因有两个：

app.json 或 .json（以及任何页面配置文件）中的“”不能引用该目录中的组件； “”只能引用小程序根目录（本例中）及其子目录中的组件。

通过以下步骤，您可以验证：

将下面的vant-目录复制到该目录下，将“”改为其相对位置，该组件就可用了：

|--miniprogram | |--pages | |--app.js | |--app.wxss | |--app.json | |--want-weapp |--typings | |--wx | |--index.d.ts

| |--lib.wa.es6.d.ts |--package.json |--project.config.js |--ts.json

成功使用自定义组件的效果：

2. 如果vant-放在外部目录中，仍然不会被引用。

不过，痴迷于代码的同学一定不满足于手动将所有依赖复制到目录的弱智操作方式吧？

解决方案：

npm安装的组件如何在小程序中直接引用？

事实上，答案就在这篇npm支持文章中，但它相当模糊，没有解释清楚细节。综上所述，就是对模板项目进行两步改造，解决上面提到的两个问题：

将小程序根目录移至.json同级；使用“npm ”功能（将目录的组件构建到目录中）进行构建，然后直接引用组件来使用。

步骤如下：

第一步：将该目录下的所有文件移动到根目录（与.json同级）：

|--pages |--app.js |--app.wxss |--app.json |--want-weapp |--typings | |--wx | |--index.d.ts | |--lib.wa.es6.d.ts |--package.json |--project.config.js |--ts.json

步骤2：修改..json并删除以下行：

"miniprogramRoot": "miniprogram/",

或者修改为

"miniprogramRoot": "./",

步骤3：修改.json中的/以确保你的ts代码被编译：

"include": [ "./miniprogram/**/*.ts" ], "exclude": [ "node_modules", "miniprogram_dist", "miniprogram_npm", "**/*.spec.ts", "typings/**/*.d.ts" ]

更改为

"include": [ "./**/*.ts" ], "exclude": [ "node_modules", "miniprogram_dist", "miniprogram_npm", "**/*.spec.ts", "typings/**/*.d.ts" ]

描述：目录下移一级，同时删除目录。

第四步：使用微信开发者工具的“工具-构建npm”功能将组件构建到目录中

第五步：在app.json（或者页面的json配置）中引入组件

"usingComponents": { "van-button": "vant-weapp/button/index" }

注意：这里使用相对目录就足够了，不需要相对于app.json文件。

后记：

微信开发者工具创建的小程序应该将小程序的根目录与节点环境隔离，并提供清晰的目录结构。然而，其对 npm 集成和“自定义组件”的支持较差，这表明微信团队正在致力于“自定义组件”和 npm 支持。这种支持仍处于起步阶段。团队之间的整合还没有到位，文档也不够彻底。当然，这需要时间来改善。

希望微信小程序团队能够通过以下几点快速原生支持+npm+第三方自定义组件：

1、调整微信开发者工具小程序模板的项目结构，或者在当前项目结构下反过来支持使用第三方npm自定义组件；

2.完善npm支持相关的文档。如果自己改进不了，其实可以用wiki的方式来鼓励开发者一起改进。