注冊(cè)登錄

微信小程序日歷組件個(gè)人思路

2018-09-20
導(dǎo)讀:最近在做微信小程序項(xiàng)目,其中涉及到日歷。一直以來(lái),遇到日歷,就是網(wǎng)上隨便找個(gè)插件,這次心血來(lái)潮,想著自己去實(shí)現(xiàn)一下。這次不是封裝功能強(qiáng)大,健碩完美的 組件 ,只是記...

最近在做微信小程序項(xiàng)目,其中涉及到日歷。一直以來(lái),遇到日歷,就是網(wǎng)上隨便找個(gè)插件,這次心血來(lái)潮,想著自己去實(shí)現(xiàn)一下。這次不是封裝功能強(qiáng)大,健碩完美的組件,只是記錄一下,主體思路。更多功能還得根據(jù)項(xiàng)目需要,自己去挖掘、實(shí)現(xiàn)。

 

思路分析

  • 首先最主要的一點(diǎn),就是要計(jì)算出某年某月有多少天,其中涉及到大小月,閏、平年二月。

  • 其次,弄清楚每月一號(hào)對(duì)應(yīng)的是周幾。

  • 然后,有時(shí)為填充完整,還需顯示上月殘余天數(shù)以及下月開(kāi)始幾天,這些又該如何展示。

  • 最后,根據(jù)自己項(xiàng)目需求實(shí)現(xiàn)其它細(xì)枝末節(jié)。

    計(jì)算每月天數(shù)

    • 按照一般思路,[1,3,5,7,8,10,12]這幾個(gè)月是31天,[2,3,6,9,11]這幾個(gè)月是30天,閏年2月29天,平年2月28天。每次需要計(jì)算天數(shù)時(shí),都得如此判斷一番。方案可行,而且也是大多數(shù)人的做法。但是,這個(gè)方法,我卻覺(jué)得有些繁瑣。

    • 其實(shí)換一種思路,也未嘗不可。時(shí)間戳就是一個(gè)很好的載體。當(dāng)前月一號(hào)零時(shí)的時(shí)間戳,與下一月一號(hào)零時(shí)的時(shí)間戳之差,不就是當(dāng)前月天數(shù)的毫秒數(shù)嘛。

      // 獲取某年某月總共多少天
      getDateLen(year, month) { 
          let actualMonth = month - 1;
          let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
          return timeDistance / (1000 * 60 * 60 * 24);
      },
      復(fù)制代碼
    • 看到上述代碼,你可能會(huì)問(wèn),是不是還缺少當(dāng)月為12月時(shí)的特殊判斷,畢竟涉及到跨年問(wèn)題。當(dāng)然,你無(wú)需擔(dān)心,根據(jù)MDN中關(guān)于Date的表述,js已經(jīng)為我們考慮好了這一點(diǎn)

      當(dāng)Date作為構(gòu)造函數(shù)調(diào)用并傳入多個(gè)參數(shù)時(shí),如果數(shù)值大于合理范圍時(shí)(如月份為13或者分鐘數(shù)為70),相鄰的數(shù)值會(huì)被調(diào)整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1),它們都表示日期2014-02-01(注意月份是從0開(kāi)始的)。其他數(shù)值也是類(lèi)似,new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10),都表示時(shí)間2013-03-01T01:10:00。

      計(jì)算每月一號(hào)是周幾

      • 呃,這個(gè)就不需要說(shuō)了吧,getDay()你值得擁有

        // 獲取某月1號(hào)是周幾
        getFirstDateWeek(year, month) { 
            return new Date(year, month - 1, 1).getDay()
        },
        復(fù)制代碼

        每個(gè)月的數(shù)據(jù)如何展示

        • 如果只是簡(jiǎn)單展示當(dāng)月數(shù)據(jù),那還是很簡(jiǎn)單的,獲取當(dāng)月天數(shù),依次遍歷,就可以拿到當(dāng)月所有數(shù)據(jù)。

          // 獲取當(dāng)月數(shù)據(jù),返回?cái)?shù)組
          getCurrentArr(){ 
              let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 獲取當(dāng)月天數(shù)
              let currentMonthDateArr = [] // 定義空數(shù)組
              if (currentMonthDateLen > 0) {
                  for (let i = 1; i <= currentMonthDateLen; i++) {
          	    currentMonthDateArr.push({
          	        month: 'current', // 只是為了增加標(biāo)識(shí),區(qū)分上下月
                          date: i
                      })
                  }
              }
              this.setData({
              	currentMonthDateLen
              })
              return currentMonthDateArr
          },
          復(fù)制代碼
        • 很多時(shí)候,為了顯示完整,需要顯示上下月的殘余數(shù)據(jù)。一般來(lái)說(shuō),日歷展示時(shí),最大是7 X 6 = 42位,為啥是42位,呃,自己去想想吧。當(dāng)月天數(shù)已知,上月殘余天數(shù),我們可以用當(dāng)月1號(hào)是周幾來(lái)推斷出來(lái),下月殘余天數(shù),正好用42 - 當(dāng)月天數(shù) -上月殘余。

          // 上月 年、月
          preMonth(year, month) { 
              if (month == 1) {
          	return {
          	    year: --year,
          	    month: 12
          	}
              } else {
              	return {
          	    year: year,
          	    month: --month
              	}
              }
          },
          復(fù)制代碼
          // 獲取當(dāng)月中,上月多余數(shù)據(jù),返回?cái)?shù)組
          getPreArr(){ 
              let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 當(dāng)月1號(hào)是周幾 == 上月殘余天數(shù))
                  let preMonthDateArr = [] // 定義空數(shù)組
              if (preMonthDateLen > 0) {
          	let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 獲取上月 年、月
          	let date = this.getDateLen(year, month) // 獲取上月天數(shù)
          	for (let i = 0; i < preMonthDateLen; i++) {
          		preMonthDateArr.unshift({ // 尾部追加
                                  month: 'pre', // 只是為了增加標(biāo)識(shí),區(qū)分當(dāng)、下月
          		    date: date
                          })
          		date--
          	}
              }
              this.setData({
          	preMonthDateLen
              })
              return preMonthDateArr
          },
          復(fù)制代碼
          // 下月 年、月
          nextMonth(year, month) { 
              if (month == 12) {
          	return {
          	    year: ++year,
          	    month: 1
          	}
              } else {
          	return {
                      year: year,
          	    month: ++month
          	}
              }
          },
          復(fù)制代碼
          // 獲取當(dāng)月中,下月多余數(shù)據(jù),返回?cái)?shù)組
          getNextArr() { 
              let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天數(shù)
              let nextMonthDateArr = [] // 定義空數(shù)組
              if (nextMonthDateLen > 0) {
                  for (let i = 1; i <= nextMonthDateLen; i++) {
                      nextMonthDateArr.push({
                          month: 'next',// 只是為了增加標(biāo)識(shí),區(qū)分當(dāng)、上月
                          date: i
                      })
                  }
              }
              return nextMonthDateArr
          },
          復(fù)制代碼
        • 整合三組數(shù)據(jù),就得到了完整的當(dāng)月數(shù)據(jù),格式如下

          [
              {month: "pre", date: 30},
              {month: "pre", date: 31},
              {month: "current", date: 1},
              {month: "current", date: 2},
              ...
              {month: "current", date: 31},
              {month: "next", date: 1},
              {month: "next", date: 2}
          ]
          
重磅推薦:小程序開(kāi)店目錄

第一部分:小商店是什么

第二部分:如何開(kāi)通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣(mài)什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開(kāi)發(fā)

電話咨詢(xún) 微信咨詢(xún) 預(yù)約演示 0元開(kāi)店