有些按钮，评论区，以及一些UI样式，全部从0开发会很繁琐，并且美观程度不高，所以出现了集成起来的组件库，可以方便调用其中的一些样式组件。

WeUI组件库

是微信官方的组件库:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

图标库

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html
可以直接用代码调用图标，不需要先导入图标。

表单库

继承了很多表单，可以直接调用，不需要从头开发。

其他的库直接看官方文档。

Vant Weapp组件库

官方:https://vant-contrib.gitee.io/vant-weapp/#/intro
美观度，丰富程度比官方更多，更美观，文档非常全面。

安装Vant Weapp到项目中

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#an-zhuang

安装成功之后项目中会出现下图的目录:

调用组件库

可以直接在app.json中引入对应的组件库：

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

当用到什么库，都需要先在json中引入。

接着看文档调用标签就可以。

复杂组件的调用

有些组件需要结合事件来使用

上拉菜单

点击一个按钮，出现一个上拉菜单:

wxml：

  <van-button bindtap="onTap">选择{{selected_name}}</van-button>
  <van-action-sheet
  show="{{ show }}"
  actions="{{ actions }}"
  bind:close="onClose"
  bind:select="onSelect"
/>

js:

  data: {
    show: false,
    actions: [
      {
        name: '张三',
      },
      {
        name: '李四',
      },
      {
        name: '王二麻子',
        subname: '描述信息',
        openType: 'share',
      },
    ],
    selected_name:""
  },
  onTap(){
    this.setData({show:true})
  },

  onClose() {
    this.setData({ show: false });
  },

  onSelect(event) {
    console.log(event.detail);
    this.setData({selected_name : event.detail.name})
  },