微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。

微信小程序的UI组件库有很多，可以参考下面这个内容：

https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13

       但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组件库，就很突出了，这是一套基于样式库weui-wxss (opens new window)开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

weUI组件库的引入与使用

一：引入weUI组件库到项目中

你的微信小程序项目中，想要引入weUI组件库，非常简单，网上有很多什么粘贴wxss文件，再import 巴拉巴拉的，太麻烦了

其实你只需要在小程序的【app.json文件】中，粘贴几行代码就行了。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  /*
  注意：json文件中不能有注释，这里只是方便说明
  粘贴下面这几行代码，就表示引入weUI组件库了
  引入weUI框架，就可以直接在各个页面使用引入组件的形式来导入weui框架的功能使用
  而且，通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小
  */
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}

现在，你就能在项目里使用weUI组件库了，接下来将说明如何在页面中引入需要使用的weUI组件  

二：页面引入所需weUI组件

要在对应的页面引入组件，你得先去看看weUI组件库的官网文档，因为里面有组件的字段属性，虽然没有很明确的使用指引，但是对后续的使用仍有一定的帮助：

https://wechat-miniprogram.github.io/weui/docs/quickstart.html#%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6

举例：此时我需要在index页面中使用一个对话框，那么，

1.在index.json中引入对话框组件

//index.json文件
{
  "usingComponents": {
// 引入weUI的dialog对话框组件到这个页面
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  },
  "navigationBarTitleText": "weUI学习"
}

2.在index.wxml中使用这个mp-dialog标签

 

  
    Dialog
    对话框
  
  
    
      确认取消按钮


      只有确认按钮

    
  
  
    test content
  
  
    test content1
  

3.在index.js文件中配置wxml中用到的数据和方法

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    dialogShow: false,
    showOneButtonDialog: false,
    buttons: [{ text: '取消' }, { text: '确定' }],
    oneButton: [{ text: '确定' }]
  },
//点击按钮后显示对话框
  openConfirm: function () {
    this.setData({
      dialogShow: true
    })
  },
  tapDialogButton (e) {
    this.setData({
      dialogShow: false,
      showOneButtonDialog: false
    })
  },
  tapOneDialogButton (e) {
    this.setData({
      showOneButtonDialog: true
    })
  }
})

4.页面显示的效果

  看了上面的演示效果，你应该就知道这样引用和复制代码是完全可以使用weUI的对吧，但是估计你正皱褶眉头，心里想着这些wxml代码那里来的？样式文件那里来的？js代码那里来的？ 满脸的黑人问号，不要着急，上面只是通过两个步骤来说明，要在项目中使用weUI是多么的快捷方便。

微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。

微信小程序的UI组件库有很多，可以参考下面这个内容：

https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13

       但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组件库，就很突出了，这是一套基于样式库weui-wxss (opens new window)开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

weUI组件库的引入与使用

一：引入weUI组件库到项目中

你的微信小程序项目中，想要引入weUI组件库，非常简单，网上有很多什么粘贴wxss文件，再import 巴拉巴拉的，太麻烦了

其实你只需要在小程序的【app.json文件】中，粘贴几行代码就行了。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  /*
  注意：json文件中不能有注释，这里只是方便说明
  粘贴下面这几行代码，就表示引入weUI组件库了
  引入weUI框架，就可以直接在各个页面使用引入组件的形式来导入weui框架的功能使用
  而且，通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小
  */
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}

现在，你就能在项目里使用weUI组件库了，接下来将说明如何在页面中引入需要使用的weUI组件  

二：页面引入所需weUI组件

要在对应的页面引入组件，你得先去看看weUI组件库的官网文档，因为里面有组件的字段属性，虽然没有很明确的使用指引，但是对后续的使用仍有一定的帮助：

https://wechat-miniprogram.github.io/weui/docs/quickstart.html#%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6

举例：此时我需要在index页面中使用一个对话框，那么，

1.在index.json中引入对话框组件

//index.json文件
{
  "usingComponents": {
// 引入weUI的dialog对话框组件到这个页面
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  },
  "navigationBarTitleText": "weUI学习"
}

2.在index.wxml中使用这个mp-dialog标签

 
<view class="page" data-weui-theme="{{theme}}">
  <view class="page__hd">
    <view class="page__title">Dialog</view>
    <view class="page__desc">对话框</view>
  </view>
  <view class="page__bd">
    <view class="weui-btn-area">
      <button class="weui-btn" type="default" bindtap="openConfirm">确认取消按钮</button>
      <button class="weui-btn" type="default" bindtap="tapOneDialogButton">只有确认按钮</button>
    </view>
  </view>
  <mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
  </mp-dialog>
  <mp-dialog title="test1" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">
    <view>test content1</view>
  </mp-dialog>
</view>

3.在index.js文件中配置wxml中用到的数据和方法

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    dialogShow: false,
    showOneButtonDialog: false,
    buttons: [{ text: '取消' }, { text: '确定' }],
    oneButton: [{ text: '确定' }]
  },
//点击按钮后显示对话框
  openConfirm: function () {
    this.setData({
      dialogShow: true
    })
  },
  tapDialogButton (e) {
    this.setData({
      dialogShow: false,
      showOneButtonDialog: false
    })
  },
  tapOneDialogButton (e) {
    this.setData({
      showOneButtonDialog: true
    })
  }
})

4.页面显示的效果

  看了上面的演示效果，你应该就知道这样引用和复制代码是完全可以使用weUI的对吧，但是估计你正皱褶眉头，心里想着这些wxml代码那里来的？样式文件那里来的？js代码那里来的？ 满脸的黑人问号，不要着急，上面只是通过两个步骤来说明，要在项目中使用weUI是多么的快捷方便。