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

开发步骤

一、创建小程序

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

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

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

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

二、功能实现

2.1、首页

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

2. 在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
    }

3. 在页面底部提供两个设置时间任务的入口一个用于工作一个用于休息。

	<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>

4. 绑定对应的点击事件点击时动态修改class样式并将记录存到小程序缓存中。

  saveLog: function(log) {
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(log)
    wx.setStorageSync('logs', logs)
  }

2.2、记录页

1. 记录页只需要操作在首页存入的缓存即可对数据进行读取跟删除操作。

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>

3. 清除缓存

	<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、设置页

1. 设置页主要通过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>

2. 给slider标签绑定bindchange事件当拖拽滚动条时对其赋值。

  changeWorkTime: function(e) {
  	wx.setStorage({
  		key: 'workTime',
  		data: e.detail.value
  	})
  },

3. 同时设置最小值以及最大值

	  <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>

4. 将设置的时长存入缓存后在主页进行读取

   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'
    })

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