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

後續待補充、