起步

搭建一个界面首先需要考虑由几部分组成。我分为三部分，一：头部滑块，二：中部内容，三：下部按钮

番茄时钟主要内容：滑块组件、Canvas绘制圆形、本地缓存数据

垃圾到死的源码奉上 密码: RHDA

组件滑块slider

基本属性，最小值min，最大值max，完成一次拖动触发事件bindchange

图标引用

我推荐阿里图标库，里面有很多图标，使用也方便

这是我的图标库素材链接，另外一种颜色的图标是多此一举，可以用color来更改图标颜色

1
2
3
4
.icon-eyes{
	color:red;
  /*即更改为红色*/
}

https://at.alicdn.com/t/font_2609951_mdh6mecbn8f.css?spm=a313x.7781069.1998910419.40&file=font_2609951_mdh6mecbn8f.css

滑块

1
2
3
4
5
<!-- 时间滑块 -->
<view class="index_slider">
  <slider min="1" max="60" show-value="{{true}}" bindchanging="handleSliderChange" 
  value="{{time}}" active-color="#f36d4c" background-color="#000000" />
</view>

show-value="{{true}}" 右侧显示滑块值

bindchanging="handleSliderChange" 绑定滑块事件，拖动即可触发事件

bindchange 拖动完成一次，触发一次。更节约性能

中间内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
data: {
       currentIndex:0,
       taskApp: [{
               id: 0,
               icon: 'icon-gongzuotai',
               name: '工作'
           },
           {
               id: 1,
               icon: 'icon-xuexi',
               name: '学习'
           },
           {
               id: 2,
               icon: 'icon-bulb-full',
               name: '思考'
           },
           {
               id: 3,
               icon: 'icon-xiezuozhuanxiangke',
               name: '写作'
           },
           {
               id: 4,
               icon: 'icon-yundong',
               name: '运动'
           },
           {
               id: 5,
               icon: 'icon-linedesign-14',
               name: '阅读'
           }
       ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<view class="index_content">
    <view class="content_title">
      <text>选择一个任务</text>
    </view>
    <view class="content_desc">
      <text>在接下来的{{time}}分钟内，您将专注完成这个任务</text>
    </view>
    <view class="content_app">
      <ul>
        <li class="{{currentIndex===index?'active':''}}" wx:for="{{taskApp}}" wx:key="item.id"
            bindtap="handleSelectActive" data-index="{{index}}">
          <span class="iconfont {{item.icon}}"></span>
          <!--根据是否选中，改变图标选中状态-->
          <!--其实阿里图标直接改color就可以更改颜色-->
          <text>{{item.name}}</text>
        </li>
      </ul>
    </view>
</view>

class="{{currentIndex===index?'active':''}}" 绑定active激活css，更改为选中状态时。点击选中改变currentIndex 为你的id值，因此默认第一个会是选中状态

wx:for="{{taskApp}}" 循环data中taskApp数组

wx:key="item.id" 绑定key，如果li标签少，可以wx:key="this"

data-index="{{index}}" 传输数据index到方法handleSelectActive里面

1
2
3
4
5
6
7
8
handleSelectActive(e) {
    const {index} = e.currentTarget.dataset
    // 上面写法 === const index = e.currentTarget.dataset.index
    this.setData({
         currentIndex: index,
      //改变currentIndex值，并渲染到Dom，通过获取当前点击的index值，来改变currentIndex值
    })
}

按钮

1
2
3
<view class="index_button">
      <view class="btn" bindtap="handleChangeHidden">开始专注</view>
</view>

Canvas绘制圆形

利用canvas绘制圆形，结合另一篇文章绘制静态圆

Canvas绘制 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var _this = this;
let timer = setInterval(() => {
    // 省略一部分
    if (currentTime % 1000 == 0) {
      // 该操作，每经过一秒钟进行setData，改变界面新数据
        let timeStr1 = currentTime / 1000 // 整秒数
        let timeMin = parseInt(timeStr1 / 60) //m
        let timeSec = timeStr1 % 60 //s
        _this.setData({
            timeStr: (timeMin >= 10 ? timeMin : '0' + timeMin) + ':' + 
          (timeSec >= 10 ? timeSec : '0' +  timeSec)
        })
    }
    if (angle < 3.5) {
      // 封装好的绘制圆方法
     this.drawYuan(this.data.lineWidth,'clock_active','#fff',400,1.5*Math.PI,angle*Math.PI)
              
    } else {
        
        // 在下面续写

}, 100)
//将timer方法存储在data中
//当点击暂停按钮时，如下
this.setData({
    timer
  // 等同于 timer:timer
})
1
2
3
4
5
6
7
8
9
10
11
handleStopChange() {
   this.setData({
       isBtn: !this.data.isBtn,
   })
   if (this.data.isBtn) {
     	//如果出去暂停状态，那么timer绘制方法也处于暂停状态
       clearInterval(this.data.timer);
   } else {
       this.drawAc();
   }
}

本地缓存数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
clearInterval(timer) //停止timer方法
let apps = wx.getStorageSync('apps') //命名一个app本地存储数据
apps.unshift({
    date: util.formatTime(new Date), // 时间
    currentTask: _this.data.currentTask, //任务app
    time: _this.data.time //专注时间
})//向apps数组前面插入数据
wx.setStorageSync('apps', apps) //存储

_this.setData({
    timeStr: '00:00',
    okShow: false
})

统计获取本地缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let apps = wx.getStorageSync('apps') || [] //获取apps本地缓存
let daynum = 0
let dayTime = 0
let totalnum = 0
let totalTime = 0
let sumTotal = []
if (apps.length > 0) {
    for (let i = 0; i < apps.length; i++) {
        if (apps[i].currentTask) {
          //因为的缓存有一些问题，我作了一些筛选
            sumTotal[sumTotal.length] = apps[i]
            if (apps[i].date.substr(0, 10) == util.formatTime(new Date).substr(0, 10)) {
                // 筛选出今天的
                daynum++;

                // 今天专注时间
                dayTime += apps[i].time;
            }
            totalnum++;
            totalTime += apps[i].time;
        }
    }
}

底部导航栏

在全局的app.json文件添加

tabBar 官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"tabBar": {
       "selectedColor": "#f36d4c", 
      "list": [{
        "pagePath": "pages/index/index",
        "text": "计时",
        "iconPath": "./Icon/clock.png",
        "selectedIconPath": "./Icon/clockA.png"
      },
      {
        "pagePath": "pages/statistics/statistics",
        "text": "统计",
        "iconPath": "./Icon/statistics.png",
        "selectedIconPath": "./Icon/statisticsA.png"
      }
    ]
},