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

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

前言

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

• 第一个咱们须要下载一个微信开发者工具
• 咱们须要下载好咱们的编辑器VsCode
• 小程序过程当中须要用到的图片都是阿里巴巴的矢量库取的
• 咱们须要一个模拟咱们数据的地方 Easy Mock ，在这里面咱们须要注册，Easy Mock怎样建立接口

项目效果图

说了这么多准备工做，下面咱们就一块儿来看看小程序的总体效果图（我不会录动态图下面这些动态图都是用手机录成视屏，最后转成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文件,以后你再项目中哪里须要图片只要引入就能够，这样你就不用谢图片的样式的。

寄语：

在学习前端的道路上咱们最重要的就是坚持，由于在前端须要学习的东西很是多，因此咱们必须静下心来学习。我已经开始了前端的学习之旅了，让咱们一块儿来学习吧！但愿个人文章对你有帮助的话，能够给我一个赞哦！