微信小程序之ES6與事項(xiàng)助手的功能實(shí)現(xiàn)

更新時(shí)間：2016年11月30日 15:50:33 作者：oopsguy

本篇文章主要介紹了微信小程序之ES6與事項(xiàng)助手的功能實(shí)現(xiàn)，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下。

由于官方IDE更新到了0.11.112301版本，移除了對Promise的支持，造成事項(xiàng)助手不能正常運(yùn)行，解決此問題，在項(xiàng)目中引入第三方兼容庫Bluebird支持Promise，代碼已經(jīng)整合到項(xiàng)目代碼中。

好久沒有寫關(guān)于微信小程序的隨筆了，其實(shí)是不知道寫點(diǎn)什么好，之前的豆瓣圖書和知乎日報(bào)已經(jīng)把小程序的基礎(chǔ)部分寫的很詳細(xì)了，高級部分的API有些還得不到IDE的調(diào)試支持。之前發(fā)表了知乎日報(bào)小例，有網(wǎng)友問我小程序有沒有關(guān)于日歷顯示的組件，可以顯示所有天數(shù)的，自己看了一遍，好像沒有這個(gè)組件，所以打算那這個(gè)功能來練手，在準(zhǔn)備期間，微信開發(fā)者工具已經(jīng)升級了兩三次，添加了部分功能和修改了部分功能，導(dǎo)致之前的例子的寫法不兼容更新后的IDE，還得修改代碼。隨著小程序的不斷更新，功能越來越完善，我想我也應(yīng)該緊跟官方的升級步伐，這次的案例使用了IDE支持的ES6和新的API。

這次介紹的是一個(gè)比較簡單的小應(yīng)用事項(xiàng)助手，其實(shí)跟事項(xiàng)也不沾多少邊，只是作為輔助功能，只有數(shù)據(jù)的添加和刪除，主要內(nèi)容是日歷這塊內(nèi)容。日歷組件在web應(yīng)用中應(yīng)用非常廣泛，插件也非常豐富，但是小程序不支持傳統(tǒng)的插件寫法，而是以數(shù)據(jù)驅(qū)動內(nèi)容。

大部分的日歷選擇器都是差不多的，能顯示當(dāng)前的年份、月份和天數(shù)，可以選擇某天、某月或者某年，我們可以打開操作系統(tǒng)中自帶的日歷觀察一番。

日歷的布局大同小異，本次案例的布局也是中規(guī)中矩，比較傳統(tǒng)，頭部顯示當(dāng)前年份月份，頭部的左右個(gè)顯示一個(gè)翻頁按鈕，跳轉(zhuǎn)到上一月和下一月，下半部分顯示當(dāng)月的天數(shù)列表，由于每月的天數(shù)可能不一樣，列表的格數(shù)是固定的，所以當(dāng)月的天數(shù)顯示使用高亮，其余的使用偏灰色彩。

預(yù)備

本次案例用到了ES6，先來了解一下案列中用到的幾個(gè)寫法。本人也是順帶學(xué)習(xí)順帶編寫，可能代碼中還存在部分老的寫法。

變量

ES6中聲明變量可以用let聲明變量，用const聲明常量，即不可改變的量。

let version = '1.0.0';
const weekday = 7;

version = '2.0.0';
weekday = 8; //錯誤，用const聲明的常量，不能修改值

本習(xí)慣用大寫字母和下劃線的組合方式來聲明全局的常量

const CONFIG_COLOR = '#FAFAFA';

對象方法屬性

小程序的每一個(gè)頁面都有一個(gè)相對應(yīng)的js文件，里面必不可少的就是Page函數(shù)，Page函數(shù)接受的參數(shù)是一個(gè)對象，我們經(jīng)常使用的寫法就是：

Page({
  data: {
    userAvatar: './images/avatar.png',
    userName: 'Oopsguy'
  },
  onLoad: function() {
    //....
  },
  onReady: function() {
    //....
  }
});

現(xiàn)在換做ES6的寫法，我們可以這樣：

Page({
  data: {
    userAvatar: './images/avatar.png',
    userName: 'Oopsguy'
  },
  onLoad() {
    //....
  },
  onReady() {
    //....
  }
});

我們可以把以前的鍵值寫法省略掉，而且function聲明也不需要了。

類

ES6中擁有了類這一概念，聲明類的方式很簡單，跟其他語言一樣，差別不大：

class Animal {
  constructor() {

  }

  eat() {

  }

  static doSomething(param) {
    //...
  }
}

module.exports = Animal;

class關(guān)鍵字用于聲明類，constructor是構(gòu)造函數(shù)，static修飾靜態(tài)方法。不能理解？我們看一下以前的js的簡單寫法：

var Animal = function() {

};

Animal.prototype.eat = function() {

};

Animal.doSomething = function(param) {

};

module.exports = Animal;

簡單的調(diào)用示例

let animal = new Animal();
animal.eat();
//靜態(tài)方法
Animal.doSomething('param');

這里只是簡單的展示了一下不同點(diǎn)，更多的只是還是需要讀者自己翻閱更多的資料來學(xué)習(xí)。

解構(gòu)

其實(shí)本人對結(jié)構(gòu)也不太懂怎樣解釋，簡單的來說就是可以把一個(gè)數(shù)組的元素或者對象的屬性分解出來，直接獲取，哈哈，解釋的比較勉強(qiáng)，還是看看示例吧。

let obj = {
  fullName: 'Xiao Ming',
  gender: 'male',
  role: 'admin'
};

let arr = ['elem1', 1, 30, 'arratElem3'];

let {fullName, role} = obj;
let [elem1, elem2] = arr;

console.log(fullName, role, elem1, elem2);

大家可能猜出了什么，看看輸出結(jié)果：

> Xiao Ming admin elem1 1

我們只要把需要獲取的屬性或者元素別名指定解構(gòu)體中，js會自動獲取對應(yīng)的屬性或者下標(biāo)對應(yīng)的元素。這個(gè)新特性非常有用，比如我們需要在一個(gè)Pages data對象中一個(gè)屬性獲取對了屬性值：

let year = this.data.year,
  month = this.data.month,
  day = this.data.day;

但是用解構(gòu)的寫法就很簡潔：

let {year, month, day} = this.data;

再比如引入一個(gè)文件：

function getDate(dateStr) {
  if (dateStr) {
    return new Date(Date.parse(dateStr));
  }
  return new Date();
}

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)
}

module.exports = {
  getDate: getDate,
  log: log
};

現(xiàn)在引入并調(diào)用外部文件的方法：

import {log} from '../../utils/util';

log('Application initialized !!');

import...from...是ES6的引入模塊方式，等同于小程序總的require，但import可以選擇導(dǎo)入哪些子模塊。

箭頭函數(shù)（Arrow Function）

剛開始我也不知道js的箭頭函數(shù)到底是什么東西，用了才發(fā)現(xiàn)，這特么就是lambda表達(dá)式么。箭頭函數(shù)簡化了函數(shù)的寫法，但是還是跟普通的function有區(qū)別，主要是在作用域上。

比如我們需要請求網(wǎng)絡(luò)：

wx.request({
 url: 'url', 
 header: {
   'Content-Type': 'application/json'
 },
 success: function(res) {
  console.log(res.data)
 }
});

用函數(shù)還是可以簡化一定的代碼量，哈哈哈。

wx.request({
 url: 'url', 
 header: {
   'Content-Type': 'application/json'
 },
 success: (res) => {
  console.log(res.data)
 }
});

注意到那個(gè)success指向的回調(diào)函數(shù)了么，function關(guān)鍵字沒了，被醒目的=>符號取代了?？吹竭@里大家是不是認(rèn)為以后我們寫function就用箭頭函數(shù)代替呢？答案是不一定，而且要非常小心！

function和箭頭函數(shù)雖然看似一樣，只是寫法簡化了，其實(shí)是不一樣的，function聲明的函數(shù)和箭頭函數(shù)的作用域不同，這是一個(gè)不小心就變坑的地方。

Page({
  data: {
    windowHeight: 0
  },
  onLoad() {
    let _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({windowHeight: res.windowHeight});
      }
    });
  }
});

一般我們獲取設(shè)備的屏幕高度差不多是這樣的步驟，在頁面剛加載的onLoad方法中通過wx.getSystemInfoAPI來獲取設(shè)備的屏幕高度，由于success指向的回調(diào)函數(shù)作用域跟onLoad不一樣，所以我們無法像onLoad函數(shù)體中直接寫this.setData來設(shè)置值。我們可以定義一個(gè)臨時(shí)變量指向this，然后再回調(diào)函數(shù)中調(diào)用。

哪箭頭函數(shù)的寫法有什么不一樣呢？

Page({
  data: {
    windowHeight: 0
  },
  onLoad() {
    let _this = this;
    wx.getSystemInfo({
      success: (res) => {
        _this.setData({windowHeight: res.windowHeight});
      }
    });
  }
});

運(yùn)行之后好像感覺沒什么區(qū)別呀，都能正常執(zhí)行，結(jié)果也一樣。確實(shí)沒什么區(qū)別，你甚至這樣寫都可以：

Page({
  data: {
    windowHeight: 0
  },
  onLoad() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({windowHeight: res.windowHeight});
      }
    });
  }
});

咦？這樣寫，this的指向的作用域不是不一樣么？其實(shí)這就是要說明的，箭頭函數(shù)是不綁定作用域的，不會改變當(dāng)前this的作用域，既然這樣，在箭頭函數(shù)中的this就會根據(jù)作用域鏈來指向上一層的作用域，也就是onLoad的作用域，所以他們得到的結(jié)果都是一樣的。

其實(shí)我個(gè)人的習(xí)慣是無論用普通的函數(shù)寫法還是箭頭函數(shù)的寫法，都習(xí)慣聲明臨時(shí)的_this來指向需要的作用域，因?yàn)榧^函數(shù)沒有綁定作用域，寫的層次深了，感覺就會很亂，理解起來比較困難，在后面的案例中，我也會延續(xù)這個(gè)習(xí)慣。

Promise

寫js經(jīng)常寫的東西除了數(shù)組對象就是回調(diào)函數(shù)，記不記得用jQuery的ajax用得特別爽，如果是多層嵌套調(diào)用的話，那些回調(diào)函數(shù)簡直像蓋樓梯一樣壯觀?，F(xiàn)在Promise來了，我們再也不用為這些回調(diào)地獄發(fā)愁，用Promise來解決回調(diào)問題非常優(yōu)雅，鏈?zhǔn)秸{(diào)用也非常的方便。

Promise是ES6內(nèi)置的類，其使用簡單，簡化了異步編程的繁瑣層次問題，比較簡單的用法是：

new Promise((resolve, reject) => {
  //success
  //resolve();

  //error 
  //reject();
});

實(shí)例化一個(gè)Promise對象，它接受一個(gè)函數(shù)參數(shù)，此函數(shù)有兩個(gè)回調(diào)參數(shù)，resolve和reject，如果正常執(zhí)行使用resolve執(zhí)行傳遞，如果是失敗或者錯誤可以用reject來執(zhí)行傳遞，其實(shí)他們就是一個(gè)狀態(tài)的轉(zhuǎn)換?？梢詴簳r(shí)理解為success和fail。

來看一下簡單的示例：

let ret = true;
let pro = new Promise((resolve, reject) => {
  ret ? resolve('true') : reject('false');
}).then((res) => {
  console.log(res);
  return 'SUCCESS';
}, (rej) => {
  console.log(rej);
  return 'ERROR';
}).then((success) => {
  console.log(success);
  let value = 0 / 1;
}, (error) => {
  console.log(error);
}).catch((ex) => {
  console.log(ex);
});

或許我們已經(jīng)看出些什么了，實(shí)例化出一個(gè)Promise，根據(jù)ret的布爾值決定是否resolve執(zhí)行正?；卣{(diào)流程還是執(zhí)行reject回調(diào)走意外的流程，顯然ret是true，當(dāng)執(zhí)行resolve時(shí)，傳遞了一個(gè)字符串參數(shù)true，可以看到實(shí)例化出來的Promise對象后面鏈?zhǔn)秸{(diào)用了很多then方法，其實(shí)then方法同樣也是有resolve和reject兩個(gè)回調(diào)參數(shù)，上層的Promise執(zhí)行的回調(diào)傳遞到then函數(shù)中，Promise的resolve傳遞到then的resolve，同理reject也一樣，之后我們發(fā)現(xiàn)最后一個(gè)catch函數(shù)，這是一個(gè)捕抓異常的函數(shù)，當(dāng)流程發(fā)生異常，我們可以在catch方法中獲取異常并處理。

可能解釋的比較羞澀，看看下面例子，發(fā)出一個(gè)網(wǎng)絡(luò)請求，獲取用戶頭像，再把用戶頭像插入DOM中，再睡眠2000ms，再打印出SUCCESS，再睡眠3000ms，在alert出ERROR，再休眠1000ms，最后打印出ERROR。這...看起來有點(diǎn)喪心病狂，但只是舉個(gè)例子：

$.get('/user/1/avatar', (data) => {
  $('#avatar img').attr('src', data['avatar']);
  setTimeout(() => {
    console.log('SUCCESS');
    setTimeout(() => {
      alert('ERROR');
      setTimeout(() => {
        console.log('ERROR');
      }, 1000);
    }, 3000)
  }, 2000);
});

一共有四個(gè)回調(diào)函數(shù)，也不算多，如果有十幾個(gè)回調(diào)呢？直至是噩夢呀。一層一層的嵌套，看起來已經(jīng)眼花了。那么Promise能做些什么改變呢？

function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
}

new Promise((resolve) => {
  $.get('/user/1/avatar', resolve);
}).then((avatar) => {
  $('#avatar img').attr('src', avatar);
}).then(() => {
  return sleep(2000);
}).then(() => {
  console.log('SUCCESS');
  return sleep(3000);
}).then(() => {
  alert('ERROR');
  return sleep(1000);
}).then(() => {
  console.log('ERROR');
});

額...看起來怎么使用Promise代碼量比不使用的還多呀。不要介意，嘿嘿，可能是我個(gè)人封裝不精，但是使用Promise的代碼可讀性確實(shí)比上面的要好很多，而且我們不必寫一堆的嵌套回調(diào)函數(shù)，在享受使用同步寫法的待遇，又可以得到異步的功能，兩全其美，這樣的寫法還是比較符合日常的思維方式，哈哈。

看看小程序中怎么應(yīng)用，在小程序項(xiàng)目的app.js中，我們經(jīng)常看見這段代碼：

App({
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  }
});

這是個(gè)方法是獲取當(dāng)前用戶的信息，首先先檢查globalData對象中有沒有緩存有userInfo對象（存儲用戶的信息），如果有就返回給用戶傳進(jìn)來的回掉函數(shù)，否則就請求接口獲取用用戶信息，獲取用戶信息之前，微信小程序要求先調(diào)用wx.login認(rèn)證，才能調(diào)用wx.getUserInfo接口。

看的出代碼的層次已經(jīng)有點(diǎn)深了，我們可以用Promise來簡化一下（-_-|| 說的有點(diǎn)夸張，實(shí)際上這點(diǎn)嵌套還是可以的）

wx.getUserInfo和wx.login這兩個(gè)接口都用共同的屬性success和fail，我們可以封裝起來：

/**
 * @param {Function} func 接口
 * @param {Object} options 接口參數(shù)
 * @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);
 });
}

App({
  getUserInfo(cb) {
    if (typeof cb !== "function") return;
    let that = this;
    if (that.globalData.userInfo) {
      cb(that.globalData.userInfo);
    } else {  
      promiseHandle(wx.login)
        .then(() => promiseHandle(wx.getUserInfo))
        .then((res) => {
          that.globalData.userInfo = res.userInfo;
          cb(that.globalData.userInfo);
        })
        .catch((err) => {
          log(err);
        });
    }
  }
});

可以看出，使用了Promise之后，代碼簡潔了不少，層次深度也降低了不少，好家伙，很管用！

其實(shí)本次代碼中的回調(diào)嵌套很少的，為了盡量使用到ES6的新特性，少量的回調(diào)嵌套也使用了Promise處理。

介紹了那么多，主要了為了還不了解ES6的讀者能夠預(yù)熱一下知識，為后面的案例做好準(zhǔn)備，當(dāng)然，肯定有同學(xué)已經(jīng)對ES6了如指掌，本人也是剛剛學(xué)習(xí)，歡迎指正錯誤。

思路

在開工之前，我們先理一下思路，一個(gè)普通的日歷顯示功能應(yīng)該怎么做，該怎樣入手。

日期

獲取日期相關(guān)的信息，肯定用到Date對象。

let date = new Date();
let day = date.getDate(); //當(dāng)月的天
let month = date.getMonth() + 1; //月份，從0開始
let year = date.getFullYear(); //年份

我們需要知道當(dāng)前展示月份的天數(shù)。

let dayCount = new Date(currentYear, currentMonth, 0).getDate();

得到可當(dāng)月月份的天數(shù)，可以展示出所有的天數(shù)列表，但是我們一樣要或者上一個(gè)頁的天數(shù)和下一個(gè)頁的天數(shù)，如果當(dāng)前月份是1月或者12月，我們還需要額外判斷上一頁是上一年的12月，下一頁是下一年的一月份。

我們可能需要獲取足夠多的日期信息來展示（不僅僅是當(dāng)前月份，還有上一月或者上一年和下一月或者下一年）

data = {
  currentDate: currentDateObj.getDate(), //當(dāng)天日期第幾天
  currentYear: currentDateObj.getFullYear(), //當(dāng)天年份
  currentDay: currentDateObj.getDay(), //當(dāng)天星期
  currentMonth: currentDateObj.getMonth() + 1, //當(dāng)天月份
  showMonth: showMonth, //當(dāng)前顯示月份
  showDate: showDate, //當(dāng)前顯示月份的第幾天 
  showYear: showYear, //當(dāng)前顯示月份的年份
  beforeYear: beforeYear, //當(dāng)前頁上一頁的年份
  beforMonth: beforMonth, //當(dāng)前頁上一頁的月份
  afterYear: afterYear, //當(dāng)前頁下一頁的年份
  afterMonth: afterMonth, //當(dāng)前頁下一頁的月份
  selected: selected //當(dāng)前被選擇的日期信息
};

能顯示日期之后，當(dāng)然還沒有完，我們需要一個(gè)選擇日期的功能，即用戶可以點(diǎn)擊指定那一天，也可以選擇哪一年或者哪一個(gè)月，選擇年份和月份我們可以用Picker組件來展示，選擇具體的哪天這就需要在日期列表上的每一天都要綁定一個(gè)點(diǎn)擊事件來響應(yīng)用戶的點(diǎn)擊動作，用戶選擇具體的日期后，可能會隨意翻頁，所以必須要保存好當(dāng)前選擇的日期。

存儲

示例程序中用到了數(shù)據(jù)存儲，關(guān)系到小程序中的數(shù)據(jù)緩存API，官方提供的API比較多，我只是用了兩個(gè)異步的數(shù)據(jù)緩存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});

參數(shù)	說明
KEY	存儲數(shù)據(jù)的鍵名
DATA	存儲的數(shù)據(jù)

wx.getStorage({key: KEY});

let allData = wx.getStorage({
    key: Config.ITEMS_SAVE_KEY
    success: allData => {
      let obj1 = allData[0];
      console.log(obj1.title);
    }
  });

參數(shù)	說明
KEY	存儲數(shù)據(jù)的鍵名

編碼

建立工程的步驟就不講了，直接進(jìn)入主題，應(yīng)用只有兩個(gè)頁面，一個(gè)首頁，一個(gè)詳情頁，結(jié)構(gòu)清晰，功能簡單。

日歷

先來看看首頁，日歷的wxml結(jié)構(gòu);

結(jié)構(gòu)分為上中下三部分，header為頭部，用于展示翻頁按鈕和當(dāng)前日期信息。在.week.row和.body.row元素中展示星期和天數(shù)列表，這里的布局采用了比較low的百分比分欄，總共有7欄，100/7哈哈，想高逼格的可以采用css的分欄布局和flex布局。

<view class="og-calendar">
  <view class="header">
    <view class="btn month-pre" bindtap="changeDateEvent" data-year="{{data.beforeYear}}" data-month="{{data.beforMonth}}"> 
      <image src="../../images/prepage.png"></image>
    </view>
    <view class="date-info">
      <picker mode="date" fields="month" value="{{pickerDateValue}}" bindchange="datePickerChangeEvent">
        <text>{{data.showYear}}年{{data.showMonth > 9 ? data.showMonth : ('0' + data.showMonth)}}月</text>
      </picker>
    </view>
    <view class="btn month-next" bindtap="changeDateEvent" data-year="{{data.afterYear}}" data-month="{{data.afterMonth}}">
      <image src="../../images/nextpage.png"></image>
    </view>
  </view>
  <view class="week row">
    <view class="col">
      <text>一</text>
    </view>
    <view class="col">
      <text>二</text>
    </view>
    <view class="col">
      <text>三</text>
    </view>
    <view class="col">
      <text>四</text>
    </view>
    <view class="col">
      <text>五</text>
    </view>
    <view class="col">
      <text>六</text>
    </view>
    <view class="col">
      <text>日</text>
    </view>
  </view>
  <view class="body row"> 
    <block wx:for="{{data.dates}}" wx:key="_id">
      <view bindtap="dateClickEvent" data-year="{{item.year}}" data-month="{{item.month}}" data-date="{{item.date}}" class="col {{data.showMonth == item.month ? '' : 'old'}} {{data.currentDate == item.date && data.currentYear==item.year && data.currentMonth == item.month ? 'current' : ''}} { {item.active ? 'active' : ''}}">
        <text>{{item.date}}</text>
      </view> 
    </block>
  </view>
</view>

.btn.month-pre和.btn.month-next翻頁按鈕，都綁定了changeDateEvent的tap事件，各自都用自己的data-year和data-mont屬性，這兩個(gè)屬性是臨時(shí)存值，當(dāng)點(diǎn)擊按鈕翻頁的時(shí)候，我們需要知道當(dāng)前的年份和日期，以便可以更加方便地翻到上一頁或者下一頁。

changeDateEvent事件比較簡單：

changeDateEvent(e) {
  const {year, month} = e.currentTarget.dataset;
  changeDate.call(this, new Date(year, parseInt(month) - 1, 1));
}

點(diǎn)擊翻頁按鈕，根據(jù)回調(diào)進(jìn)來的event對象來獲取元素上的data-*屬性，然后調(diào)用changeDate這個(gè)方法來更新日歷數(shù)據(jù)，這個(gè)方法接收一個(gè)Date對象，代表要翻頁后的日期。

暫且不關(guān)心changeDate具體干了些什么，看看.body.row里有一個(gè)循環(huán)，每一個(gè)元素都綁定了dateClickEvent事件，而且每一個(gè)元素都附帶了自己所屬的年份、月份和天數(shù)信息，這些信息是非常有用的，當(dāng)點(diǎn)擊了具體的某一天，可以通過獲取元素上的data-*信息來知道我們具體選擇的日期。除此之外，元素上的class屬性包裹了一長串的判斷表達(dá)式。這些語句最終的目的是為了給元素動態(tài)變更，.old代表當(dāng)前的日期不是本月日期，因?yàn)槊恳话娴娜掌诔水?dāng)前月份的日期還可能包含上一月和下一月的部分日期，我們給予它灰色的樣式顯示，.current代表今天的日期，用實(shí)心填充顏色的背景樣式修飾，.active即代表著當(dāng)前選中的日期。

dateClickEvent事件其實(shí)也是調(diào)用了changeDate事件，本質(zhì)上也是也是改變?nèi)掌?，額外的工作就是保存選中的日期到selected對象中。

dateClickEvent(e) {
  const {year, month, date} = e.currentTarget.dataset;
  const {data} = this.data;
  let selectDateText = '';

  data['selected']['year'] = year;
  data['selected']['month'] = month;
  data['selected']['date'] = date;

  this.setData({ data: data });

  changeDate.call(this, new Date(year, parseInt(month) - 1, date));
}

來看看重中之重的changeDate函數(shù)，這個(gè)函數(shù)的代碼比較多，雖然堆砌大量在一個(gè)函數(shù)中是個(gè)不好的習(xí)慣，不過里面聲明變量和賦值比較多，業(yè)務(wù)代碼比較少：

/**
 * 變更日期數(shù)據(jù)
 * @param {Date} targetDate 當(dāng)前日期對象
 */
function changeDate(targetDate) {
 let date = targetDate || new Date();
 let currentDateObj = new Date();

 let showMonth, //當(dāng)天顯示月份
  showYear, //當(dāng)前顯示年份
  showDay, //當(dāng)前顯示星期
  showDate, //當(dāng)前顯示第幾天
  showMonthFirstDateDay, //當(dāng)前顯示月份第一天的星期
  showMonthLastDateDay, //當(dāng)前顯示月份最后一天的星期
  showMonthDateCount; //當(dāng)前月份的總天數(shù)

 let data = [];

 showDate = date.getDate();
 showMonth = date.getMonth() + 1;
 showYear = date.getFullYear();
 showDay = date.getDay();

 showMonthDateCount = new Date(showYear, showMonth, 0).getDate();
 date.setDate(1);
 showMonthFirstDateDay = date.getDay(); //當(dāng)前顯示月份第一天的星期
 date.setDate(showMonthDateCount);
 showMonthLastDateDay = date.getDay(); //當(dāng)前顯示月份最后一天的星期 

 let beforeDayCount = 0,
  beforeYear, //上頁月年份
  beforMonth, //上頁月份
  afterYear, //下頁年份
  afterMonth, //下頁月份
  afterDayCount = 0, //上頁顯示天數(shù)
  beforeMonthDayCount = 0; //上頁月份總天數(shù)

 //上一個(gè)月月份
 beforMonth = showMonth === 1 ? 12 : showMonth - 1;
 //上一個(gè)月年份
 beforeYear = showMonth === 1 ? showYear - 1 : showYear;
 //下個(gè)月月份
 afterMonth = showMonth === 12 ? 1 : showMonth + 1;
 //下個(gè)月年份
 afterYear = showMonth === 12 ? showYear + 1 : showYear;

 //獲取上一頁的顯示天數(shù)
 if (showMonthFirstDateDay != 0)
  beforeDayCount = showMonthFirstDateDay - 1;
 else
  beforeDayCount = 6;

 //獲取下頁的顯示天數(shù)
 if (showMonthLastDateDay != 0)
  afterDayCount = 7 - showMonthLastDateDay;
 else
  showMonthLastDateDay = 0;

 //如果天數(shù)不夠6行，則補(bǔ)充完整
 let tDay = showMonthDateCount + beforeDayCount + afterDayCount;
 if (tDay <= 35)
  afterDayCount += (42 - tDay); //6行7列 = 42

 //雖然翻頁了，但是保存用戶選中的日期信息是非常有必要的 
 let selected = this.data.data['selected'] || { year: showYear, month: showMonth, date: showDate };
 let selectDateText = selected.year + '年' + formatNumber(selected.month) + '月' + formatNumber(selected.date) + '日';

 data = {
  currentDate: currentDateObj.getDate(), //當(dāng)天日期第幾天
  currentYear: currentDateObj.getFullYear(), //當(dāng)天年份
  currentDay: currentDateObj.getDay(), //當(dāng)天星期
  currentMonth: currentDateObj.getMonth() + 1, //當(dāng)天月份
  showMonth: showMonth, //當(dāng)前顯示月份
  showDate: showDate, //當(dāng)前顯示月份的第幾天 
  showYear: showYear, //當(dāng)前顯示月份的年份
  beforeYear: beforeYear, //當(dāng)前頁上一頁的年份
  beforMonth: beforMonth, //當(dāng)前頁上一頁的月份
  afterYear: afterYear, //當(dāng)前頁下一頁的年份
  afterMonth: afterMonth, //當(dāng)前頁下一頁的月份
  selected: selected,
  selectDateText: selectDateText
 };

 let dates = [];
 let _id = 0; //為wx:key指定

 //上一月的日期
 if (beforeDayCount > 0) {
  beforeMonthDayCount = new Date(beforeYear, beforMonth, 0).getDate();
  for (let fIdx = 0; fIdx < beforeDayCount; fIdx++) {
   dates.unshift({
    _id: _id,
    year: beforeYear,
    month: beforMonth,
    date: beforeMonthDayCount - fIdx
   });
   _id++;
  }
 }

 //當(dāng)前月份的日期
 for (let cIdx = 1; cIdx <= showMonthDateCount; cIdx++) {
  dates.push({
   _id: _id,
   active: (selected['year'] == showYear && selected['month'] == showMonth && selected['date'] == cIdx), //選中狀態(tài)判斷
   year: showYear,
   month: showMonth,
   date: cIdx
  });
  _id++;
 }

 //下一月的日期
 if (afterDayCount > 0) {
  for (let lIdx = 1; lIdx <= afterDayCount; lIdx++) {
   dates.push({
    _id: _id,
    year: afterYear,
    month: afterMonth,
    date: lIdx
   });
   _id++;
  }
 }

 data.dates = dates;


 this.setData({ data: data, pickerDateValue: showYear + '-' + showMonth });
 loadItemListData.call(this);
}

雖然這段這段代碼有點(diǎn)啰嗦，不過總結(jié)下來無非就是獲取當(dāng)前月的信息，上一頁的信息和下一頁的信息，這些信息包括具體的年月日和星期。

年月選擇Picker

既然是日歷，必不可少的功能就是讓用戶可以選擇顯示指定的年份和月份，用pciker組件來實(shí)現(xiàn)最合適不過了，官方更新的api，目前未知，picker組件已經(jīng)支持mode = date模式的風(fēng)格，即原生的日期選擇。觸發(fā)選擇的區(qū)域關(guān)聯(lián)在了日歷的header上。

<view class="date-info">
  <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是日期選擇風(fēng)格，fields=month則顯示組件顯示日期的精度顯示當(dāng)月份即可，組件初始化的值為pickerDateValue，綁定了datePickerChangeEvent事件，當(dāng)選擇的日期發(fā)生變化時(shí)，就會觸發(fā)此事件。

datePickerChangeEvent(e) {
  const date = new Date(Date.parse(e.detail.value));
  changeDate.call(this, new Date(date.getFullYear(), date.getMonth(), 1));
}

事項(xiàng)存儲

此應(yīng)用還有小小的事項(xiàng)功能，可以添加事項(xiàng)條目，事項(xiàng)包括了標(biāo)題、內(nèi)容和等級，說白了其實(shí)就是一個(gè)功能不全的TODO應(yīng)用...

既然涉及到存儲，肯定需要操作緩存的方法，自己也是剛搞前端那不久，不太明白javascript的封裝約定，借鑒之前在java所用的模式，分為了兩個(gè)文件，一個(gè)是倉庫類（數(shù)據(jù)的CURD操作），另一個(gè)是業(yè)務(wù)類（附帶處理部分業(yè)務(wù)），緩存的配置放置于Config文件中，類中用到了異步的緩存操作API，所以使用Promise模式封裝。

首先是把Promise封裝成通用的方法，順便封裝部分經(jīng)常用到的函數(shù)：

/**
 * 生成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 接口參數(shù)
 * @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方法用于生成每一個(gè)事項(xiàng)的id，方便查詢，log方法用于日志記錄，promiseHandle把小程序的大部分異步API封裝到了Promise對象中。

具體的Config配置文件：

module.exports = {
  ITEMS_SAVE_KEY: 'todo_item_save_Key',
  //事項(xiàng)等級
  LEVEL: {
    normal: 1,
    warning: 2,
    danger: 3
  }
};

數(shù)據(jù)操作倉庫類 DataRepository：

import Config from 'Config';
import {guid, log, promiseHandle} from '../utils/util';

class DataRepository {

  /**
   * 添加數(shù)據(jù)
   * @param {Object} 添加的數(shù)據(jù)
   * @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});
    });
  }

  /**
   * 刪除數(shù)據(jù)
   * @param {string} id 數(shù)據(jù)項(xiàng)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});
    });
  }

  /**
   * 批量刪除數(shù)據(jù)
   * @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});
    });
    
  }

  /**
   * 更新數(shù)據(jù)
   * @param {Object} data 數(shù)據(jù)
   * @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});
    });
    
  }

  /**
   * 獲取所有數(shù)據(jù)
   * @returns {Promise} Promise實(shí)例
   */
  static findAllData() {
    return promiseHandle(wx.getStorage, {key: Config.ITEMS_SAVE_KEY}).then(res => res.data ? res.data : []).catch(ex => {
      log(ex);
    });
  }

  /**
   * 查找數(shù)據(jù)
   * @param {Function} 回調(diào)
   * @returns {Promise} Promise實(shí)例
   */
  static findBy(predicate) {
    return DataRepository.findAllData().then(data => {
      if (data) {
        data = data.filter(item => predicate(item));
      }
      return data;
    });
  }
}

module.exports = DataRepository;

數(shù)據(jù)業(yè)務(wù)類 DataService：

import DataRepository from 'DataRepository';
import {promiseHandle} from '../utils/util';

/**
 * 數(shù)據(jù)業(yè)務(wù)類
 */
class DataSerivce {

  constructor(props) {
    props = props || {};
    this.id = props['_id'] || 0;
    this.content = props['content'] || '';
    this.date = props['date'] || '';
    this.month = props['month'] || '';
    this.year = props['year'] || '';
    this.level = props['level'] || '';
    this.title = props['title'] || '';
  }

  /**
   * 保存當(dāng)前對象數(shù)據(jù)
   */
  save() {
    if (this._checkProps()) {
      return DataRepository.addData({
        title: this.title,
        content: this.content,
        year: this.year,
        month: this.month,
        date: this.date,
        level: this.level,
        addDate: new Date().getTime()
      });
    }
  }

  /**
   * 獲取所有事項(xiàng)數(shù)據(jù)
   */
  static findAll() {
    return DataRepository.findAllData()
      .then(data => data.data ? data.data : []);
  }

  /**
   * 通過id獲取事項(xiàng)
   */
  static findById(id) {
    return DataRepository.findBy(item => item['_id'] == id)
      .then(items => (items && items.length > 0) ? items[0] : null); 
  }

  /**
   * 根據(jù)id刪除事項(xiàng)數(shù)據(jù)
   */
  delete() {
    return DataRepository.removeData(this.id);
  }

  /**
   * 批量刪除數(shù)據(jù)
   * @param {Array} ids 事項(xiàng)Id集合
   */
  static deleteRange(...ids) {
    return DataRepository.removeRange(ids);
  }

  /**
   * 根據(jù)日期查找所有符合條件的事項(xiàng)記錄
   * @param {Date} date 日期對象
   * @returns {Array} 事項(xiàng)集合
   */
  static findByDate(date) {
    if (!date) return [];
    return DataRepository.findBy(item => {
      return item && item['date'] == date.getDate() &&
        item['month'] == date.getMonth() &&
        item['year'] == date.getFullYear();
    }).then(data => data);
  }

  _checkProps() {
    return this.title && this.level && this.date && this.year && this.month;
  }
}

module.exports = DataSerivce;

本人的對數(shù)組的操作不是很熟悉，代碼看起來有點(diǎn)臃腫，僅供參考。

好了，進(jìn)入正題，每天的事項(xiàng)可以用一個(gè)列表來展示，列表方在日歷下邊，具體結(jié)構(gòu)：

<view class="common-list">
  <view class="header" wx:if="{{itemList.length > 0}}">
    <text>事項(xiàng)信息</text>
  </view>

  <block wx:for="{{itemList}}" wx:key="id">
    <view class="item" bindtap="listItemClickEvent" data-id="{{item._id}}" bindlongtap="listItemLongTapEvent">
    <view class="inner {{isEditMode ? 'with-check' : ''}}">
      <view class="checker" wx:if="{{isEditMode}}">
        <icon type="circle" wx:if="{{!item.checked}}" color="#FFF" size="20" />
        <icon type="success" wx:else color="#E14848" size="20" />
      </view>
      <image wx:if="{{item.level == 1}}" class="icon" src="../../images/success.png" />
      <image wx:if="{{item.level == 2}}" class="icon" src="../../images/notice.png" />
      <image wx:if="{{item.level == 3}}" class="icon" src="../../images/fav-round.png" />
      <view class="content">
      <text class="title">{{item.title}}</text>
      </view>
    </view>
    </view>
  </block>

  <view class="header text-center" wx:if="{{!itemList || itemList.length <= 0}}">
    <text>當(dāng)前日期沒有事項(xiàng)記錄</text>
  </view>
</view>

列表的數(shù)據(jù)加載全靠這個(gè)方法loadItemListData：

/**
 * 加載事項(xiàng)列表數(shù)據(jù)
 */
function loadItemListData() {
 const {year, month, date} = this.data.data.selected;
 let _this = this;
 DataService.findByDate(new Date(Date.parse([year, month, date].join('-')))).then((data) => {
  _this.setData({ itemList: data });
 });
}

DataService.findByDate這個(gè)方法通過傳入一個(gè)日期來獲取指定日期的事項(xiàng)。成功獲取數(shù)據(jù)之后，在模板中遍歷數(shù)據(jù)，根據(jù)level屬性來顯示不同顏色的圖標(biāo)，讓事項(xiàng)等級一目了然。

既然有數(shù)據(jù)列表，數(shù)據(jù)從哪來？當(dāng)然是需要一個(gè)數(shù)據(jù)的添加面板。

首頁的有下表有FloatAction操作工具按鈕，在這里添加一個(gè)添加數(shù)據(jù)按鈕，添加的事項(xiàng)的日期屬于用戶選中的日期，添加面板默認(rèn)是隱藏起來的，當(dāng)點(diǎn)擊添加按鈕，面板就會向上滑動出現(xiàn)，可以用animationAPI實(shí)現(xiàn)動畫效果，其實(shí)本質(zhì)也是CSS3動畫。

<view class="updatePanel" style="top: {{updatePanelTop}}px;height:{{updatePanelTop}}px" animation="{{updatePanelAnimationData}}">
 <input placeholder="請輸入事項(xiàng)標(biāo)題" value="{{todoInputValue}}" bindchange="todoInputChangeEvent" />
 <textarea placeholder="請輸入事項(xiàng)內(nèi)容" value="{{todoTextAreaValue}}" bindblur="todoTextAreaChangeEvent"></textarea>
 <view class="level">
  <block wx:for="{{levelSelectData}}" wx:key="*this">
   <view bindtap="levelClickEvent" data-level="{{item}}" class="item {{item == 1 ? 'border-normal' : ''}} {{item == 2 ? 'border-warning' : '' }} {{item == 3 ? 'border-danger' : ''}} {{item == levelSelectedValue && item == 1 ? 'bg-normal' : ''}} {{item == levelSelectedValue && item == 2 ? 'bg-warning' : ''}} {{item == levelSelectedValue && item == 3 ? 'bg-danger' : ''}}"></view>
  </block>
 </view>
 <view class="footer">
  <view class="btn" bindtap="closeUpdatePanelEvent">取消</view>
  <view class="btn primary" bindtap="saveDataEvent">保存</view>
 </view>
</view>

在我寫到這個(gè)內(nèi)容之前，官方還沒有textarea組件，現(xiàn)在新增了，完美解決遺憾。

添加面板的動畫控制：

/**
 * 顯示事項(xiàng)數(shù)據(jù)添加更新面板
 */
function showUpdatePanel() {
 let animation = wx.createAnimation({
  duration: 600
 });
 animation.translateY('-100%').step();
 this.setData({
  updatePanelAnimationData: animation.export()
 });
}

/**
 * 顯示模態(tài)窗口
 * @param {String} msg 顯示消息
 */
function showModal(msg) {
 this.setData({
  isModalShow: true,
  isMaskShow: true,
  modalMsg: msg
 });
}

/**
 * 關(guān)閉模態(tài)窗口
 */
function closeModal() {
 this.setData({
  isModalShow: false,
  isMaskShow: false,
  modalMsg: ''
 });
}

/**
 * 關(guān)閉事項(xiàng)數(shù)據(jù)添加更新面板
 */
function closeUpdatePanel() {
 let animation = wx.createAnimation({
  duration: 600
 });
 animation.translateY('100%').step();
 this.setData({
  updatePanelAnimationData: animation.export()
 });
}

主要靠translateY來控制垂直方向的移動動畫，剛進(jìn)入頁面的時(shí)候獲取屏幕的高度，把面板的高度設(shè)置與屏幕高度一致，上滑的時(shí)候100%就剛好覆蓋整個(gè)屏幕。

主要的添加事項(xiàng)邏輯：

 // 保存事項(xiàng)數(shù)據(jù)
 saveDataEvent() {
  const {todoInputValue, todoTextAreaValue, levelSelectedValue} = this.data;
  const {year, month, date} = this.data.data.selected;
  console.log(todoInputValue, todoTextAreaValue);
  if (todoInputValue !== '') {
   let promise = new DataService({
    title: todoInputValue,
    content: todoTextAreaValue,
    level: levelSelectedValue,
    year: year,
    month: parseInt(month) - 1,
    date: date
   }).save();
   promise && promise.then(() => {
    //清空表單
    this.setData({
     todoTextAreaValue: '',
     levelSelectedValue: '',
     todoInputValue: ''
    });
    loadItemListData.call(this);
   })
   closeUpdatePanel.call(this);
  } else {
   showModal.call(this, '請?zhí)顚懯马?xiàng)內(nèi)容');
  }
 }

獲取添加面板上的數(shù)據(jù)和當(dāng)前選擇的日期直接用DataSerivce對象保存即可。

由于篇幅有限，剩下的數(shù)據(jù)刪除和數(shù)據(jù)查看邏輯也比較簡單，不再細(xì)說，本文主要是介紹小程序的ES6開發(fā)。