得到可当月月份的天数，可以展示出所有的天数列表，但是我们一样要或者上一个页的天数和下一个页的天数，如果当前月份是1月或者12月，我们还需要额外判断上一页是上一年的12月，下一页是下一年的一月份。
我们可能需要获取足够多的日期信息来展示（不仅仅是当前月份，还有上一月或者上一年和下一月或者下一年）
data = { currentDate: currentDateObj.getDate(), //当天日期第几天 currentYear: currentDateObj.getFullYear(), //当天年份 currentDay: currentDateObj.getDay(), //当天星期 currentMonth: currentDateObj.getMonth() + 1, //当天月份 showMonth: showMonth, //当前显示月份 showDate: showDate, //当前显示月份的第几天 showYear: showYear, //当前显示月份的年份 beforeYear: beforeYear, //当前页上一页的年份 beforMonth: beforMonth, //当前页上一页的月份 afterYear: afterYear, //当前页下一页的年份 afterMonth: afterMonth, //当前页下一页的月份 selected: selected //当前被选择的日期信息 };
能显示日期之后，当然还没有完，我们需要一个选择日期的功能，即用户可以点击指定那一天，也可以选择哪一年或者哪一个月，选择年份和月份我们可以用Picker组件来展示，选择具体的哪天这就需要在日期列表上的每一天都要绑定一个点击事件来响应用户的点击动作，用户选择具体的日期后，可能会随意翻页，所以必须要保存好当前选择的日期。
存储
示例程序中用到了数据存储，关系到小程序中的数据缓存API，官方提供的API比较多，我只是用了两个异步的数据缓存API。
wx.setStorage({key: KEY, data: DATA});
let allData =[{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]; wx.setStorageSync({key: Config.ITEMS_SAVE_KEY, data: allData});
参数
说明
KEY
存储数据的键名
DATA
存储的数据
wx.getStorage({key: KEY});
let allData = wx.getStorage({ key: Config.ITEMS_SAVE_KEY success: allData => { let obj1 = allData[0]; console.log(obj1.title); } });
参数
说明
KEY
存储数据的键名
编码
建立工程的步骤就不讲了，直接进入主题，应用只有两个页面，一个首页，一个详情页，结构清晰，功能简单。
日历
先来看看首页，日历的wxml结构;
结构分为上中下三部分，header为头部，用于展示翻页按钮和当前日期信息。在.week.row和.body.row元素中展示星期和天数列表，这里的布局采用了比较low的百分比分栏，总共有7栏，100/7哈哈，想高逼格的可以采用css的分栏布局和flex布局。
<view> <view> <view bindtap="changeDateEvent" data-year="{{data.beforeYear}}" data-month="{{data.beforMonth}}"> <image src=""></image> </view> <view> <picker mode="date" fields="month" value="{{pickerDateValue}}" bindchange="datePickerChangeEvent"> <text>{{data.showYear}}年{{data.showMonth > 9 ? data.showMonth : ('0' + data.showMonth)}}月</text> </picker> </view> <view bindtap="changeDateEvent" data-year="{{data.afterYear}}" data-month="{{data.afterMonth}}"> <image src=""></image> </view> </view> <view> <view> <text>一</text> </view> <view> <text>二</text> </view> <view> <text>三</text> </view> <view> <text>四</text> </view> <view> <text>五</text> </view> <view> <text>六</text> </view> <view> <text>日</text> </view> </view> <view> <block wx:for="{{data.dates}}" wx:key="_id"> <view bindtap="dateClickEvent" data-year="{{item.year}}" data-month="{{item.month}}" data-date="{{item.date}}"> <text>{{item.date}}</text> </view> </block> </view> </view>
.btn.month-pre和.btn.month-next翻页按钮，都绑定了changeDateEvent的tap事件，各自都用自己的data-year和data-mont属性，这两个属性是临时存值，当点击按钮翻页的时候，我们需要知道当前的年份和日期，以便可以更加方便地翻到上一页或者下一页。
changeDateEvent事件比较简单：
changeDateEvent(e) { const {year, month} = e.currentTarget.dataset; changeDate.call(this, new Date(year, parseInt(month) - 1, 1)); }