oopsguy精品教程《三》微信小程序之ES6與事項助手
好久沒有寫關于微信小程序的隨筆了，其實是不知道寫點什么好，之前的豆瓣圖書和知乎日報已經把小程序的基礎部分寫的很詳細了，高級部分的API有些還得不到IDE的調試支持。之前發表了知乎日報小例，有網友問我小程序有沒有關于日歷顯示的組件，可以顯示所有天數的，自己看了一遍，好像沒有這個組件，所以打算那這個功能來練手，在準備期間，微信開發者工具已經升級了兩三次，添加了部分功能和修改了部分功能，導致之前的例子的寫法不兼容更新后的IDE，還得修改代碼。隨著小程序的不斷更新，功能越來越完善，我想我也應該緊跟官方的升級步伐，這次的案例使用了IDE支持的ES6和新的API。
這次介紹的是一個比較簡單的小應用事項助手，其實跟事項也不沾多少邊，只是作為輔助功能，只有數據的添加和刪除，主要內容是日歷這塊內容。日歷組件在web應用中應用非常廣泛，插件也非常豐富，但是小程序不支持傳統的插件寫法，而是以數據驅動內容。
大部分的日歷選擇器都是差不多的，能顯示當前的年份、月份和天數，可以選擇某天、某月或者某年，我們可以打開操作系統中自帶的日歷觀察一番。
日歷的布局大同小異，本次案例的布局也是中規中矩，比較傳統，頭部顯示當前年份月份，頭部的左右個顯示一個翻頁按鈕，跳轉到上一月和下一月，下半部分顯示當月的天數列表，由于每月的天數可能不一樣，列表的格數是固定的，所以當月的天數顯示使用高亮，其余的使用偏灰色彩。
預備
本次案例用到了ES6，先來了解一下案列中用到的幾個寫法。本人也是順帶學習順帶編寫，可能代碼中還存在部分老的寫法。
變量
ES6中聲明變量可以用let聲明變量，用const聲明常量，即不可改變的量。
|
1
2
3
4
5
|
let version = '1.0.0';
const weekday = 7;
version = '2.0.0';
weekday = 8; //錯誤，用const聲明的常量，不能修改值
|
本習慣用大寫字母和下劃線的組合方式來聲明全局的常量
|
1
|
const CONFIG_COLOR = '#FAFAFA';
|
對象方法屬性
小程序的每一個頁面都有一個相對應的js文件，里面必不可少的就是Page函數，Page函數接受的參數是一個對象，我們經常使用的寫法就是：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
Page({
data: {
userAvatar: './images/avatar.png',
userName: 'Oopsguy'
},
onLoad: function() {
//....
},
onReady: function() {
//....
}
});
|
現在換做ES6的寫法，我們可以這樣：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
Page({
data: {
userAvatar: './images/avatar.png',
userName: 'Oopsguy'
},
onLoad() {
//....
},
onReady() {
//....
}
});
|
我們可以把以前的鍵值寫法省略掉，而且function聲明也不需要了。
類
ES6中擁有了類這一概念，聲明類的方式很簡單，跟其他語言一樣，差別不大：
