小程序——咕咕咕

  学校有一个小程序比赛跟两个同学一起合作写的小程序。说实话，学习小程序的开始时间应该比其他同学都要久一点，但是学习能力还是比较弱，有个同学学习一个月已经能基本一个人完成一个小程序。而我却还是很多地方都不懂。

学习能力一直很让人捉急，但是希望可以坚持下去。

回到正题，我们这次做的小程序叫做咕咕备忘录，是一个用来记录自己平时容易忘记ddl的备忘录。这个小程序可以对你记录的任务进行排序，让你优先处理一些任务。我主要负责任务登记的页面，把任务参数通过数组传出来（是组内大神教我的）。

备忘录主页面：

我写的任务页面：

任务页面代码：小程序主函数代码还是使用JavaScript编写的，像我写的这个任务页面代码，主要使用JavaScript编写。基本上都是一些获取用户在输入界面编写的文字。以及选择日期任务类型。

task.js

全局定义变量，用于后面获取日期年份

const date = new Date()
const years = []
const months = []
const days = []

const app = getApp()

var timestamp = Date.parse(new Date());
var adate = new Date(timestamp);
//年  
//var Y = adate.getFullYear();

//月  
var M = (adate.getMonth() + 1 < 10 ? '0' + (adate.getMonth() + 1) : adate.getMonth() + 1);
M = parseInt(M);
console.log(M);
//日  
var D = adate.getDate() < 10 ? '0' + adate.getDate() : adate.getDate();
D = parseInt(D);


var getDay = function (arrEnd) {       //计算日子
  var timestamp = Date.parse(new Date());
  var endTime = '' + arrEnd[0] + '-' + arrEnd[1] + '-' + arrEnd[2] + ' 00:00:00';
  var timestamp2 = Date.parse(new Date(endTime));
  timestamp /= 1000;
  timestamp2 /= 1000;
  var spaceTime = (timestamp2 - timestamp) / 60 / 60 / 24;
  return Math.ceil(spaceTime);   //向上取整
}

var sortTask = function (a, b) {
  return a.spaceTime - b.spaceTime;
}

for (let i = 2010; i <= date.getFullYear(); i++) {
  years.push(i)
}
for (let i = 1; i <= 12; i++) {
  months.push(i)
}
for (let i = 1; i <= 31; i++) {
  days.push(i)
}
// for (let i = 0; i < 5; i++) {

//   tasks[i];
// }

定义各个函数具体用到的变量，并赋予初始值：

// pages/task/task.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: date.getMonth()+1,
    days: days,
    day: date.getDate(),
    value: [date.getFullYear(), date.getMonth(), date.getDate()- 1],
    taskNames: '',
    taskDetails: '',
    endTime: '',
    spaceTime: '',
    array: ['生活', '学习', '工作', '娱乐', '其他'],
    objectArray: [
      {
        id: 1,
        name: '生活'
      },
      {
        id: 2,
        name: '学习'
      },
      {
        id: 3,
        name: '工作'
      },
      {
        id: 4,
        name: '娱乐'
      },
      {
        id:5,
        name:'其他'
      }
    ],
    index: 1,
    taskType:'',
  },

 

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  

  },

  onshow:function(){
  },
//设置函数获取任务类型，任务类型以数组形式存储
  taskType: function (e) {
    console.log('taskType发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value,
    })
  },
//任务的名字，获取用户输入的任务名字
  taskName: function (e) {
   
    this.setData({
      taskNames: e.detail.value
    })
  },
//任务详情，用户自己输入的
  taskDetail: function (e) {
    this.setData({
      taskDetails: e.detail.value
    })
  },
//年月日的选择，作为截止日期
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]] ,
      month: this.data.months[val[1]],
      day: this.data.days[val[2]] ,

    })

  },

//OK键按钮，按下触发，将任务类型、任务名称、任务详情、截止日期以数组的形式传出
  okTask: function () {
    
    var getDays = [this.data.year, this.data.month, parseInt(this.data.day)]
    var spaceTime=getDay(getDays)

    console.log(this.data.taskDetails)
    var item = {
      listId: getApp().globalData.listNum,
      taskName: this.data.taskNames,
      taskDetail: this.data.taskDetails,
      endTime:spaceTime,
      createTime: [date.getFullYear(), M, D],
      spaceTime: getDay(getDays),
      taskType:this.data.index
      
      
    }


    getApp().globalData.listNum++;
    console.log(getApp().globalData.listNum)
    getApp().globalData.arraylist.push(item);  //加入list

    getApp().globalData.arraylist.sort(sortTask);

    wx.navigateBack({
      url: '/pages/index/index',
      success: function (res) {
      }
    })

  }
})

对应的wxml的代码（wxml是小程序中特有的语言，类似于html）

<!--pages/task/task.wxml-->
<view class='page'>
  <view class='section'>
    <view class='input-area'>
      <input class='input' name="taskName" placeholder='任务名称' maxlength='15' placeholder-style='color: black;' id="taskName" bindinput='taskName' auto-focus></input>
    </view>
  </view>

  <view class='section'>
    <view class='txt-area'>

      <textarea class='input' name="taskDetail" placeholder='详情描述(0-300)字' maxlength='300' placeholder-style='color: black;' id="taskDetail" bindinput='taskDetail' show-confirm-bar ></textarea>


    </view>
    
  </view>

  <view class="selectTime">
    <view class="task-type"></view>
    <picker bindchange="taskType" value="{{index}}" range="{{array}}">
      <view class="picker" >
        任务类型:{{array[index]}}
        
      </view>
    </picker>
  </view>
  <view class='selectTime'>
    <text style='color:white;'> 任务结束时间</text>
    <picker-view indicator-style="height: 50px; text-align:center;" style="width: 100%; height: 50px; margin-top:20px;" value="{{value}}" bindchange="bindChange" mask-style='width:0px;' id='end'>
      <picker-view-column>
        <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
      </picker-view-column>
    </picker-view>
  </view>

  <view class='section' color='gainsboro'>
    <button bindtap='okTask'> 确定 </button>
  </view>
</view>

添加任务后页面：

这次就先写这么多，下次有时间把其他页面的也会写上来。