微信小程序開發05-日歷組件的實現
接上文:微信小程序開發04-打造自己的UI庫
github地址:https://github.com/yexiaochai/wxdemo
我們這裏繼續實現我們的日歷組件,這個日歷組件稍微有點特殊,算是相對復雜的組件了,然後一般的日歷組件又會有很多的變化,所以我們這裏實現最基本的標簽即可:
1 let View = require(‘behavior-view‘); 2 const util = require(‘../utils/util.js‘); 3 4 // const dateUtil = util.dateUtil; 5 6 Component({ 7 behaviors: [8 View 9 ], 10 properties: { 11 12 }, 13 data: { 14 weekDayArr: [‘日‘, ‘一‘, ‘二‘, ‘三‘, ‘四‘, ‘五‘, ‘六‘], 15 displayMonthNum: 1, 16 17 //當前顯示的時間 18 displayTime: null, 19 //可以選擇的最早時間 20 startTime: null, 21 //最晚時間 22 endTime: null, 23 24 //當前時間,有時候是讀取服務器端25 curTime: new Date() 26 27 }, 28 29 attached: function () { 30 //console.log(this) 31 }, 32 methods: { 33 34 } 35 })
1 <wxs module="dateUtil"> 2 var isDate = function(date) { 3 return date && date.getMonth; 4 }; 5 6 var isLeapYear = function(year) {7 //傳入為時間格式需要處理 8 if (isDate(year)) year = year.getFullYear() 9 if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return true; 10 return false; 11 }; 12 13 var getDaysOfMonth = function(date) { 14 var month = date.getMonth(); //註意此處月份要加1,所以我們要減一 15 var year = date.getFullYear(); 16 return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]; 17 } 18 19 var getBeginDayOfMouth = function(date) { 20 var month = date.getMonth(); 21 var year = date.getFullYear(); 22 var d = getDate(year, month, 1); 23 return d.getDay(); 24 } 25 26 var getDisplayInfo = function(date) { 27 if (!isDate(date)) { 28 date = getDate(date) 29 } 30 var year = date.getFullYear(); 31 32 var month = date.getMonth(); 33 var d = getDate(year, month); 34 35 //這個月一共多少天 36 var days = getDaysOfMonth(d); 37 38 //這個月是星期幾開始的 39 var beginWeek = getBeginDayOfMouth(d); 40 41 /* 42 console.log(‘info‘,JSON.stringify( { 43 year: year, 44 month: month, 45 days: days, 46 beginWeek: beginWeek 47 })); 48 */ 49 50 return { 51 year: year, 52 month: month, 53 days: days, 54 beginWeek: beginWeek 55 } 56 } 57 58 module.exports = { 59 getDipalyInfo: getDisplayInfo 60 } 61 </wxs> 62 63 64 <view class="cm-calendar"> 65 <view class="cm-calendar-hd "> 66 <block wx:for="{{weekDayArr}}"> 67 <view class="item">{{item}}</view> 68 </block> 69 </view> 70 <view class="cm-calendar-bd "> 71 <view class="cm-month "> 72 </view> 73 <view class="cm-day-list"> 74 75 <block wx:for="{{dateUtil.getDipalyInfo(curTime).days + dateUtil.getDipalyInfo(curTime).beginWeek}}" wx:for-index="index"> 76 77 <view wx:if="{{index < dateUtil.getDipalyInfo(curTime).beginWeek }}" class="item active"></view> 78 <view wx:else class="item">{{index + 1 - dateUtil.getDipalyInfo(curTime).beginWeek}}</view> 79 80 </block> 81 82 <view class=" active cm-item--disabled " data-cndate="" data-date=""> 83 84 </view> 85 </view> 86 </view> 87 </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戴上了枷鎖,只允許在其允許的範圍靈活,我們這裏嘗試對頁面進行再拆分:
1 <import src="./mod.searchbox.wxml" /> 2 <view> 3 <template is="searchbox" /> 4 </view> 5 <include src="./mod/calendar.wxml"/> 6 <include src="../../utils/abstract-page.wxml"/>
<ui-calendar displayTime="{{CalendarDisplayTime}}" selectedDate="{{CalendarSelectedDate}}" displayMonthNum="{{CalendarDisplayMonthNum}}" is-show="{{isCalendarShow}}" ></ui-calendar>
1 /* 2 事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod 3 一個mod對應一個wxml,但是共享外部的css,暫時如此設計 4 所有日歷模塊的需求全部再此實現 5 */ 6 module.exports = { 7 q: 1, 8 ddd: function(){}, 9 10 data: { 11 isCalendarShow: ‘‘, 12 CalendarDisplayMonthNum: 2, 13 CalendarDisplayTime: new Date(), 14 CalendarSelectedDate: null 15 } 16 }
核心代碼還是在abstract-page裏面:
1 //pageData為頁面級別數據,mod為模塊數據,要求一定不能重復 2 initPage(pageData, mod) { 3 //debugger; 4 let _pageData = {}; 5 let key, value, k, v; 6 7 //為頁面動態添加操作組件的方法 8 Object.assign(_pageData, this.getPageFuncs(), pageData); 9 10 //生成真實的頁面數據 11 _pageData.data = {}; 12 Object.assign(_pageData.data, this.getPageData(), pageData.data || {}); 13 14 for( key in mod) { 15 value = mod[key]; 16 for(k in value) { 17 v = value[k]; 18 if(k === ‘data‘) { 19 Object.assign(_pageData.data, v); 20 } else { 21 _pageData[k] = v; 22 } 23 } 24 } 25 26 console.log(_pageData); 27 return _pageData; 28 }
這裏再改造一下,我們基本的日歷組件便完成了80%了:
1 /* 2 事實上一個mod就只是一個對象,只不過為了方便拆分,將對象分拆成一個個的mod 3 一個mod對應一個wxml,但是共享外部的css,暫時如此設計 4 所有日歷模塊的需求全部再此實現 5 */ 6 module.exports = { 7 q: 1, 8 ddd: function(){}, 9 onCalendarDayTap: function (e) { 10 let data = e.detail; 11 var date = new Date(data.year, data.month, data.day); 12 console.log(date) 13 this.setData({ 14 calendarSelectedDate: date 15 }); 16 }, 17 data: { 18 isCalendarShow: ‘‘, 19 calendarDisplayMonthNum: 2, 20 calendarDisplayTime: new Date(), 21 calendarSelectedDate: null 22 } 23 }
至此,我們組件相關課題基本結束,接下來,我們開始我們的業務代碼
微信小程序開發05-日歷組件的實現