微信小程序開發05-日歷組件的實現

接上文：微信小程序開發04-打造自己的UI庫

github地址：https://github.com/yexiaochai/wxdemo

我們這里繼續實現我們的日歷組件，這個日歷組件稍微有點特殊，算是相對復雜的組件了，然后一般的日歷組件又會有很多的變化，所以我們這里實現最基本的標簽即可：

let View = require('behavior-view');
const util = require('../utils/util.js');

// const dateUtil = util.dateUtil;

Component({
  behaviors: [
    View
  ],
  properties: {
    
  },
  data: {
    weekDayArr: ['日', '一', '二', '三', '四', '五', '六'],
    displayMonthNum: 1,

    //當前顯示的時間
    displayTime: null,
    //可以選擇的最早時間
    startTime: null,
    //最晚時間
    endTime: null,

    //當前時間，有時候是讀取服務器端
    curTime: new Date()
    
  },

  attached: function () { 
    //console.log(this)
  },
  methods: {
   
  }
})

<wxs module="dateUtil">
  var isDate = function(date) {
    return date && date.getMonth;
  };

  var isLeapYear = function(year) {
    //傳入為時間格式需要處理
    if (isDate(year)) year = year.getFullYear()
    if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return true;
    return false;
  };

  var getDaysOfMonth = function(date) {
    var month = date.getMonth(); //注意此處月份要加1，所以我們要減一
    var year = date.getFullYear();
    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  }

  var getBeginDayOfMouth = function(date) {
    var month = date.getMonth();
    var year = date.getFullYear();
    var d = getDate(year, month, 1);
    return d.getDay();
  }

  var getDisplayInfo = function(date) {
    if (!isDate(date)) {
      date = getDate(date)
    }
    var year = date.getFullYear();

    var month = date.getMonth();
    var d = getDate(year, month);

    //這個月一共多少天
    var days = getDaysOfMonth(d);

    //這個月是星期幾開始的
    var beginWeek = getBeginDayOfMouth(d);

    /*
        console.log('info',JSON.stringify( {
          year: year,
          month: month,
          days: days,
          beginWeek: beginWeek
        }));
    */

    return {
      year: year,
      month: month,
      days: days,
      beginWeek: beginWeek
    }
  }

  module.exports = {
    getDipalyInfo: getDisplayInfo
  }
</wxs>


<view class="cm-calendar">
  <view class="cm-calendar-hd ">
    <block wx:for="{{weekDayArr}}">
      <view class="item">{{item}}</view>
    </block>
  </view>
  <view class="cm-calendar-bd ">
    <view class="cm-month ">
    </view>
    <view class="cm-day-list">

      <block wx:for="{{dateUtil.getDipalyInfo(curTime).days + dateUtil.getDipalyInfo(curTime).beginWeek}}" wx:for-index="index">

        <view wx:if="{{index < dateUtil.getDipalyInfo(curTime).beginWeek }}" class="item active"></view>
        <view wx:else class="item">{{index + 1 - dateUtil.getDipalyInfo(curTime).beginWeek}}</view>

      </block>

      <view class=" active  cm-item--disabled " data-cndate="" data-date="">

      </view>
    </view>
  </view>
</view>

這個是非常簡陋的日歷雛形，在代碼過程中有以下幾點比較痛苦：

① WXML與js間應該只有數據傳遞，根本不能傳遞方法，應該是兩個webview的通信，而日歷組件這里在WXML層由不得不寫一點邏輯

② 本來在WXML中寫邏輯已經不太對了，而我們引入的WXS，使用與HTML中的js片段也有很大的不同

這些問題，一度讓代碼變得復雜，而可以看到一個簡單的組件，還沒有復雜功能，涉及到的文件都太多了，這里是調用層：

<ui-calendar  is-show="" ></ui-calendar>

事實上，我們以上數據根本不應該寫到data里面，應該屬性傳遞，我們這里先為了簡單實現功能，接下來我們繼續完善這個組件，具體代碼請看git：

這個日歷組件應該是在小程序中寫的最復雜的組件了，尤其是很多邏輯判斷的代碼都放在了WXML里面，根據之前的了解，小程序渲染在一個webview中，js邏輯在一個webview中，他這樣做的目的可能是想讓性能更好，但是我這里代碼寫起來事實上是有點痛苦的，我們這里開始組裝組件，將數據配置放到屬性上，開始組裝abstract-page，事實上我認為日歷這種非全局組件本來不應該放到基類中：

① 因為Component提供的是一個標簽，而且涉及的文件很多，加上繼承關系很不好管理

② 因為日歷組件事實上是一個標簽，所以我們會有一個引入的基礎WXML，一個使用的js，完全獨立一個文件更加復雜

③ 本來小程序或者復雜的頁面都應該組件化開發，所以我們簡歷一個頁面級別的組件，分散到對應的頁面中

小程序像是給靈活的HTML&JS戴上了枷鎖，只允許在其允許的范圍靈活，我們這里嘗試對頁面進行再拆分：

<import src="./mod.searchbox.wxml" />
<view>
  <template is="searchbox" />
</view>
<include src="./mod/calendar.wxml"/>
<include src="../../utils/abstract-page.wxml"/>

<ui-calendar displayTime="{{CalendarDisplayTime}}"
selectedDate="{{CalendarSelectedDate}}"
displayMonthNum="{{CalendarDisplayMonthNum}}"
is-show="{{isCalendarShow}}" ></ui-calendar>

/*
事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod
一個mod對應一個wxml,但是共享外部的css,暫時如此設計
所有日歷模塊的需求全部再此實現
*/
module.exports = {
  q: 1,
  ddd: function(){},

  data: {
    isCalendarShow: '',
    CalendarDisplayMonthNum: 2,
    CalendarDisplayTime: new Date(),
    CalendarSelectedDate: null
  }
}

核心代碼還是在abstract-page里面：

  //pageData為頁面級別數據,mod為模塊數據,要求一定不能重復
  initPage(pageData, mod) {
    //debugger;
    let _pageData = {};
    let key, value, k, v;

    //為頁面動態添加操作組件的方法
    Object.assign(_pageData, this.getPageFuncs(), pageData);

    //生成真實的頁面數據
    _pageData.data = {};
    Object.assign(_pageData.data, this.getPageData(), pageData.data || {});

    for( key in mod) {
      value = mod[key];
      for(k in value) {
        v = value[k];
        if(k === 'data') {
          Object.assign(_pageData.data, v);
        } else {
          _pageData[k] = v;
        }
      }
    }

    console.log(_pageData);
    return _pageData;
  }

這里再改造一下，我們基本的日歷組件便完成了80%了：

/*
事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod
一個mod對應一個wxml,但是共享外部的css,暫時如此設計
所有日歷模塊的需求全部再此實現
*/
module.exports = {
  q: 1,
  ddd: function(){},
  onCalendarDayTap: function (e) {
    let data = e.detail;
    var date = new Date(data.year, data.month, data.day);
    console.log(date)
    this.setData({
      calendarSelectedDate: date
    });
  },
  data: {
    isCalendarShow: '',
    calendarDisplayMonthNum: 2,
    calendarDisplayTime: new Date(),
    calendarSelectedDate: null
  }
}

至此，我們組件相關課題基本結束，接下來，我們開始我們的業務代碼