仿寫一個簡單的微信小程序（番茄鬧鐘）

看到標題的大家確定以爲我是一個很菜的人，確實大家的以爲沒有錯，由於如今的我確實很菜。曾今一段時間我甚至以爲我本身根本不可能會走上寫代碼的這個職業的，可能你們沒有了解過我，在上大學以前，我就像農村的老人家同樣根本不會去碰電腦這個東西。那到底是什麼緣由讓我決定走代碼這條路呢？下面隨着我像你們介紹我寫的小程序來告訴你們，一個對電腦毫無興趣的女孩子，到底是什麼讓她走上代碼這條路了！

前言

作任何事情以前都不能急，尤爲是寫代碼以前，當咱們在公司或者咱們想要寫一個項目的時候，第一件事並非連忙打開代碼編輯器，咱們應該先抖一會腿（就是看看寫這個項目須要哪些東西）。寫代碼就比如咱們咱們作飯，在開火以前咱們就要先提早洗菜，切菜，這樣纔不會在飯作到一半的時候發現本身這個沒洗，那個沒切的狀況。下面咱們就一塊兒來看看寫一個簡單的微信小程序須要作哪些準備工做。

• 第一個咱們須要下載一個微信開發者工具
• 咱們須要下載好咱們的編輯器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文件,以後你再項目中哪裏須要圖片只要引入就能夠，這樣你就不用謝圖片的樣式的。

寄語：

在學習前端的道路上咱們最重要的就是堅持，由於在前端須要學習的東西很是多，因此咱們必須靜下心來學習。我已經開始了前端的學習之旅了，讓咱們一塊兒來學習吧！但願個人文章對你有幫助的話，能夠給我一個贊哦！