小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现

前言

  四个月前提起兴趣发表的这篇博客，两天劲头就过了，写的也是乱七八糟的，这次想真正的把博客建立起来，第一步要做的事情就是把这篇博客好好的改善一下，给过去一个好的交代，给未来一个好的开始。万事开头难，这次一定坚持下去。

 

一、功能演示说明

 先详细的展示功能图片以及功能说明，以确保大家看到这里能确定功能是否是自己想要的。这是一个可以实现课程表、食谱等一些功能的周日历，并且注意这是一个【组件】，同时我也建议把这种功能写成组件化，方便复用。

        具体的功能，我们可以点选日期获得该日期的详细标志，例如我们点了如下图所示的’2018-12‘的周二，在我们的调用界面中的js代码中回调方法就可以获取到该日的具体日期数值。   点击上一周下一周可以切换周，并且不是本周时默认选中值为周一，回到本周时，默认选中值为当日日期。    
图中一些其它的东西，设置  加号大家可以忽略，这是在工作中涉及到的其它关于食谱的功能。只要知道在下面该组件的代码中不会有这些额外的东西存在。

 

二、组件代码分段说明

    为了清晰，这里详细说明文涉及件名称，和每个文件内容的详情，以及写代码时的思路。尽量做到代码直接复制出去是可用的。也可以提供一些思路供大家参考，然后可以自己实现该功能。

时间工具

 写这个功能时为了分割开逻辑和布局，我首先想到用一个日期时间工具类来完成日期数据的处理。这里处理方式并不复杂，简单的一个方法，为界面提供了想要的展示数据。   

        看到下面代码貌似有点多，不要慌，里面包含我后续一些工具方法放在里面，实际在该组件中产生用到的只有【第一个方法】，没错就只有第一个方法，整理了时间数据。这里也写了详细的代码说明，就是获取周和日的对应列表，以便对应的每个item里显示周几，和几号的信息。在使用该类方法时记得引用（例 ：var util = require("../../utils/time-utils.js") ）根据你的类对应的路径
 

/**
 * 获取该周的所要显示的周和日期的对应数据，数据结构如下
 * var weekDay = {week: '',day: ''}
 * 参数：selectWeek  0为本周，数字代表前几周或者后几周，例如1是下一周
 */
function getWeekDayList(selectWeek) { 
  // 1.获取周一对应得时间
  // 2.用循环七次添加周一到周日对应得周几和几号
  var selectWeekTime = getCurrentTimeStamp() + (selectWeek * 7) * 24 * 60 * 60 * 1000
  var mondayTime = selectWeekTime - (getWeekNumber(selectWeekTime) - 1) * 24 * 60 * 60 * 1000
  var timeBean = {
    selectDay: 0,
    yearMonth: '',
    weekDayList: []
  }
 
  for (var i = 0; i < 7; i++) {
    var weekDay = {
      week: '',
      day: '',
      ymonth:''
    }
    weekDay.week = getWeek(mondayTime + i * 24 * 60 * 60 * 1000)
    weekDay.day = getMyDay(mondayTime + i * 24 * 60 * 60 * 1000)
    weekDay.ymonth = getYearMonth(mondayTime + i * 24 * 60 * 60 * 1000)
    timeBean.weekDayList.push(weekDay)
  }
 
  timeBean.yearMonth = getY