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

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

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

1. 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
2. 可以通过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}}">

    <view class="popup">

            <view catch:tap="closePopup" class="close">

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

                mode="aspectFit" />

            </view>

        <view class="number"  >

            <view>购买数量</view>

            <view class="counter">

                <image catch:tap="cut" class="number-icon" src="/images/icon_decrease_22_gray@2x.png" />

                <input class="count" disabled="{{true}}" type="number" value="{{number}}" />

                <image catch:tap="add" class="number-icon" src="/images/icon_add_22_gray@2x.png" />

            </view>

        </view>

        <view class="popup_btn">

            <button   bindtap='toBuy'  plain="true">下单</button>

        </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 | 微信开放文档