仿写一个简单的微信小程序（番茄闹钟）

知悉
4,242 阅读7分钟

看到标题的你们肯定觉得我是一个很菜的人，确实你们的觉得没有错，因为现在的我确实很菜。曾今一段时间我甚至觉得我自己根本不可能会走上写代码的这个职业的，可能大家没有了解过我，在上大学之前，我就像农村的老人家一样根本不会去碰电脑这个东西。那究竟是什么原因让我决定走代码这条路呢？下面随着我像大家介绍我写的小程序来告诉大家，一个对电脑毫无兴趣的女孩子，究竟是什么让她走上代码这条路了！

前言

做任何事情之前都不能急，尤其是写代码之前，当我们在公司或者我们想要写一个项目的时候，第一件事并不是连忙打开代码编辑器，我们应该先抖一会腿（就是看看写这个项目需要哪些东西）。写代码就好比我们我们做饭，在开火之前我们就要先提前洗菜，切菜，这样才不会在饭做到一半的时候发现自己这个没洗，那个没切的情况。下面我们就一起来看看写一个简单的微信小程序需要做哪些准备工作。

项目效果图

说了这么多准备工作，下面我们就一起来看看小程序的整体效果图（我不会录动态图下面这些动态图都是用手机录成视屏，最后转成GIF格式的）

功能的实现

下面我就一步一步来讲述我如何实现这个简单的微信小程序的，以及在这其中我所遇到哪些问题解决的

下面的tabBar怎样实现的

功能描述：下面的tabBar主要是控制页面的跳转的，需要我们在app.json里面配置的，这是其中的一个tabBar的配置

"tabBar": {
    "color": "#515151",
    "background": "blue",
    "list": [
      {
        "pagePath": "pages/time/time",
        "text": "时间",
        "iconPath": "/images/time.png",
        "selectedIconPath": "/images/time1.png"
      }
     }
功能一：首页

功能描述：首页面涉及的逻辑思想的基本没有，他主要是给用户很好的体验，就是进入这个小程序就在告诉用户这个小程序的能够为什么活动计时

  • 点击任何首页的的图片或者开始计时的按钮你就可以进入计时的页面，这是因为给他们的父容器绑定了一个点击事件，之后微信小程序的wx.navigateTo来实现页面跳转
countTime: function () {
    wx.navigateTo({
      url: '../countTime/countTime'
    })
  },
  click: function (e) {
    console.log(e)
    wx.navigateTo({
      url: '../countTime/countTime'
    })

在这里页面跳转我们要特别注意，并不是所有的页面跳转都可以用wx.navigateTo。之前我在写微信小程序的时候我就犯过这样的所错误，下面我就给大家列举出来几种实现页面跳转

  • 使用导航组件，标签，页面链接来实现（可以发现点击时有背景）
<!-- sample.wxml -->
<view class="btn">
 <navigator url="../time/time">跳转到新页面</navigator>
</view>
  • 通过wx.redirectTo实现跳转（关闭当前页面，跳转到应用内某个页面）
navigateto_index: function (event) { 
 wx.redirectTo({ 
 url: '../index/index', 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 }) 
 
 }
  • 通过wx.navigateBack返回上一级（关闭当前页面。返回上一页面或多级页面）
wx.navigateBack({ 
 delta: 1, // 回退前 delta(默认为1) 页面 
 success: function (res) { 
 }, 
 fail: function () { 
 }, 
 complete: function () { 
 } 
 })
  • 给页面布局加监听bindtap事件，然后在方法里面，通过wx.navigatorTo来实现跳转（保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面）这就是我前面提到的
功能二：计时页面

功能描述：这个页面用来计时的，这个页面的时间是可以由我们的设置页面控制的 首先这个页面看到最里面的那是一张背景图，在背景图上面有一个圆钟，这是用一个盒子实现的，将圆边角设置为50%，就变成了一个圆，之后利用动画，让360度做逆时间旋转，在这一块我遇到就是计时的转换我试了还几次，刚开始我的那个圆圈里出现计时是秒出现，自己在分钟后在除以一个60就好了。

function countdown(that) {
  var second = that.data.second
  if (second == 0) {
    that.setData({
      second: "计时结束"
    });
    return;
  }

function dateformat(second){
  var min = Math.floor(second/60%60);
  var sec = Math.floor(second % 60);

  return min + ':' + sec;
}

  var time = setTimeout(function(){
    that.setData({
     second: second - 1,
      clock: dateformat(second - 1)
    });
    countdown(that);
   }
   ,1000)
}

Page({
  data: {
    second: 3600
  },
  onLoad: function () {
    countdown(this);
  },
  timeClose: function () {
    wx.switchTab({
      url: '../time/time'
    })
  },
  timeBg: function () {
    
    this.setData({
      second:3600
    })
  }
});

刚开始我并没有封装这个函数，而是在那个页面用到就统统写了一个，写完之后发现自己写的代码太冗余了，后来自己还是重新封装了一个formatTime功能函数，之后再通过module.exports 暴露接口，如果其他地方需要用到就可以用import引入就可以。

function formatTime(time, format) {
  let temp = '0000000000' + time
  let len = format.length
  return temp.substr(-len)
}

module.exports = {
  formatTime: formatTime
}

说的封装，在怎样的情况下我们需要封装呢，我自己总结了一下，那就是你这个功能不止一次会使用到，那就封装成组件，这样我们就不会让代码更加的简洁，同时减少了自己的工作量，也显得更加专业。

页面三：统计

功能描述：这个页面主要是记录前面计时页面的情况，这个记录是通过本地存储函数wx.getStorageSync来实现，当计时页面点击startTime开始计时的时候本地就会获取一份数据。

 getLogs: function(e) {
    console.log(e)
    let logs = wx.getStorageSync('logs')
    logs.forEach(function(item, index, arry) {
      item.startTime = new Date(item.startTime).toLocaleString()
    })
    this.setData({
      logs: logs
    })
  },

下面的清除功能是通过绑定一个清除事件来实现的

 clearLog: function(e) {
    wx.setStorageSync('logs', [])
    this.switchModal()
    this.setData({
      toastHidden: false
    })
    this.getLogs()
  }

下面这段彩虹统计图是采用canvas来实现的，刚开始我没有想到使用canvas来实现，一开始我就是使用css来画圆来写的，但是那样出来的效果太死板了。

 <canvas class="canvas" canvas-id="pieCanvas" disable-scroll="true" class="pieCanvas" style="width:300px; height:300px;">
  </canvas>

下面这个完成多个番茄数的获取是通过动态从数据源里获取的 

<view class="footer">
  <view class="footer-title">
    <view class="header-title">最近一周完成</view>
    <view class="header-date">平均每天{{logs.length}}个番茄</view>
    <view class="header-dec">{{logs.length}}个番茄</view>
  </view>

下面的日历我们可以采用bootstap或者element-ui来实现，这两种框架只用你引入他们的HTML，你就可以使用非常的方便。
设置页面

这个页面比较简单，主要两个功能函数就可以实现

 this.setData({
      workTime: wx.getStorageSync('workTime'),
      restTime: wx.getStorageSync('restTime')
    })
  },
  changeWorkTime: function (e) {
    wx.setStorage({
      key: 'workTime',
      data: e.detail.value
    })
  },
  changeRestTime: function (e) {
    wx.setStorage({
      key: 'restTime',
      data: e.detail.value
    })
  }

总结

  1. 在写代码之前一定要分析，哪些地方需要特别注意，在这个小程序中，我就犯了一个很大的错，那就是刚开始在每一个需要用到formatTime的页面都写上了。
  2. 那就是在开发小程序的时候一定打开官方文档，要学会看开发文档
  3. 那就是要学会用框架，这样会节省你很多时间的
  4. 最重要的一点那就是在开发的时候一定要学会打上备注，因为这样我们返回来看代码就会轻松很多，我一开始就是因为没有打备注结果后面时间久了，自己之前写了什么都不记得了。
  5. 最后分享一个好的方法，在这个小程序上用到哪些图标我并没有把图片下载下来，我是把它们添加至项目，之后再下载整个文件，之后找到这个文件里面的css文件，把他改成wxss文件,之后你再项目中哪里需要图片只要引入就可以，这样你就不用谢图片的样式的。

寄语：

在学习前端的道路上我们最重要的就是坚持，因为在前端需要学习的东西非常多，所以我们必须静下心来学习。我已经开始了前端的学习之旅了，让我们一起来学习吧！希望我的文章对你有帮助的话，可以给我一个赞哦！

avatar
文章
阅读
粉丝