微信小程序，引入WeUI组件库扩展组件库

小程序扩展组件库 | 微信开放文档

微信官方文档给了两种weui引入方式：

通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。
可以通过npm方式下载构建，npm包名为weui-miniprogram

第一步，在app.ison 中加入 useExtendedLib 字段

"useExtendedLib": {
"weui": true
}

第二步，在所需要的页面的 page.json 文件中加入 usingComponents 字段

"mp-dialog": "weui-miniprogram/dialog/dialog",

<mp-dialog title="test" show="{{showBuy}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">

<image src="/images/icon_close.png"

mode="aspectFit" />

</view>

</view>

</view>

</mp-dialog>

---------------------------------------------------------------------------------------------------------------------------------

WeUI组I组件库

第一步进入你的小程序根目录下（带app.json的目录）初始化npm 这步的意思是让当前文件夹以node_modules模块化的方式引入组件，会询问你项目相关信息，一直回车就行。

npm init

上面执行完，会在根目录下生成node_modules 文件夹，package.json，pack-lock.json。

第二部 npm 安装weui

npm i weui-miniprogram -S --production

第三步在微信开发工具中构建npm

操作步骤：点微信开发者工具的工具-构建npm，如果上面都执行成功的话，这步会在根目录下生成一个叫miniprogram_npm的文件夹

注意！！！我们引入的组件都是从miniprogram_npm中引入的。

第四步在你微信开发者工具中的详情-本地设置中勾选中使用npm模块

第五步在根目录下的app.wxss中引入下面代码

@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

//index.json
{"usingComponents": {"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"}
}
//wxml
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"><view>test content</view>
</mp-dialog>

扩展组件库

第六步使用npm单独安装扩展组件！！！

这步要注意，扩展组件需要单独安装，上面全局安装的weui只会安装基础组件

这个地方官网并没有给出其他组件怎么安装的，只是给举了个video-swiper的例子。

npm i @miniprogram-component-plus/{{扩展组件名}} --save ，用tabs举例：

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

第七步执行上面第3步，用开发者工具构建npm

第八步在需要引入tabs的组件的json里配置上tabs

这里有个坑！！！ 注意key的tabs要加上mp- ，后面的value直接以miniprogram_npm为根目录就可以，可以去文件夹下看包具体叫什么名字

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

第九步使用官网给的代码例子使用就可以了，但是自己运行的样式还是跟示例展示的不一样，需要自己手动调整。

tabs | 微信开放文档