微信小程序 WeUI 之拓展组件tabs的引用。

古城微笑少年丶 2022-12-02 01:08 1143阅读 0赞

## 微信小程序 WeUI 使用拓展组件tabs方法 ##

**注意：不能使用 引入[useExtendedLib 扩展库][useExtendedLib] 的方式，而是用npm构建的方式。**

*  第一步：在项目根目录下打开终端。（我的是miniprogram）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xfamRfZ3VsdWx1_size_16_color_FFFFFF_t_70_pic_center]

*  第二步：终端里输入：

npm i @miniprogram-component-plus/tabs --save

*  第三步：点击微信开发者工具的工具中，找到构建npm

完成后在其目录下会生成一个`miniprogram_npm\@miniprogram-component-plus\tabs`目录。

![在这里插入图片描述][20200828210531714.png_pic_center]

*  第四步：在需要引用tabs的页面文件夹下打开.json文件，输入以下文件。  
    **注意：tabs文件下的页面是`index`而不是`tabs`,在引入时要注意，否则会报错。**

{
        
      "usingComponents": {
        
        "mp-tabs": "/miniprogram_npm/@miniprogram-component-plus/tabs/index"
      },
    }

这样就可以在页面中使用组件了。

拓展：也可以采用`自定义组件`的方式，将这个`tabs`文件夹放置`components`里面来使用，参考官方文档如何[自定义组件][Link 1]。

[useExtendedLib]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xfamRfZ3VsdWx1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ca09480403944ecf83fe3ae71f6f81ea.png
[20200828210531714.png_pic_center]: /images/20221123/85d37ab96cde4c319c9e435154cd5671.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/