微信小程序weui的引入及使用

---

一、微信小程序引入WeUI组件库并使用组件

1. 通过useExtendedLib扩展库的方式引入（推荐使用）

提示：这种方式引入的组件将不计入代码包的大小

1. 微信基础库在2.2.1 以上（包含）可以直接在app.json 里面配置就可以

//  app.json
{
    
    
  "useExtendedLib": {
    
    
    "kbone": true,
    "weui": true
  }
}

2. 在使用组件的页面的 json 文件加入 usingComponents 配置字段

{
    
    
  "usingComponents": {
    
    
    "mp-badge": "weui-miniprogram/badge/badge"
  }
}

3. 引用

<mp-badge content="123"></mp-badge>

2. 通过npm的方式引入（weui-miniprogram）

1. 进入小程序项目根目录，执行命令 npm init 创建 package.json 文件
   注意：一开始是没有的 package.json 文件的
2. 在小程序 package.json 所在的目录中执行命令安装 npm 包，安装命令：
   注意：此处要求参与构建 npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内。

npm install weui-miniprogram -S

3. 点击开发者工具中的菜单栏：工具 --> 构建 npm
4. 点击开发者工具中的右侧菜单栏：详情 --> 本地设置，勾选“使用 npm 模块”选项
5. WeUI组件的使用

// 1.首先要在 app.wxss 里面引入 weui.wxss
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

// 2.在使用组件的页面的 json 文件加入 usingComponents 配置字段，例如弹窗组件
{
    
    
  "usingComponents": {
    
    
    "mp-dialog": "../../miniprogram_npm/weui-miniprogram/dialog/dialog"
    // 注意：路径与组件包在项目的位置有关
  }
}

// 3.在对应页面的 wxml 中直接使用该组件
<mp-dialog title="test" show="{
     
     {true}}" bindbuttontap="tapDialogButton" buttons="{
     
     {[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

---

二、微信小程序weui的使用

1. 在线浏览weui组件库效果

浏览地址：https://weui.io/

2. 下载weui

进入GitHub下载，下载地址：https://github.com/Tencent/weui-wxss
解压后 \weui-wxss-master\dist\style\weui.wxss就是我们所需要的weui库
注意：从GitHub上下载的weui文件夹里example文件是组件代码
app.css中引入weui.wxss

@import "/styles/weui.wxss";