学校有一个小程序比赛跟两个同学一起合作写的小程序。说实话，学习小程序的开始时间应该比其他同学都要久一点，但是学习能力还是比较弱，有个同学学习一个月已经能基本一个人完成一个小程序。而我却还是很多地方都不懂。
学习能力一直很让人捉急，但是希望可以坚持下去。
回到正题，我们这次做的小程序叫做咕咕备忘录，是一个用来记录自己平时容易忘记ddl的备忘录。这个小程序可以对你记录的任务进行排序，让你优先处理一些任务。我主要负责任务登记的页面，把任务参数通过数组传出来（是组内大神教我的）。
备忘录主页面：
我写的任务页面：
任务页面代码：小程序主函数代码还是使用JavaScript编写的，像我写的这个任务页面代码，主要使用JavaScript编写。基本上都是一些获取用户在输入界面编写的文字。以及选择日期任务类型。
task.js
全局定义变量，用于后面获取日期年份
扫描二维码关注公众号，回复：
864821 查看本文章
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>
添加任务后页面：
这次就先写这么多，下次有时间把其他页面的也会写上来。