微信小程序引入扩展组件的踩坑记录
最近在微信小程序时，遇到了不少关于引入扩展组件的坑，这里分享一下我的经验，希望能帮到大家。
微信官方文档的两种引入方式
微信官方文档提供了两种引入扩展组件的方式：通过扩展库引入和通过npm安装。其中，扩展库引入的组件不会计入代码包大小，但需要注意，如果使用扩展组件，必须使用特定的安装方式。
以选项卡组件为例的详细步骤
第一步：初始化项目
首先，进入你的小程序根目录（带.的目录），执行初始化命令。这一步的目的是让当前文件夹以模块化的方式引入组件。系统会询问你项目相关信息，直接按回车即可。
执行完这一步后，根目录下会生成一些新的文件夹和文件，比如node_modules、package.json等。
第二步：安装依赖
接下来，使用npm安装所需的依赖。这一步非常重要，确保你使用的是正确的命令。
第三步：在微信者工具中构建
打开微信者工具，点击工具-构建。如果前面的步骤都执行成功，这一步会在根目录下生成一个名为miniprogram_npm的文件夹。
注意：我们引入的组件都是从miniprogram_npm中引入的。
第四步：启用模块
在微信者工具中，进入详情-本地设置，勾选使用npm模块。这一步确保小程序能够正确识别和使用npm安装的组件。
第五步：在app.json中引入组件
在根目录下的app.json文件中，添加需要引入的组件代码。这一步是告诉小程序哪些组件需要被加载。
第六步：单独安装扩展组件
特别注意：扩展组件需要单独安装。全局安装只会安装基础组件，而扩展组件需要额外安装。官方文档并没有详细说明其他组件的安装方式，这里我总结了一个命令：
npm install @miniprogram-component/{{扩展组件名}} --save
以选项卡组件为例，安装时可能会遇到从淘宝镜像拉取资源的情况，我试了三次才成功。
第七步：再次构建
执行完第六步后，再次回到微信者工具，点击工具-构建，确保所有组件都被正确引入。
第八步：配置组件路径
在需要引入组件的页面中，配置组件的路径。这里有个坑：路径中要加上miniprogram_npm，后面的路径直接以miniprogram_npm为根目录即可。你可以去文件夹下查看包的具体名称。
第九步：使用组件并调整样式
最后，使用官方提供的代码示例来使用组件。不过，实际运行时，样式可能会与示例展示的不一致，这时需要手动调整样式。
总结
通过以上步骤，你应该能够顺利引入微信小程序的扩展组件。如果这篇文章帮到了你，麻烦点个赞支持一下！
