WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计。而jQuery WeUI是在其基础上的加强版本，专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。

jQuery WeUI 的组件分两部分

基础组件：weui官方的组件，使用了weui官方的css

拓展组件：jquery weui 专属的组件

---

jQuery WeUI 提供了很多的微信开发用的组件，其中不乏有项目案例

不过既然有基础，我便不强调基础的一些东西，主要讲一下他的拓展组件中的东西，

一、日历

日历组件需要初始化才能使用，最简单的方式是通过一下JS代码来初始化，绑定到一个input元素上：（注：当然，也只能绑定在input上）

$("#my-input").calendar();

然后查看了他的api

描述了很多东西，我们从中挑选方法书写。

    $("#my-input").calendar({multiple: true,  //设置多选dateFormat: "yyyy-mm-dd",//时间样式minDate: "2018-09-27",//时间最小值maxDate: "2018-09-29",//时间最大值toolbarTemplate: '<div class="toolbar">' + //这里头部的样式//*** 包围的是新增的代码'<div>' +'<span class="weui-footer__text noTime">选择时间</span>' +'</div>' +'<div class="toolbar-inner">' +'{{yearPicker}}' +'{{monthPicker}}' +'</div>' +'</div>',formatValue: function (p, values) { //值,这是时间戳，除去初始选中的，后面点击都是时间戳console.log(values);console.log("---------------------");},onChange: function (p, values, displayValues) {  //只要选中便调用console.log(values);console.log("==================");values.forEach(function (v, index, array) {v = "2018-01-01";});},onDayClick: function (p, dayContainer, year, month, day) { //只要点击便调用console.log(year);console.log("````````````````````````````````````");}});

 

二、Popup

一个很有趣的东西

$("#about").popup();

 

      $(document).on("open", ".weui-popup-modal", function() {console.log("open popup");}).on("close", ".weui-popup-modal", function() {console.log("close popup");});

 

后续待补充、