文章目錄

• 1 前言
• 2 簡介
• 3 部分實現步驟與代碼
• • 3.1 對象方法屬性
  • 3.2 箭頭函數（Arrow Function）
  • 3.3 日歷
• 4 最后

1 前言

Hi，大家好，學長今天向大家介紹 一個小程序項目

基于微信小程序的備忘錄記事助手

大家可用于 畢業設計

2 簡介

這次學長給大家介紹的是一個比較簡單的小應用事項助手，其實跟事項也不沾多少邊，只是作為輔助功能，只有數據的添加和刪除，主要內容是日歷這塊內容。日歷組件在web應用中應用非常廣泛，插件也非常豐富，但是小程序不支持傳統的插件寫法，而是以數據驅動內容。

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

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

實現效果如下

3 部分實現步驟與代碼

3.1 對象方法屬性

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

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

現在換做ES6的寫法，我們可以這樣：

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

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

class關鍵字用于聲明類，constructor是構造函數，static修飾靜態方法。不能理解？我們看一下以前的js的簡單寫法：

class Animal {constructor() {}eat() {}static doSomething(param) {//...} }module.exports = Animal;var Animal = function() {};Animal.prototype.eat = function() {};Animal.doSomething = function(param) {};module.exports = Animal;let animal = new Animal(); animal.eat(); //靜態方法 Animal.doSomething('param');

3.2 箭頭函數（Arrow Function）

箭頭函數簡化了函數的寫法，但是還是跟普通的function有區別，主要是在作用域上。

比如我們需要請求網絡：

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

用函數還是可以簡化一定的代碼量

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

注意到那個success指向的回調函數了么，function關鍵字沒了，被醒目的=>符號取代了。看到這里大家是不是認為以后我們寫function就用箭頭函數代替呢？答案是不一定，而且要非常小心！

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

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

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

3.3 日歷

建立工程的步驟就不講了，直接進入主題，應用只有兩個頁面，一個首頁，一個詳情頁，結構清晰，功能簡單。

先來看看首頁，日歷的wxml結構;

結構分為上中下三部分，header為頭部，用于展示翻頁按鈕和當前日期信息。在.week.row和.body.row元素中展示星期和天數列表，這里的布局采用了比較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屬性，這兩個屬性是臨時存值，當點擊按鈕翻頁的時候，我們需要知道當前的年份和日期，以便可以更加方便地翻到上一頁或者下一頁。

changeDateEvent事件比較簡單：

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

點擊翻頁按鈕，根據回調進來的event對象來獲取元素上的data-*屬性，然后調用changeDate這個方法來更新日歷數據，這個方法接收一個Date對象，代表要翻頁后的日期。

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

dateClickEvent事件其實也是調用了changeDate事件，本質上也是也是改變日期，額外的工作就是保存選中的日期到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函數，這個函數的代碼比較多，雖然堆砌大量在一個函數中是個不好的習慣，不過里面聲明變量和賦值比較多，業務代碼比較少：

/*** 變更日期數據* @param {Date} targetDate 當前日期對象*/ function changeDate(targetDate) {let date = targetDate || new Date();let currentDateObj = new Date();let showMonth, //當天顯示月份showYear, //當前顯示年份showDay, //當前顯示星期showDate, //當前顯示第幾天showMonthFirstDateDay, //當前顯示月份第一天的星期showMonthLastDateDay, //當前顯示月份最后一天的星期showMonthDateCount; //當前月份的總天數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(); //當前顯示月份第一天的星期date.setDate(showMonthDateCount);showMonthLastDateDay = date.getDay(); //當前顯示月份最后一天的星期 let beforeDayCount = 0,beforeYear, //上頁月年份beforMonth, //上頁月份afterYear, //下頁年份afterMonth, //下頁月份afterDayCount = 0, //上頁顯示天數beforeMonthDayCount = 0; //上頁月份總天數//上一個月月份beforMonth = showMonth === 1 ? 12 : showMonth - 1;//上一個月年份beforeYear = showMonth === 1 ? showYear - 1 : showYear;//下個月月份afterMonth = showMonth === 12 ? 1 : showMonth + 1;//下個月年份afterYear = showMonth === 12 ? showYear + 1 : showYear;//獲取上一頁的顯示天數if (showMonthFirstDateDay != 0)beforeDayCount = showMonthFirstDateDay - 1;elsebeforeDayCount = 6;//獲取下頁的顯示天數if (showMonthLastDateDay != 0)afterDayCount = 7 - showMonthLastDateDay;elseshowMonthLastDateDay = 0;//如果天數不夠6行，則補充完整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(), //當天日期第幾天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,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++;}}//當前月份的日期for (let cIdx = 1; cIdx <= showMonthDateCount; cIdx++) {dates.push({_id: _id,active: (selected['year'] == showYear && selected['month'] == showMonth && selected['date'] == cIdx), //選中狀態判斷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); }

4 最后

總結

以上是生活随笔為你收集整理的【毕业设计】基于微信小程序的备忘录记事助手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。