微信小程序--实现番茄钟功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序--实现番茄钟功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

番茄钟：

经常使用番茄钟的各种app，自己也想尝试一下制作，该小程序主要实现了番茄时钟、效率统计等功能。

设计如下：

微信小程序--实现番茄钟功能

代码地址：https://gitcode.net/weiba_tao/mypractice

计时页面：

微信小程序--实现番茄钟功能

代码如下：

页面分为选择时间及任务页，倒计时页，两个页面用hidden进行切换

---wxml 选择页---

<view hidden="{{isClock}}" class="wrap">
    <view class="slider">
        <slider min="1" max="60" show-value activeColor="#FA8072" value="{{time}}" bindchange="slideChange"></slider>
    </view>
    <view class="text">
        <view class="text_title">请选择一个任务</view>
        <view class="text_desc">在接下来的{{time}}分钟，开始专注吧</view>
    </view>
    <view class="box_cate">
        <view wx:for="{{cateArr}}" class="cate_item" wx:key="cate">
            <view class="cate_img">
                <image src="../../images/{{item.icon}}.png" bindtap="buttonChange" data-icon-list="{{item.text}}"></image>
            </view>
            <view class="cate_text">{{item.text}}</view>
        </view>
    </view>
</view>

---wxml 倒计时页---

<view hidden="{{!isClock}}" class="clock">
    <view class="clock_text">{{clockText}}中...</view>
    <view class="count_down">
        <canvas type="2d" id="circle" class="circle" ></canvas>
        <canvas type="2d" id="circle_active" class="circle_active"></canvas>
        <view class="count_text">{{timeStr}}</view>
    </view>
    <view class="clock_button">
        <image src="../../images/pause.png" bindtap="handlePause" wx:if="{{playShow}}"></image>
        <image src="../../images/play.png" bindtap="handlePlay" wx:else ></image>
        <image src="../../images/suspend.png" bindtap="handleSuspend"></image>
    </view>
</view>

点击“自定义”任务按钮和倒计时中止按钮时，均会弹出弹窗

微信小程序--实现番茄钟功能

---js 弹窗---

    buttonChange(e){
        const iconList=e.currentTarget.dataset.iconList
        if(iconList==='自定义'){
            let _this=this
            wx.showModal({
                title: '自定义任务',
                editable:true,
                placeholderText:'请输入任务名称',
                confirmColor:'#FA8072',
                success (res) {
                  if (res.confirm) {
                    _this.setData({
                        clockText:res.content
                    })
                    _this.saveData()
                  }
                }
              })
        }else{
            this.setData({
                clockText:iconList
            })
            this.saveData()
        }
    },
    saveData(){
        this.setData({
            isClock:true,
            mTime:this.data.time*60*1000, //ms
            timeStr:parseInt(this.data.time) >= 10 ? this.data.time+ ":00" :"0" +this.data.time + ":00"
        })
        this.drawCircle()
        this.drawActive()
    },

//中止按钮
    handleSuspend(){
        clearInterval(this.data.timer);
        let _this=this
        wx.showModal({
            title: '提示',
            content:'确定中止任务吗？当前计时会立刻停止，并返回主界面',
            confirmColor:'#FA8072',
            success (res) {
              if (res.confirm) {
                _this.setData({
                    isClock:false,
                    playShow:true
                })
              }else if(res.cancel){
                _this.drawActive()
              }
            }
        })
    }

倒计时完成后会自动弹出弹窗提醒计时完毕，并返回主页，同时将此次数据上传存储

微信小程序--实现番茄钟功能

倒计时圆圈，利用小程序canvas画布绘制

drawActive(){
        let _this = this
        var timer =setInterval(()=>{
            let angle = 1.5 + 2*(_this.data.time*60*1000 - _this.data.mTime)/(_this.data.time*60*1000);
            let currentTime = _this.data.mTime - 100
            _this.setData({
                mTime:currentTime
            })
            if(angle<3.5){
                if(currentTime % 1000 == 0){
                    var timeStr1 = currentTime / 1000;//s
                    var timeStr2 = parseInt(timeStr1 / 60); //m
                    var timeStr3 = (timeStr1 - timeStr2 * 60) >= 10 ? (timeStr1 - timeStr2 * 60) :"0" +  (timeStr1 - timeStr2 * 60);
                    var timeStr2 = timeStr2 >= 10 ? timeStr2:"0" + timeStr2;
                    _this.setData({
                     timeStr:timeStr2 + ":" + timeStr3
                    })
                  };
                const lineWidth = 6 / _this.data.rate;//px
                const query = wx.createSelectorQuery()
                query.select('#circle_active')
                    .fields({ node:true, size: true})
                    .exec((res) => {
                    const canvas = res[0].node
                    const ctx = canvas.getContext('2d')
                    const dpr = wx.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr
                    ctx.scale(dpr, dpr)
                    ctx.lineCap='round'
                    ctx.lineWidth="lineWidth"
                    ctx.beginPath()
                    ctx.arc(400/_this.data.rate/2,400/_this.data.rate/2,400/_this.data.rate/2-2*lineWidth,1.5*Math.PI,angle*Math.PI,false)
                    ctx.strokeStyle ="#E7624F"
                    ctx.stroke()
                    })
            }else{
                //计时完成时
                wx.showModal({
                    title: '提示',
                    content:'当前计时已完成，将跳转回主界面',
                    showCancel:false,
                    confirmText:'好的',
                    confirmColor:'#FA8072',
                    success (res) {
                      if (res.confirm) {
                        var logs = wx.getStorageSync("logs") || [];
                        logs.unshift({
                            date: formatTime(new Date),
                            cate: _this.data.clockText,
                            time: _this.data.time
                        });
                        console.log(789,logs)
                        wx.setStorageSync('logs', logs); //存入缓存
                        _this.setData({
                            timeStr:"00:00",
                            playShow:false,
                            isClock:false
                         })
                      }
                    }
                })
                clearInterval(timer); 
            }    
        },100)
        _this.setData({
            timer :timer
        })    
    },

统计页面：

微信小程序--实现番茄钟功能

---wxml---

<view class="today">
    <view class="today_text">今日专注</view>
    <view class="today_wrap">
        <view wx:for="{{staList}}" class="staList" wx:key="staList">
            <view class="staList_title">{{item.title}}</view>
            <view class="staList_val">{{item.val}}</view>
        </view>
    </view>
</view>
<view class="altogether">
    <view class="al_text">累计专注</view>
    <view class="al_wrap">
        <view wx:for="{{allList}}" class="allList" wx:key="allList">
            <view class="al_title">{{item.title}}</view>
            <view class="al_val">{{item.val}}</view>
        </view>
    </view>
</view>

<view class="detail">
  <view class="detail_title">
    <view class="detail_title_text">分类统计</view>
    <view class="detail_title_type">
      <text class="{{activeIndex == 0 ? 'active':''}}" data-index="0" bindtap="changeType">今日</text>
      <text class="{{activeIndex == 1 ? 'active':''}}" data-index="1" bindtap="changeType">历史</text>
    </view>
  </view>

  <view class="detail_list" wx:if="{{list.length > 0}}">
    <view class="list_item" wx:for="{{list}}" wx:key="cate" >
        <view class="dotline">
            <view class="line"></view>
            <view class="dot"></view>
        </view>
        <view class="list_item_date">{{item.date}}</view>
        <view class="list_item_text">{{item.cate}}</view>
        <view class="list_item_time">{{item.time}}分钟</view>
        
    </view>
  </view>
</view>

---js---

主要在于用wx.getStorageSync( )获取之前存储的数据，再进行渲染和修改样式即可

onLoad(){
        var logs = wx.getStorageSync('logs') || [];
        var day = 0;
        var total = logs.length;
        var dayTime = 0;
        var totalTime = 0;
        var dayList = [];
        if(logs.length > 0){
            for(var i = 0;i < logs.length;i++){
            let a = logs[i].date + ""
            let b = formatTime(new Date) + ""
                if(a.slice(0,10) == b.slice(0,10)){
                console.log(formatTime(new Date))
                day = day + 1;
                dayTime = dayTime + parseInt(logs[i].time);
                dayList.push(logs[i]);
                this.setData({
                    dayList:dayList,
                    list:dayList
                })
                }
            totalTime = totalTime + parseInt(logs[i].time);
            }
            this.setData({
                'staList[0].val':day,
                'allList[0].val':total,
                'staList[1].val':dayTime+'分钟',
                'allList[1].val':totalTime+'分钟'
            })
        }
    },

图标来源：iconfont-阿里巴巴矢量图标库

学习参考：https://www.bilibili.com/video/BV1PV411k7ie/?spm_id_from=333.999.0.0&vd_source=4d32d05e88600f43895e6608cad6b5f5文章来源地址https://www.toymoban.com/news/detail-514213.html

到了这里，关于微信小程序--实现番茄钟功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！