微信小程序｜使用小程序制作一个时间管理小工具

适时而学，适时而息，张弛有度的生活态度才能让我们走得更远。此文使用小程序制作一个日程管理小工具，将时间进行分解以实现有效管理。

开发步骤
- 一、创建小程序
- 二、功能实现
- - 2.1、首页
  - 2.2、记录页
  - 3.3、设置页

开发步骤

一、创建小程序

访问微信公众平台，点击账号注册。

选择小程序，并在表单填写所需的各项信息进行注册。

在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。

下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。

二、功能实现

2.1、首页

小程序需要实现三个页面，分别展示时间秒表、任务记录、时长设置。在pages文件夹再创建两个文件夹以及对应的page。

在index页面使用setInterval函数实现一个时间倒计时的样式及效果。

    let startTime = Date.now()let isRuning = this.data.isRuninglet timerType = e.target.dataset.typelet showTime = this.data[timerType + 'Time']let keepTime = showTime * 60 * 1000let 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) returnlet workTime = util.formatTime(wx.getStorageSync('workTime'), 'HH')let restTime = util.formatTime(wx.getStorageSync('restTime'), 'HH')this.setData({workTime: workTime,restTime: restTime,remainTimeText: workTime + ':00'})

有时间的小伙伴可以增加一些主页背景设置或者铃声提醒等功能。

微信小程序｜使用小程序制作一个时间管理小工具相关推荐

Moment.js插件学习:制作一个时间显示小案例
插件地址:http://momentjs.cn/ Moment.js是一个原生JavaScript 日期处理类库,使用起来也非常简单.但是注意它所得到的结果都是一个字符串,并且可以改变时间显示的格式. ...
微信小程序｜基于小程序+C#制作一个考试答题小程序
基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题,使考试不用再局限与某个统一的场所,只要有设备,哪里都能考试. 一.小程序
微信小程序｜使用小程序制作一个世界杯球员识别工具
一.前言二.实现流程三.功能开发四.代码块一.前言四年一次的世界杯正在卡塔尔进行着,不同的社交圈也在疯狂的刷着世界杯的动态,来自全球各地的三十二支队伍的球员是否让你看的眼花缭乱呢? 当朋友跟 ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
基于Java+SpringBoot制作一个校园圈子小程序
制作一个校园圈子小程序,有效连接信息供需双方,用户可获取和发布需求信息.参与互动交流,适用于同校.同城.社区交流.客户互动.同学/老师注册发布信息等场景. 微信小程序实战开发专栏一.小程序 1.1 ...
java聊天室小程序论文_在Java项目中利用continue与break制作一个聊天室小程序
在Java项目中利用continue与break制作一个聊天室小程序发布时间:2020-12-08 16:03:27 来源:亿速云阅读:98 作者:Leah 在Java项目中利用continue与 ...
C语言时间管理小程序,写了一个时间管理的微信小程序
原标题:写了一个时间管理的微信小程序前言以前看过<把时间当作朋友>这本书,里面有个管理时间的观点个人觉得很有用,就是养成记录自己每天的时间消耗的一个习惯,这样有助于更有效地管理自己的时 ...
【python】制作一个点单小程序！
周末总是在吃的方面,及其纠结,今天来制作一个点单小程序,加入自己喜欢吃的东西,来慢慢挑选,让每个周末快乐无限! 一.安装环境 python 3.7.8 QT xlrd.xlwt库使用pip接口进行安装 ...
python打字_使用Python制作一个打字训练小工具
一.写在前面说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...

微信小程序｜使用小程序制作一个时间管理小工具

开发步骤

一、创建小程序

二、功能实现

2.1、首页

2.2、记录页

3.3、设置页

微信小程序｜使用小程序制作一个时间管理小工具相关推荐

最新文章

热门文章