&emsp;&emsp;**当前方法也是在网上找的，找不到原作者了，如有侵权请告知**

#### 1、表单验证js（**WxValidate**）

```js
/**
 * 表单验证
 *
 * @param {Object} rules 验证字段的规则
 * @param {Object} messages 验证字段的提示信息
 *
 */
class WxValidate {
    constructor(rules = {}, messages = {}) {
        Object.assign(this, {
            data: {},
            rules,
            messages,
        })
        this.__init()
    }

    /**
     * __init
     */
    __init() {
        this.__initMethods()
        this.__initDefaults()
        this.__initData()
    }

    /**
     * 初始化数据
     */
    __initData() {
        this.form = {}
        this.errorList = []
    }

    /**
     * 初始化默认提示信息
     */
    __initDefaults() {
        this.defaults = {
            messages: {//默认提示，需要验证且没有书写提示内容时
                required: '这是必填字段。',
                email: '请输入有效的电子邮件地址。',
                tel: '请输入11位的手机号码。',
                url: '请输入有效的网址。',
                date: '请输入有效的日期。',
                dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。',
                number: '请输入有效的数字。',
                digits: '只能输入数字。',
                idcard: '请输入18位的有效身份证。',
                equalTo: this.formatTpl('输入值必须和 {0} 相同。'),
                contains: this.formatTpl('输入值必须包含 {0}。'),
                minlength: this.formatTpl('最少要输入 {0} 个字符。'),
                maxlength: this.formatTpl('最多可以输入 {0} 个字符。'),
                rangelength: this.formatTpl('请输入长度在 {0} 到 {1} 之间的字符。'),
                min: this.formatTpl('请输入不小于 {0} 的数值。'),
                max: this.formatTpl('请输入不大于 {0} 的数值。'),
                range: this.formatTpl('请输入范围在 {0} 到 {1} 之间的数值。'),
            }
        }
    }

    /**
     * 初始化默认验证方法
     */
    __initMethods() {
        const that = this
        that.methods = {
            /**
             * 验证必填元素
             */
            required(value, param) {
                if (!that.depend(param)) {
                    return 'dependency-mismatch'
                } else if (typeof value === 'number') {
                    value = value.toString()
                } else if (typeof value === 'boolean') {
                    return !0
                }

                return value.length > 0
            },
            /**
             * 验证电子邮箱格式
             */
            email(value) {
                return that.optional(value) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value)
            },
            /**
             * 验证手机格式
             */
            tel(value) {
                return that.optional(value) || /^1[34578]\d{9}$/.test(value)
            },
            /**
             * 验证URL格式
             */
            url(value) {
                return that.optional(value) || /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value)
            },
            /**
             * 验证日期格式
             */
            date(value) {
                return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())
            },
            /**
             * 验证ISO类型的日期格式
             */
            dateISO(value) {
                return that.optional(value) || /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
            },
            /**
             * 验证十进制数字
             */
            number(value) {
                return that.optional(value) || /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
            },
            /**
             * 验证整数
             */
            digits(value) {
                return that.optional(value) || /^\d+$/.test(value)
            },
            /**
             * 验证身份证号码
             */
            idcard(value) {
                return that.optional(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
            },
            /**
             * 验证两个输入框的内容是否相同
             */
            equalTo(value, param) {
                return that.optional(value) || value === that.data[param]
            },
            /**
             * 验证是否包含某个值
             */
            contains(value, param) {
                return that.optional(value) || value.indexOf(param) >= 0
            },
            /**
             * 验证最小长度
             */
            minlength(value, param) {
                return that.optional(value) || value.length >= param
            },
            /**
             * 验证最大长度
             */
            maxlength(value, param) {
                return that.optional(value) || value.length <= param
            },
            /**
             * 验证一个长度范围[min, max]
             */
            rangelength(value, param) {
                return that.optional(value) || (value.length >= param[0] && value.length <= param[1])
            },
            /**
             * 验证最小值
             */
            min(value, param) {
                return that.optional(value) || value >= param
            },
            /**
             * 验证最大值
             */
            max(value, param) {
                return that.optional(value) || value <= param
            },
            /**
             * 验证一个值范围[min, max]
             */
            range(value, param) {
                return that.optional(value) || (value >= param[0] && value <= param[1])
            },
        }
    }

    /**
     * 添加自定义验证方法
     * @param {String} name 方法名
     * @param {Function} method 函数体，接收两个参数(value, param)，value表示元素的值，param表示参数
     * @param {String} message 提示信息
     */
    addMethod(name, method, message) {
        this.methods[name] = method
        this.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]
    }

    /**
     * 判断验证方法是否存在
     */
    isValidMethod(value) {
        let methods = []
        for (let method in this.methods) {
            if (method && typeof this.methods[method] === 'function') {
                methods.push(method)
            }
        }
        return methods.indexOf(value) !== -1
    }

    /**
     * 格式化提示信息模板
     */
    formatTpl(source, params) {
        const that = this
        if (arguments.length === 1) {
            return function() {
                let args = Array.from(arguments)
                args.unshift(source)
                return that.formatTpl.apply(this, args)
            }
        }
        if (params === undefined) {
            return source
        }
        if (arguments.length > 2 && params.constructor !== Array) {
            params = Array.from(arguments).slice(1)
        }
        if (params.constructor !== Array) {
            params = [params]
        }
        params.forEach(function(n, i) {
            source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function() {
                return n
            })
        })
        return source
    }

    /**
     * 判断规则依赖是否存在
     */
    depend(param) {
        switch (typeof param) {
            case 'boolean':
                param = param
                break
            case 'string':
                param = !!param.length
                break
            case 'function':
                param = param()
            default:
                param = !0
        }
        return param
    }

    /**
     * 判断输入值是否为空
     */
    optional(value) {
        return !this.methods.required(value) && 'dependency-mismatch'
    }

    /**
     * 获取自定义字段的提示信息
     * @param {String} param 字段名
     * @param {Object} rule 规则
     */
    customMessage(param, rule) {
        const params = this.messages[param]
        const isObject = typeof params === 'object'
        if (params && isObject) return params[rule.method]
    }

    /**
     * 获取某个指定字段的提示信息
     * @param {String} param 字段名
     * @param {Object} rule 规则
     */
    defaultMessage(param, rule) {
        let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]
        let type = typeof message

        if (type === 'undefined') {
            message = `Warning: No message defined for ${rule.method}.`
        } else if (type === 'function') {
            message = message.call(this, rule.parameters)
        }

        return message
    }

    /**
     * 缓存错误信息
     * @param {String} param 字段名
     * @param {Object} rule 规则
     * @param {String} value 元素的值
     */
    formatTplAndAdd(param, rule, value) {
        let msg = this.defaultMessage(param, rule)

        this.errorList.push({
            param: param,
            msg: msg,
            value: value,
        })
    }

    /**
     * 验证某个指定字段的规则
     * @param {String} param 字段名
     * @param {Object} rules 规则
     * @param {Object} data 需要验证的数据对象
     */
    checkParam(param, rules, data) {

        // 缓存数据对象
        this.data = data

        // 缓存字段对应的值
        const value = data[param] !== null && data[param] !== undefined ? data[param] : ''

        // 遍历某个指定字段的所有规则，依次验证规则，否则缓存错误信息
        for (let method in rules) {

            // 判断验证方法是否存在
            if (this.isValidMethod(method)) {

                // 缓存规则的属性及值
                const rule = {
                    method: method,
                    parameters: rules[method]
                }

                // 调用验证方法
                const result = this.methods[method](value, rule.parameters)

                // 若result返回值为dependency-mismatch，则说明该字段的值为空或非必填字段
                if (result === 'dependency-mismatch') {
                    continue
                }

                this.setValue(param, method, result, value)

                // 判断是否通过验证，否则缓存错误信息，跳出循环
                if (!result) {
                    this.formatTplAndAdd(param, rule, value)
                    break
                }
            }
        }
    }

    /**
     * 设置字段的默认验证值
     * @param {String} param 字段名
     */
    setView(param) {
        this.form[param] = {
            $name: param,
            $valid: true,
            $invalid: false,
            $error: {},
            $success: {},
            $viewValue: ``,
        }
    }

    /**
     * 设置字段的验证值
     * @param {String} param 字段名
     * @param {String} method 字段的方法
     * @param {Boolean} result 是否通过验证
     * @param {String} value 字段的值
     */
    setValue(param, method, result, value) {
        const params = this.form[param]
        params.$valid = result
        params.$invalid = !result
        params.$error[method] = !result
        params.$success[method] = result
        params.$viewValue = value
    }

    /**
     * 验证所有字段的规则，返回验证是否通过
     * @param {Object} data 需要验证数据对象
     */
    checkForm(data) {
        this.__initData()

        for (let param in this.rules) {
            this.setView(param)
            this.checkParam(param, this.rules[param], data)
        }

        return this.valid()
    }

    /**
     * 返回验证是否通过
     */
    valid() {
        return this.size() === 0
    }

    /**
     * 返回错误信息的个数
     */
    size() {
        return this.errorList.length
    }

    /**
     * 返回所有错误信息
     */
    validationErrors() {
        return this.errorList
    }
}

export default WxValidate
```



#### 2、需要验证页面引入以上（**WxValidate**）js

> `import WxValidate from '../lib/WxValidate.js'`

> 引用名：`WxValidate `

> 引用路径：`../lib/WxValidate.js`  

在引入的js的data中定义一个对象，如：  

```html
<form bindsubmit="formSubmit">
  <view class="section">
  <input name="CityID" placeholder="测试输入"></input>
</view>
  <view class="section">
  <input name="Name" placeholder="测试输入"></input>
</view>
  <view class="section">
  <input name="Year" placeholder="测试输入日期"></input>
</view>
  <view class="section">
  <input name="FrName" placeholder="测试输入"></input>
</view>
  <view class="section">
  <input name="FrTel" maxlength="11" type ='number'  placeholder="测试输入电话号码"></input>
</view>
   <button style='width:50%;background-color:#52b8f5;color:white;' formType="submit">保存</button>
</form>
```

```js
  initValidate() {//在js 写个方法，放进onLoad，当做初始化
  const rules = {
      CityID: { required: true, },//true OR false 控制是否验证，也可直接不写name
      Name: { required: true },
      Year: { required: true, dateISO: true},
      FrName: { required: true },
      FrTel: { required: true, tel: true },//第二个参数属于特殊字符验证
    }

    const messages = {
      CityID: { required: '请选择乡镇' },
      Name: { required: '请输入养殖场名称' },
      Year: { required: '请输入建场时间' },
      FrName: { required: '请输入法人名' },
      FrTel: { required: '请输入法人手机号', tel: '请输入正确的手机号' },
    }
    this.WxValidate = new WxValidate(rules, messages)
  },
```

#### 3、表单提交 **formSubmit**  

```js
  showModal(error) {//验证信息弹出
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
  formSubmit(e)
  {
    var that = this
    const params = e.detail.value
    if (!this.WxValidate.checkForm(params)) {//获取表单信息进行验证
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
  },
```

**目前大概就是酱紫**，我写个[代码段](https://github.com/18487115313/wx-Validate.git)吧   GitHub的。

***





WX-小程序js表单验证

&emsp;&emsp;**写小程序的时候实在不喜欢小程序从下方弹出的默认日历，毕竟丑还不好操作，所以从网上找了个日历组件**  

&emsp;&emsp;写博客记录的时候找了一早上原来的抄袭的博客，实在抱歉没找到，如有博客原著看到麻烦留个言，我加上**转载**  

#### 1、效果图片：  

![][1]

2、js代码  

```js
// components/calendar/calendar.js
/**
 * 日历选择组件
 * 2018-03-04
 * mehaotian
 * github ：https://github.com/mehaotian
 */
Component({
  /**
   * 组件的属性列表
   * data [Date] 当前现实的月份
   * selected [Array] 所有被选择的天
   */
  properties: {
    date: {
      type: null,
      value: new Date()
    },
    selected: {
      type: Array,
      value: [],
      observer(newVal, oldVal) {
        this.getWeek(new Date())
      }
    },
    isOpen: {
      type: Boolean,
      value: false,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    calShow: true, // 日历组件是否打开
    dateShow: false, // 日期是否选择
    selectDay: '', // 当前选择日期
    canlender: {
      "weeks": []
    }
  },
  ready() {
    this.getWeek(new Date())
    if (this.data.isOpen) {
      this.setData({
        calShow: false,
        dateShow: true
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    dateSelection() {
      if (this.data.isOpen) {
        return
      }
      let self = this;
      if (self.data.calShow) {
        self.setData({
          calShow: false
        }, () => {
          setTimeout(() => {
            self.setData({
              dateShow: true
            }, () => {
              self.triggerEvent('select', { ischeck: !self.data.calShow })
            })
          }, 100)
        })
      } else {
        self.setData({
          dateShow: false
        }, () => {
          setTimeout(() => {
            self.setData({
              calShow: true
            }, () => {
              self.triggerEvent('select', { ischeck: !self.data.calShow })
            })
          }, 300)
        })
      }

    },
    selectDay(e) {
      let index = e.currentTarget.dataset.index;
      let week = e.currentTarget.dataset.week;
      let ischeck = e.currentTarget.dataset.ischeck;
      let canlender = this.data.canlender;
      if (!ischeck) return false;
      let month = canlender.weeks[week][index].month < 10 ? "0" + canlender.weeks[week][index].month : canlender.weeks[week][index].month
      let date = canlender.weeks[week][index].date < 10 ? "0" + canlender.weeks[week][index].date : canlender.weeks[week][index].date
      this.getWeek(canlender.year + "-" + month + "-" + date);

    },
    packup() {

      let self = this;
      if (this.data.isOpen) {
        let year = self.data.canlender.year + "-" + self.data.canlender.month + "-" + self.data.canlender.date
        let _date = self.getDate(year, 0);
        self.getWeek(_date);
        return
      }
      self.setData({
        dateShow: false
      }, () => {
        setTimeout(() => {
          self.setData({
            calShow: true
          }, () => {
            let year = self.data.canlender.year + "-" + self.data.canlender.month + "-" + self.data.canlender.date
            let _date = self.getDate(year, 0);
            self.getWeek(_date);
            self.triggerEvent('select', { ischeck: !self.data.calShow })
          })
        }, 300)
      })
    },
    // 返回今天
    backtoday() { this.getWeek(new Date()); },
    // 前一天|| 后一天
    dataBefor(e) {
      let num = 0;
      let types = e.currentTarget.dataset.type;

      if (e.currentTarget.dataset.id === "0") {
        num = -1;
      } else {
        num = 1
      }
      let year = this.data.canlender.year + "-" + this.data.canlender.month + "-" + this.data.canlender.date
      let _date = this.getDate(year, num, types === 'month' ? "month" : "day");
      this.getWeek(_date);
    },
    // 获取日历内容
    getWeek(dateData) {
      let selected = this.data.selected
      let a = new Date()
      // console.log("im date ", a, typeof a === 'object')
      // 判断当前是 安卓还是ios ，传入不容的日期格式
      if (typeof dateData !== 'object') {
        dateData = dateData.replace(/-/g, "/")
      }
      let _date = new Date(dateData);
      let year = _date.getFullYear(); //年
      let month = _date.getMonth() + 1;  //月
      let date = _date.getDate();//日
      let day = _date.getDay();// 天
      let canlender = [];
      // console.log(selected)
      let dates = {
        firstDay: new Date(year, month - 1, 1).getDay(),
        lastMonthDays: [],// 上个月末尾几天
        currentMonthDys: [], // 本月天数
        nextMonthDays: [], // 下个月开始几天
        endDay: new Date(year, month, 0).getDay(),
        weeks: []
      }

      // 循环上个月末尾几天添加到数组
      for (let i = dates.firstDay; i > 0; i--) {
        dates.lastMonthDays.push({
          'date': new Date(year, month, -i).getDate() + '',
          'month': month - 1
        })
      }
      // 循环本月天数添加到数组
      for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
        let have = false;
        for (let j = 0; j < selected.length; j++) {
          let selDate = selected[j].date.split('-');

          if (Number(year) === Number(selDate[0]) && Number(month) === Number(selDate[1]) && Number(i) === Number(selDate[2])) {
            have = true;
          }
        }
        dates.currentMonthDys.push({
          'date': i + "",
          'month': month,
          have
        })
      }
      // 循环下个月开始几天 添加到数组
      for (let i = 1; i < 7 - dates.endDay; i++) {
        dates.nextMonthDays.push({
          'date': i + '',
          'month': month + 1
        })
      }

      canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
      // 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
      for (let i = 0; i < canlender.length; i++) {
        if (i % 7 == 0) {
          dates.weeks[parseInt(i / 7)] = new Array(7);
        }
        dates.weeks[parseInt(i / 7)][i % 7] = canlender[i]
      }


      // 渲染数据
      this.setData({
        selectDay: year+"/"+ month + "/" + date,
        "canlender.weeks": dates.weeks,
        'canlender.month': month,
        'canlender.date': date,
        "canlender.day": day,
        'canlender.year': year,
      })
      month = month < 10 ? "0" + month : month
      date = date < 10 ? "0" + date : date
      this.triggerEvent('getdate', { year, month, date })
    },
    /**
     * 时间计算
     */
    getDate(date, AddDayCount, str = 'day') {
      if (typeof date !== 'object') {
        date = date.replace(/-/g, "/")
      }
      let dd = new Date(date)
      switch (str) {
        case 'day':
          dd.setDate(dd.getDate() + AddDayCount)// 获取AddDayCount天后的日期
          break;
        case 'month':
          dd.setMonth(dd.getMonth() + AddDayCount)// 获取AddDayCount天后的日期
          break;
        case 'year':
          dd.setFullYear(dd.getFullYear() + AddDayCount)// 获取AddDayCount天后的日期
          break;
      }
      let y = dd.getFullYear()
      let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1)// 获取当前月份的日期，不足10补0
      let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()// 获取当前几号，不足10补0
      return y + '-' + m + '-' + d
    }
  }
})

```

#### 2、wxml代码段  

```xml

  
  <view  bindtap="dateSelection">
     <image style='width:35px;height:35px' src='/image/time.png'></image>
    
  </view>
  

<view wx:if='{{!calShow}}' class="{{isOpen?'':'calendar-box'}} {{dateShow?'active':''}}" style='z-index:100'>
  <view class="calendar-wrapper {{dateShow?'active':''}}">
    <view class="calendar-panel">
      <view class="date-befor" data-id="0" data-type="month" bindtap='dataBefor'>
        <text class="iconfont">
        <text class='left color'></text>
        </text>
      </view>
      <view class="calendar-panel-box">
        <view>{{canlender.year}}年</view>
        <view>{{canlender.month}}月</view>
      </view>
      <view class="date-after" data-id="1" data-type="month" bindtap='dataBefor'>
        <text class="iconfont">
        <text class='right color'></text>
        </text>
      </view>
      <view class='backtoday' bindtap='backtoday'>
        回到今天
      </view>
    </view>
    <view class="calendar-header">
      <view>日</view>
      <view>一</view>
      <view>二</view>
      <view>三</view>
      <view>四</view>
      <view>五</view>
      <view>六</view>
    </view>
    <view class="calendar-body">
      <block wx:for="{{canlender.weeks}}" wx:for-item="weeks" wx:for-index="week" wx:key="weeks">
        <view class="calender-body-date-week">
          <block wx:for="{{weeks}}" wx:for-item="day" wx:key="day">
            <view class="date {{canlender.month === day.month? '' : 'placeholder'}} {{(day.date==canlender.date||day.checked) && canlender.month == day.month?'date-current': ''}} " data-week="{{week}}" data-index="{{index}}" data-ischeck="{{canlender.month === day.month}}"
              bindtap='selectDay'>
              {{day.date}}
              <view wx:if="{{day.have}}" class="data-circle"></view>
            </view>
          </block>
        </view>
      </block>
    </view>
    <view class="packup" bindtap='packup'>确定</view>
  </view>
</view>
```

#### 3、json代码段  

```json
{
  "component": true,
  "usingComponents": {}
}
```

#### 4、wxss代码段  

```css
/* pages/calendar/calendar.wxss */

.calendar-box {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
  padding-top: 100rpx;
  box-sizing: border-box;
  transition: all 0.3s;
  opacity: 0;
}

.calendar-box.active {
  opacity: 1;
}

.calendar-wrapper {
  width: 100%;
  border-top: 1px #f5f5f5 solid;
  box-sizing: border-box;
  font-size: 26rpx;
  background: #fff;
  transition: all 0.3s;
  transform: translateY(-100%);
}

.calendar-wrapper.active {
  transform: translateY(0%);
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100rpx;
  /* width: 100%; */
  background: #fff;
  /* padding: 0 30rpx; */
  z-index: 10000;
}

.top-jiantou {
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  box-sizing: border-box;
  line-height: 100rpx;
}

.iconfont {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #52b8f5;
  width: 40rpx;
  height: 35rpx;
}

.iconfont .left, .iconfont .right {
  display: block;
  width: 0;
  height: 0;
  border-top: 20rpx solid transparent;
  border-bottom: 20rpx solid transparent;
}

.iconfont .left {
  border-right: 40rpx solid transparent;
}

.iconfont .right {
  border-left: 40rpx solid transparent;
}

.iconfont .left.color {
  border-right-color: #52b8f5;
}

.iconfont .right.color {
  border-left-color: #52b8f5;
}

.btn {
  margin: 0 30rpx;
  width: 240rpx;
  height: 53rpx;
  border: 1rpx solid #52b8f5;
  border-radius: 26rpx;
  color: #52b8f5;
  font-size: 26rpx;
  box-sizing: border-box;
}

.calendar-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  height: 80rpx;
}

.backtoday {
  position: absolute;
  right: 0;
  top: 15rpx;
  padding: 0 10rpx;
  padding-left: 5%;
  height: 50rpx;
  line-height: 50rpx;
  border: 1px #52b8f5 solid;
  border-right: none;
  font-size: 28rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  color: #52b8f5;
  background: rgba(82, 184, 245, 0.1);
}

.date-befor, .date-after {
  /* border: 1px red solid; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  width: 80rpx;
  text-align: center;
  line-height: 80rpx;
  /* margin-right: 20rpx; */
}

/* .date-after {
    margin-left: 20rpx;
} */

.calendar-panel-box {
  display: flex;
}

.calendar-header {
  display: flex;
}

.calendar-header view {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  color: #52b8f5;
}

.calendar-body {
  display: flex;
  flex-wrap: wrap;
}

.calender-body-date-week {
  display: flex;
  width: 100%;
  border-bottom: 1px #f5f5f5 solid;
}

.date {
  position: relative;
  width: 100%;
  text-align: center;
  color: #1c1c1c;
  background: #fff;
  line-height: 100rpx;
}

.date.active {
  background: red;
}

.placeholder {
  color: #a4a4a4;
}

.date-current {
  background: #52b8f5;
  color: #fff;
}

.data-circle {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  right: 0;
  margin: auto;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #ff5a5f;
  z-index: 2;
}

.packup {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #52b8f5;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

```

#### 5、使用方法  

&emsp;5.1、在需要使用的页面先注册，.json文件中

> "usingComponents": {"calendar": "../../components/calendar/calendar"}，  

> **calendar**组件名  
>
> **../../components/calendar/calendar**组件地址  

5.2、在.wxml文件中  

> ```xml
> <calendar bindselect="bindselect" bindgetdate="bindgetdate"></calendar>
> ```

5.3、在.js文件中  

> ```js
>  bindselect(e) {
>     var that = this
>     console.log("点击日历图标=" + JSON.stringify(that))
>   },//日历组件控制
>   bindgetdate(e) {
> 
>     console.log("选择日期=" + e.detail.year + "-" + e.detail.month + "-" + e.detail.date)
> 
>   },//获取选择的日期
> ```

#### 6、组件显示样式可在底层文件中更改  

#### 7、说几个没完善的地方，方法**bindselect(e)**可添加二次点击收起弹出，点击灰色部分日期时(非当前月所显示的日期)可添加跳转到点击月，并且选中方法  

#### 8、当前组件提供了[代码块](https://github.com/18487115313/wx-calendar.git)可导入编辑器查看  

***

[1]:https://raw.githubusercontent.com/18487115313/18487115313.github.io/master/screenshot/20190313103705.png

WX-小程序时间组件

 &emsp;&emsp;之前一直想着搭建一个知识库，至于博客之前是在**CSDN**上写，也没写多少，偶然发现**GitHub**上可以搭建一个博客，就当做自己的知识库搭建一个了。  
**这个是测试图片怎么玩（感觉md这个图片挺麻烦的,用cmd Markdown写的)，目前也打算将文章中的图片放在博客GitHub仓库中了，不想重新弄仓库，这几记录下获取GitHub中图片地址，有点尴尬，直接右键图片取出地址的**
![此处输入图片的描述][1]
&emsp;&emsp;总得来说搭建这个还是挺简单的，如果有人Clone了我的[博客主题](https://github.com/18487115313/18487115313.github.io.git)，Clone之后需要更改![][4]
**我在这里说一下需要更改到的地方：**  
#### 1.这是图标![][2]，有ico格式和svg;  
#### 2.更改**_config.yml**这个文件内容具体如下  

```js
  title: '还是夸张一点技术专栏'//这个是你自己的博客名  
  description: '一个专注于开发的普通技术民工。'//签名  
  keyword: 'C# VB Vue 小程序'//放的狠话  
  url: 'https://18487115313.github.io' // 自己的博客地址  
```
```javascript
//Author 配置博主信息  
author: '还是夸张一点'  
nickname: '还是夸张一点'  
bio: 'C# VB Vue 小程序'  
avatar: '/assets/img/profile.png'//这个是头像  
```
**评论功能就不需要弄了，我已经弄进去了**  
#### 3.更改评论的配置在**post.html**文件中，找到以下代码  

```html

  <div id="gitmentContainer"></div>  
  <link rel="stylesheet" href="/assets/css/default.css"/>  
  <script src="/assets/js/gitment.browser.js"></script>  
  <script src="/assets/js/js-MD5.js"></script>  
  <script>  
  var gitment = new Gitment({  
      id: md5(window.location.pathname),  
      owner: '18487115313',  
      repo: '18487115313.github.io',  
      oauth: {  
          client_id: '1899bc3b6e1494ce68b5',  
          client_secret: 'b934e6fa3b90f3f129e5698915b9949d8f59b3d2',  
      },  
  });  
  gitment.render('gitmentContainer');  
  </script>  

```
`md5(window.location.pathname)`这句代码可以更改，是生成关于评论的唯一值，我用md5加密了，也不需要改，如果不写id的话会出现默认的id值长度超过50的问题，  
`owner: '18487115313'`  
`repo: '18487115313.github.io'`这两句就是用户名以及这个仓库的名
下面的是需要自己去手动更改的，去注册[注册新的OAuth应用程序](https://github.com/settings/applications/new)取出client_id、client_secret放进来下面附图![][3]  
#### 4.自己更改图标，有一些的图标是**svg**格式的，自己网上在线转一下；  
#### 5、首页的背景也可以更改，包括标签页，博客详细页都可以更改，需要自己调一下样式图片之类的；  
#### 6、文件**README.md**里面是介绍自己博客背景以及预览之类的，自己改改，你也不希望别人看你GitHub介绍链接到我的博客吧； 

#### 7、说一个评论的坑，初期搭建的时候可能同一个博客会出现多次初始化，导致之前的评论内容不见了，因为每次初始化相当于将当前博客的id给换了，所以会出现找不到的问题，第二个就是**GitMent**对IE内核有要求，win10自带的那个**Microsoft   Edge**不支持GitHub登录评论功能，出现的问题我在汉化评论的那里标注了，出现问题可以自己查一查。

#### 8、本地跑**Jekyll**,这个比较麻烦我也不打算写给个链接，一般都能装对：[[jekyll本地环境搭建(Windows)](https://www.cnblogs.com/yevon/p/3308158.html)] <sub>链接原著为博客园叶子([yevon](https://home.cnblogs.com/u/yevon/))博客</sub>,安装成功之后将**_config.yml**文件中一下代码屏蔽：  

```js
plugins: [jekyll-paginate]
paginate: 6
port: 4001
```

在本地仓库运行：**jekyll serve**出现以下情况说明没问题：

```js
PS I:\MeGitHub\18487115313.github.io> jekyll serve
Configuration file: I:/MeGitHub/18487115313.github.io/_config.yml
       Deprecation: You appear to have pagination turned on, but you haven't included the `jekyll-paginate` gem. Ensure you have `plugins: [jekyll-paginate]` in your configuration file.
            Source: I:/MeGitHub/18487115313.github.io
       Destination: I:/MeGitHub/18487115313.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 1.427 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'I:/MeGitHub/18487115313.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

```

***



[1]:https://raw.githubusercontent.com/18487115313/18487115313.github.io/master/screenshot/1494404591.png
[2]:https://raw.githubusercontent.com/18487115313/18487115313.github.io/master/favicon.ico
[3]:https://raw.githubusercontent.com/18487115313/18487115313.github.io/master/screenshot/20190305202608.png
[4]:https://raw.githubusercontent.com/18487115313/18487115313.github.io/master/screenshot/20190305172642.png
