WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一；
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素；
一、扩展
操作文档手册：
weui https://github.com/Tencent/weui/wiki
weui.js https://github.com/Tencent/weui.js/blob/master/docs/README.md
weui也提供了一套视觉标准供参考 weui-design ;
另外有为小程序(weui-wxss)、企业微信 扩展；
针对于微信内页面也有轻量级JS封装 weui.js ，操作DOM更容易；但不适用于微信小程序，因为不支持DOM操作；
PS：让小程序支持组件化开发可以用 wepy
它类似于VUE的开发方式，支持自定义组件、props传值、插槽slot等等。
二、vue结合
同VUE使用时 同样需要用脚手架安装依赖包，import引入组件/main.js中）
1.安装依赖包
npm install weui.js weui -S
2.main.js中 引入组件和样式，注入到VUE原型链中
import Vue from 'vue'
import weui from 'weui.js'
import 'weui'
Vue.prototype.$weui = weui
3.项目中使用组件（例如dialog）
this.$weui.dialog({
title: '提示',
content: '是否领取礼品' ,
buttons: [{
label: '取消',
type: 'default',
onClick: () => {
alert('您已取消领取礼品！')
}
}, {
label: '确定',
type: 'primary',
onClick: () => {
alert('您已确定领取礼品！')
}
}]
})
三、weui
获取方式：
| 来源 | 地址 |
| 微信官方 | //res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css |
| BootCdn | //cdn.bootcss.com/weui/0.4.3/style/weui.css |
| cdnjs | //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css |
npm方式：npm install --save weui
github--release中直接下载版本包
使用说明:
- ActionSheet 用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
<div id="actionSheet_wrap">
<div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
<div class="weui-actionsheet" id="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>
</div>
</div> <div class="weui-skin_android" id="weui-android-actionsheet" style="display: none">
<div class="weui-mask"></div>
<div class="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
<div class="weui-actionsheet__cell">示例菜单</div>
</div>
</div>
</div>
</div>
- button按钮
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
- 剩余的可以看下操作文档，一看就会~~~~