浅谈jQuery WeUI框架

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");
      });

 

后续待补充、