适时而学，适时而息，张弛有度的生活态度才能让我们走得更远。此文使用小程序制作一个日程管理小工具，将时间进行分解以实现有效管理。
开发步骤
一、创建小程序
- 访问微信公众平台，点击账号注册。
- 选择小程序，并在表单填写所需的各项信息进行注册。
- 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。
- 下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。
二、功能实现
2.1、首页
- 小程序需要实现三个页面，分别展示时间秒表、任务记录、时长设置。在pages文件夹再创建两个文件夹以及对应的page。
- 在index页面使用setInterval函数实现一个时间倒计时的样式及效果。
let startTime = Date.now()
let isRuning = this.data.isRuning
let timerType = e.target.dataset.type
let showTime = this.data[timerType + 'Time']
let keepTime = showTime * 60 * 1000
let logName = this.logName || defaultLogName[timerType]
if (!isRuning) {
this.timer = setInterval((function() {
this.updateTimer()
this.startNameAnimation()
}).bind(this), 1000)
} else {
this.stopTimer()
}
this.setData({
isRuning: !isRuning,
completed: false,
timerType: timerType,
remainTimeText: showTime + ':00',
taskName: logName
})
this.data.log = {
name: logName,
startTime: Date.now(),
keepTime: keepTime,
endTime: keepTime + startTime,
action: actionName[isRuning ? 'stop' : 'start'],
type: timerType
}
- 在页面底部提供两个设置时间任务的入口，一个用于工作，一个用于休息。
<view class="timer_footer">
<view
bindtap="startTimer"
data-type="work"
class="timer_ctrl " >工作</view>
<view
bindtap="startTimer"
data-type="rest"
class="timer_ctrl" >休息</view>
</view>
- 绑定对应的点击事件，点击时动态修改class样式并将记录存到小程序缓存中。
saveLog: function(log) {
var logs = wx.getStorageSync('logs') || []
logs.unshift(log)
wx.setStorageSync('logs', logs)
}
2.2、记录页
- 记录页只需要操作在首页存入的缓存即可，对数据进行读取跟删除操作。
- 读取缓存
getLogs: function() {
let logs = wx.getStorageSync('logs')
logs.forEach(function(item, index, arry) {
item.startTime = new Date(item.startTime).toLocaleString()
})
this.setData({
logs: logs
})
},
<scroll-view class="container" scroll-y="true">
<view class="log panel">
<view class="log_item" wx:for="{
{logs}}" wx:for-index="$index" wx:for-item="log">
<text class="log_start">{
{
log.startTime}}</text>
<text class="log_action">{
{
log.action}}</text>
<text class="log_action">{
{
log.name}}</text>
</view>
</view>
</scroll-view>
- 清除缓存
<view class="clear">
<button bindtap="switchModal" class="clear_btn" size="mini" >清除记录</button>
</view>
wx.setStorageSync('logs', [])
this.switchModal()
this.setData({
toastHidden: false
})
this.getLogs()
3.3、设置页
- 设置页主要通过slider滑动选择器实现对工作时长以及休息时长的配置。
<view class="section panel">
<text class="section_title">工作时长(分钟)</text>
<view class="section_body">
<slider
bindchange="changeWorkTime"
show-value="true"
value="{
{workTime}}"
left-icon="cancel"
right-icon="success_no_circle"/>
</view>
</view>
<view class="section panel">
<text class="section_title">休息时长(分钟)</text>
<view class="section_body">
<slider
bindchange="changeRestTime"
show-value="true"
value="{
{restTime}}"
left-icon="cancel"
right-icon="success_no_circle"/>
</view>
</view>
- 给slider标签绑定bindchange事件，当拖拽滚动条时对其赋值。
changeWorkTime: function(e) {
wx.setStorage({
key: 'workTime',
data: e.detail.value
})
},
- 同时设置最小值以及最大值
<view class="section_body">
<slider
bindchange="changeWorkTime"
show-value="true"
min="1"
max="60"
value="{
{workTime}}"
left-icon="cancel"
right-icon="success_no_circle"/>
</view>
- 将设置的时长存入缓存后，在主页进行读取
if (this.data.isRuning) return
let workTime = util.formatTime(wx.getStorageSync('workTime'), 'HH')
let restTime = util.formatTime(wx.getStorageSync('restTime'), 'HH')
this.setData({
workTime: workTime,
restTime: restTime,
remainTimeText: workTime + ':00'
})
- 有时间的小伙伴可以增加一些主页背景设置或者铃声提醒等功能。
