既然是日历，必不可少的功能就是让用户可以选择显示指定的年份和月份，用pciker组件来实现最合适不过了，官方更新的api，目前未知，picker组件已经支持mode = date模式的风格，即原生的日期选择。触发选择的区域关联在了日历的header上。
<view> <picker mode="date" fields="month" value="{{pickerDateValue}}" bindchange="datePickerChangeEvent"> <text>{{data.showYear}}年{{data.showMonth > 9 ? data.showMonth : ('0' + data.showMonth)}}月</text> </picker> </view>
mode=date指定pciker是日期选择风格，fields=month则显示组件显示日期的精度显示当月份即可，组件初始化的值为pickerDateValue，绑定了datePickerChangeEvent事件，当选择的日期发生变化时，就会触发此事件。
datePickerChangeEvent(e) { const date = new Date(Date.parse(e.detail.value)); changeDate.call(this, new Date(date.getFullYear(), date.getMonth(), 1)); }
事项存储
此应用还有小小的事项功能，可以添加事项条目，事项包括了标题、内容和等级，说白了其实就是一个功能不全的TODO应用...
既然涉及到存储，肯定需要操作缓存的方法，自己也是刚搞前端那不久，不太明白javascript的封装约定，借鉴之前在java所用的模式，分为了两个文件，一个是仓库类（数据的CURD操作），另一个是业务类（附带处理部分业务），缓存的配置放置于Config文件中，类中用到了异步的缓存操作API，所以使用Promise模式封装。
首先是把Promise封装成通用的方法，顺便封装部分经常用到的函数：
/** * 生成GUID序列号 * @returns {string} GUID */ function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } /** * 记录日志 * @param {Mixed} 记录的信息 * @returns {Void} */ function log(msg) { if (!msg) return; if (getApp().settings['debug']) console.log(msg); let logs = wx.getStorageSync('logs') || []; logs.unshift(msg) wx.setStorageSync('logs', logs) } /** * @param {Function} func 接口 * @param {Object} options 接口参数 * @returns {Promise} Promise对象 */ function promiseHandle(func, options) { options = options || {}; return new Promise((resolve, reject) => { if (typeof func !== 'function') reject(); options.success = resolve; options.fail = reject; func(options); }); } module.exports = { guid: guid, log: log, promiseHandle: promiseHandle }
guid方法用于生成每一个事项的id，方便查询，log方法用于日志记录，promiseHandle把小程序的大部分异步API封装到了Promise对象中。
具体的Config配置文件：
module.exports = { ITEMS_SAVE_KEY: 'todo_item_save_Key', //事项等级 LEVEL: { normal: 1, warning: 2, danger: 3 } };
数据操作仓库类 DataRepository：
import Config from 'Config'; import {guid, log, promiseHandle} from '../utils/util'; class DataRepository { /** * 添加数据 * @param {Object} 添加的数据 * @returns {Promise} */ static addData(data) { if (!data) return false; data['_id'] = guid(); return DataRepository.findAllData().then(allData => { allData = allData || []; allData.unshift(data); wx.setStorage({key:Config.ITEMS_SAVE_KEY, data: allData}); }); } /** * 删除数据 * @param {string} id 数据项idid * @returns {Promise} */ static removeData(id) { return DataRepository.findAllData().then(data => { if (!data) return; for (let idx = 0, len = data.length; idx < len; idx++) { if (data[idx] && data[idx]['_id'] == id) { data.splice(idx, 1); break; } } wx.setStorage({key: Config.ITEMS_SAVE_KEY, data: data}); }); } /** * 批量删除数据 * @param {Array} range id集合 * @returns {Promise} */ static removeRange(range) { if (!range) return; return DataRepository.findAllData().then(data => { if (!data) return; let indexs = []; for (let rIdx = 0, rLen = range.length; rIdx < rLen; rIdx++) { for (let idx = 0, len = data.length; idx < len; idx++) { if (data[idx] && data[idx]['_id'] == range[rIdx]) { indexs.push(idx); break; } } } let tmpIdx = 0; indexs.forEach(item => { data.splice(item - tmpIdx, 1); tmpIdx++; }); wx.setStorage({key: Config.ITEMS_SAVE_KEY, data: data}); }); } /** * 更新数据 * @param {Object} data 数据 * @returns {Promise} */ static saveData(data) { if (!data || !data['_id']) return false; return DataRepository.findAllData().then(allData => { if (!allData) return false; for (let idx = 0, len = allData.length; i < len; i++) { if (allData[i] && allData[i]['_id'] == data['_id']) { allData[i] = data; break; } } wx.setStorage({key: Config.ITEMS_SAVE_KEY, data: data}); }); } /** * 获取所有数据 * @returns {Promise} Promise实例 */ static findAllData() { return promiseHandle(wx.getStorage, {key: Config.ITEMS_SAVE_KEY}).then(res => res.data ? res.data : []).catch(ex => { log(ex); }); } /** * 查找数据 * @param {Function} 回调 * @returns {Promise} Promise实例 */ static findBy(predicate) { return DataRepository.findAllData().then(data => { if (data) { data = data.filter(item => predicate(item)); } return data; }); } } module.exports = DataRepository;
数据业务类 DataService：