接上文：
github地址：
我们这儿继续实现我们的月历组件，这个月历组件稍为有点特殊，算是相对复杂的组件了，然后通常的月历组件又会有好多的变化，所以我们这儿实现最基本的标签即可：
#8:a:5:e:1:9:b:2:e:5:c:2:5:9:c:0:c:c:e:f:e:7:2:6:a:5:e:7:6:0:d:9#
let View = require('behavior-view');
constutil = require('../utils/util.js');
// const dateUtil = util.dateUtil;
Component({
behaviors: [
View
],
properties: {
},
data: {
weekDayArr: ['日','一','二','三','四','五','六'],
displayMonthNum: 1,
//当前显示的时间
displayTime: null,
//可以选择的最早时间
startTime: null,
//最晚时间
endTime: null,
//当前时间，有时候是读取服务器端
curTime: newDate()
},
attached: function(){
//console.log(this)
},
methods: {
})
varisDate = function(date){
returndate && date.getMonth;
};
varisLeapYear = function(year){
//传入为时间格式须要处理
if(isDate(year))year = year.getFullYear()
if((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))returntrue;
returnfalse;
};
vargetDaysOfMonth = function(date){
varmonth = date.getMonth();//注意此处月份要加1，所以我们要减一
varyear = date.getFullYear();
return[31,isLeapYear(year)?29 : 28,31,30,31,30,31,31,30,31,30,31][month];
vargetBeginDayOfMouth = function(date){
varmonth = date.getMonth();
varyear = date.getFullYear();
vard = getDate(year,month,1);
returnd.getDay();
vargetDisplayInfo = function(date){
if(!isDate(date)){
date = getDate(date)
varyear = date.getFullYear();
varmonth = date.getMonth();
vard = getDate(year,month);
//这个月一共多少天
vardays = getDaysOfMonth(d);
//这个月是星期几开始的
varbeginWeek = 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
{{item}}
{{index + 1 - dateUtil.getDipalyInfo(curTime).beginWeek}}
这个是十分狭小的月历雏型，在代码过程中有以下几点比较苦闷：
① WXML与js间应当只有数据传递，根本不能传递方式，应该是两个webview的通讯，而月历组件这儿在WXML层由不得不写一点逻辑
② 本来在WXML中写逻辑早已不太对了，而我们引入的WXS，使用与HTML中的js片断也有很大的不同
这些问题，一度让代码显得复杂，而可以看见一个简单的组件，还没有复杂功能，涉及到的文件都太多了，这里是调用层：
事实上，我们以上数据根本不应当讲到data上面，应该属性传递，我们这儿先为了简单实现功能，接下来我们继续建立这个组件，具体代码请看git：
#8:e:4:6:7:0:d:e:1:f:8:c:6:b:b:0:c:6:1:8:4:3:2:5:6:c:1:e:2:d:d:7#
这个月历组件应当是在小程序中写的最复杂的组件了，尤其是好多逻辑判定的代码都放到了WXML上面，根据之前的了解，小程序渲染在一个webview中，js逻辑在一个webview中，他这样做的目的可能是想让性能更好，但是我这儿代码写上去事实上是有点苦闷的，我们这儿开始组装组件，将数据配置放在属性上，开始组装abstract-page，事实上我觉得月历这些非全局组件原本不应当放在子类中：
① 因为Component提供的是一个标签，而且涉及的文件好多，加上承继关系很不好管理
② 因为月历组件事实上是一个标签，所以我们会有一个引入的基础WXML，一个使用的js，完全独立一个文件愈加复杂
③ 本来小程序或则复杂的页面都应当组件化开发，所以我们简历一个页面级别的组件，分散到对应的页面中
小程序像是给灵活的HTML&JS戴上了桎梏，只容许在其容许的范围灵活，我们这儿尝试对页面进行再分拆：
#d:6:e:0:e:e:7:f:5:e:0:7:f:b:8:5:1:d:0:7:d:b:4:2:0:b:0:e:d:f:a:f#
/*
事实上一个mod就只是一个对象,只不过为了便捷分拆,将对象拆分成一个个的mod
一个mod对应一个wxml,但是共享外部的css,暂时这么设计
所有月历模块的需求全部再此实现
*/
module.exports = {
q: 1,
ddd: function(){},
data: {
isCalendarShow: '',
CalendarDisplayMonthNum: 2,
CalendarDisplayTime: newDate(),
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 inmod){
value = mod[key];
for(kinvalue){
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;
vardate = newDate(data.year,data.month,data.day);
console.log(date)
this.setData({
calendarSelectedDate: date
});
},
data: {
isCalendarShow: '',
calendarDisplayMonthNum: 2,
calendarDisplayTime: newDate(),
calendarSelectedDate: null
#2:7:8:6:4:5:c:d:a:f:9:5:9:5:6:f:5:3:6:f:7:7:b:1:6:3:8:2:3:8:6:6#
至此，我们组件相关课题基本结束，接下来，我们开始我们的业务代码
【关于投稿】
如果你们有原创好文投稿，请直接给公号发送留言。
①留言格式：
【投稿】+《文章标题》+文章链接
②示例：
【投稿】《不要自诩是程序员，我十多年的IT职场总结》：
③最后请附上您的个人简介哈~
