备忘录，番茄钟，复盘反馈的学习类小程序

寒假完成的一个项目，对javascript真的是从零开始学起不过很好上手，借助于方便的云开发，也不用折腾后端，最后也顺利结题了。

本项目开发了一款软件，帮助大学生制作定制的学习计划，改善学习习惯，提高学习效率；用手机做一些有意义的事情，减少拖延，合理使用手机，提高时间利用率；制作定制的学习计划，改变学生学习习惯，提高学习效率。本软件旨在帮助使用者规划时间，充分利用但又防止过度沉迷手机。

考虑到微信使用率高，为便于使用者使用，将该软件设计于微信小程序平台，以小程序的形式供使用者使用。

主要功能是

1.备忘录

点击该按钮后，跳转至我的待办页面，使用者可以通过滑动时间轴来查看过去和现在的待办；点击右下方的“+”图标，即可添加今日待办

主要原理是用listView创建备忘录，增删改查用云函数的database就很好实现

编辑页面 wxml

</view>

</picker>

</view>

</view>

</view>

</picker>

</view>

</view>

</picker>

</view>

</view>

</view>

</view>

编辑页面 js

Page({

/**

* 页面的初始数据

data: {

dealtType: ['工作', '会议', '发呆', '出行','学习','跑步','其它'],

date: '2021-01-21',

time: '12:01',

dealTypeTxt: '学习',

title: '',

address: '',

remarks: ''

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

console.log('todoAdd:', options.id)

let id = options.id,

cDate=dateFormater('YYYY-MM-DD');

this.setData({

todoId:id,

date:cDate

})

if (id) {

wx.setNavigationBarTitle({

title: '编辑待办'

})

this.getTodo();

}

getTodo() {

let db = wx.cloud.database();

db.collection('todos').doc(this.data.todoId).get().then(res => {

console.log('编辑待办数据：', res.data);

let {

dealtType,

date,

time,

title,

address,

remarks

} = res.data;

this.setData({

date,

time,

dealTypeTxt: dealtType,

title,

address,

remarks

})

bindPickerChange: function (e) {

console.log('类型：', e.detail.value)

this.setData({

dealTypeTxt: this.data.dealtType[e.detail.value]

})

bindDateChange: function (e) {

console.log('日期：', e.detail.value)

this.setData({

date: e.detail.value

})

bindTimeChange: function (e) {

console.log('时间：', e.detail.value)

this.setData({

time: e.detail.value

})

titleInput(e) {

let inputVal = e.detail.value;

this.setData({

title: inputVal

})

addressInput(e) {

let inputVal = e.detail.value;

this.setData({

address: inputVal

})

remarksInput(e) {

let inputVal = e.detail.value;

this.setData({

remarks: inputVal

})

confirmBtn() {

let data = {

dealtType: this.data.dealTypeTxt,

title: this.data.title,

date: this.data.date,

time: this.data.time,

address: this.data.address,

remarks: this.data.remarks,

done: false

db = wx.cloud.database(),

todoId = this.data.todoId;

console.log(data)

if (todoId) {

db.collection('todos').doc(todoId).update({

data

}).then(res => {

wx.showToast({

title: '编辑成功',

})

setTimeout(() => {

wx.navigateBack({

delta: 1,

})

}, 1000);

})

} else {

db.collection('todos').add({

data: data

}).then(res => {

console.log('创建待办：', res);

wx.showToast({

title: '创建成功',

})

setTimeout(() => {

wx.navigateBack({

delta: 1,

})

}, 1000);

})

}

/**

* 生命周期函数--监听页面显示

onShow: function () {

})

//格式化日期或获取当前日期

function dateFormater(formater, t) {

let date = t ? new Date(t) : new Date(),

Y = date.getFullYear() + '',

M = date.getMonth() + 1,

D = date.getDate(),

H = date.getHours(),

m = date.getMinutes(),

s = date.getSeconds();

return formater.replace(/YYYY|yyyy/g, Y)

.replace(/YY|yy/g, Y.substr(2, 2))

.replace(/MM/g, (M < 10 ? '0' : '') + M)

.replace(/DD/g, (D < 10 ? '0' : '') + D)

.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)

.replace(/mm/g, (m < 10 ? '0' : '') + m)

.replace(/ss/g, (s < 10 ? '0' : '') + s)

}

2.四六级专场部分

点击该按钮后，跳转至四六级专场页面。四六级专场页面的左上方为个人信息，显示了微信用户的昵称和头像；右上方为一句鼓励的话语，“Be the master of our sea!”。点击用户头像后，小程序会跳转至总结页面。

四六级专场页面中间为全国大学英语四六级考试内容模块：背单词、听力、阅读、写作与翻译，使用者可以分别点击四个栏目，填写学习计划与实际情况，在每个页面的下方设计了可视化结果，用点亮果实的方式进行学习记录。

这个主要是借鉴了美食评分打星。

3.我的学习反馈部分

四六级专场按钮位于学习计划页面的中间区域，在矩形框中间显示“四六级专场”，如图4.14所示。点击我的学习反馈文字或恐龙图标即跳转我的总结专注统计页面，如图4.15所示，点击“我的复盘”，即进入复盘反馈部分（见后）。

3.专注番茄钟

进入专注事件后，该页面会根据之前所选的时间进行倒计时。页面的中间为倒计时显示，中下方有暂停按钮，专注时间暂停。点击继续按钮，倒计时继续；点击退出按钮，返回专注时间页面。

这个是图形，渲染一个圆环，并且写一个时间的函数在上面用另一种颜色叠加渲染，形成计时的效果。

4.今日复盘

点击今日复盘按钮后，跳转至问卷复盘页面，使用者填写问卷后，即得到当日学习反馈。

为了保证对应选项，对应跳转，用了非常不智能的onclick函数

<open-data type="userAvatarUrl"></open-data>

</view>

<text class="msg">,恭喜你今天已经完成学习计划！</text>

</view>

<text>今天你的学习效率还不错，要继续加油哦(ง •_•)ง</text>

</view>

可能比较值得说的是他的渲染，渐变的还挺好看

page{

background: whitesmoke;

}

.head{

width: 732rpx;

height: 532rpx;

background-size: 100% 100%;

}

.head_msg_bg{

display: flex;

flex-direction: row;

justify-content: center;

padding-top: 40rpx;

padding-left: 15rpx;

width:732rpx;

height: 124rpx;

background-size: 100% 100%;

position: absolute;

top: 70rpx;

left: 10rpx;

box-sizing: border-box;

}

.user{

width: 50rpx;

height: 50rpx;

border-radius: 50%;

overflow: hidden;

}

.msg{

font-size: 40rpx;

color: rgb(0, 0, 0);

}

/* 标题框 */

.btn {

display: inline-block;

margin-top: 200rpx;

margin: 20px;

padding: 1em 2em;

background: transparent;

border: 2px;

border-radius: 3px;

font-weight: 400;

text-align: center;

box-shadow: 0px 2px 4px #ffe75e,0px 1px 2px #00ff4c;

}

.btn text {

color: #000;

}

备忘录，番茄钟，复盘反馈的学习类小程序相关推荐

[DIY]基于RT-Thread的辉光管语音番茄钟
优先查看语雀,后面也会优先更新语雀前期规划能用国产就先用国产. 两个带小数点的IN12辉光管,可插拔设计,坏了方便换. 三路TYPE-C直插供电,可以在背后插也可以在侧面插. 支持WIFI对时,使 ...
小程序 a标签_微慕WordPress小程序增强版V2.0新版上线
2020年7月10日,我进行了一场微信小程序的直播,直播主题:微慕小程序增强版v2.0版新功能说明, 在直播里对微慕增强版v2.0版全面阐述了新版本增加的功能. 微慕小程序增强版定位是使用wordpr ...
反算坐标方位角小程序（c#）
反算坐标方位角小程序本人是测绘工程专业大二学生,这学期学了C#面向对象程序设计.计算方位角在平差工作中挺繁多,本人有一点小想法就编了一个反算(知道坐标,算方位角)坐标方位角的小程序.现在发到这里,虽 ...
【计算机毕业设计】基于微信小程序的社区疫情防控系统
毕设帮助.源码交流.技术解答,联系方式见文末小程序社区疫情防控系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好 ...
社区购物、社区买菜小程序源码
社区购物小程序最近各种小程序充斥整个微信社区,垃圾分类.图像识别.闲着无聊参考橙心优选小程序编写了简洁版的社区购物小程序(不喜勿喷哦); -------底部附上小程序源码-------- 首页界面, ...
基于微信小程序社区疫情防控系统
基于微信小程序社区疫情防控系统小程序社区疫情防控系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用 ...
基于微信小程序社区疫情防控系统 uniapp
小程序社区疫情防控系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要 ...
小程序项目：基于微信小程序社区疫情防控系统——计算机毕业设计
项目介绍小程序社区疫情防控系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到 ...
微信小程序社区疫情防控+后台管理系统|前后分离VUE
<微信小程序社区疫情防控+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...

备忘录，番茄钟，复盘反馈的学习类小程序

备忘录，番茄钟，复盘反馈的学习类小程序相关推荐

最新文章

热门文章