长春微信小程序开发常用微信小程序下订单件插（日历）

最近做小程序开发，出于练手，也是工作需要，就做了个微信小程序的类似于酒店预订的日历插件。 
先上图；

  这个插件分为上下两部分，上边是tab栏，会根据当前的日期自动定位到当前，并展示以后7天的日期，下边为内容展示，随tab栏变化而变化。
  思路：
  首先用new Data()时间对象初始化时间，获取当前的日期，用new Date(Date.UTC(year, month - 1, 1)).getDay()获取每个月的第一天是星期几。
  1.// 计算每月第一天是星期几
  2.function getFirstDayOfWeek(year, month) {
  3.return new Date(Date.UTC(year, month - 1, 1)).getDay();
  4.}
  5.const date = new Date();
  6.const cur_year = date.getFullYear();
  7.const cur_month = date.getMonth() + 1;
  8.const cur_date=date.getDate();
  9.const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];

  利用构造函数生成数据，一会用。

  1.//利用构造函数创建对象
  2.function calendar(date,week){
  3.this.date=cur_year+'-'+cur_month+'-'+date;
  4.if(date==cur_date){
  5.this.week = "今天";
  6.}else if(date==cur_date+1){
  7.this.week = "明天";
  8.}else{
  9.this.week = '星期' + week;
  10.}
  11.}

  使用for循环生成json数据：

  1.for(var i=1;i<=monthLength;i++){
  2.//当循环完一周后，初始化再次循环
  3.if(x>6){
  4.x=0;
  5.}
  6.//利用构造函数创建对象
  7.that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
  8.x++;
  9.}

  这里因为一周有7天，所以当x>6的时候，重置为0。
  最后展示部分源码

  1.var that=this;
  2.function getThisMonthDays(year, month) {
  3.return new Date(year, month, 0).getDate();
  4.}
  5.// 计算每月第一天是星期几
  6.function getFirstDayOfWeek(year, month) {
  7.return new Date(Date.UTC(year, month - 1, 1)).getDay();
  8.}
  9.const date = new Date();
  10.const cur_year = date.getFullYear();
  11.const cur_month = date.getMonth() + 1;
  12.const cur_date=date.getDate();
  13.const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
  14.//利用构造函数创建对象
  15.function calendar(date,week){
  16.this.date=cur_year+'-'+cur_month+'-'+date;
  17.if(date==cur_date){
  18.this.week = "今天";
  19.}else if(date==cur_date+1){
  20.this.week = "明天";
  21.}else{
  22.this.week = '星期' + week;
  23.}
  24.}
  25.//当前月份的天数
  26.var monthLength= getThisMonthDays(cur_year, cur_month)
  27.//当前月份的第一天是星期几
  28.var week = getFirstDayOfWeek(cur_year, cur_month)
  29.var x = week;
  30.for(var i=1;i<=monthLength;i++){
  31.//当循环完一周后，初始化再次循环
  32.if(x>6){
  33.x=0;
  34.}
  35.//利用构造函数创建对象
  36.that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
  37.x++;
  38.}
  39.//限制要渲染的日历数据天数为7天以内（用户体验）
  40.var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7  that.data.calendar.length:7)
  41.that.setData({
  42.calendar: flag
  43.})
  44.//设置scroll-view的子容器的宽度
  45.that.setData({
  46.width: 186 * parseInt(that.data.calendar.length - cur_date <= 7  that.data.calendar.length : 7)
  47.})