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

這次介紹的是一個比較簡單的小應(yī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)前年份月份,頭部的左右個顯示一個翻頁按鈕,跳轉(zhuǎn)到上一月和下一月,下半部分顯示當(dāng)月的天數(shù)列表,由于每月的天數(shù)可能不一樣,列表的格數(shù)是固定的,所以當(dāng)月的天數(shù)顯示使用高亮,其余的使用偏灰色彩。

預(yù)備

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

網(wǎng)友評論