仿寫一個簡單的微信小程式(番茄鬧鐘)

知悉發表於2019-06-27

看到標題的你們肯定覺得我是一個很菜的人,確實你們的覺得沒有錯,因為現在的我確實很菜。曾今一段時間我甚至覺得我自己根本不可能會走上寫程式碼的這個職業的,可能大家沒有了解過我,在上大學之前,我就像農村的老人家一樣根本不會去碰電腦這個東西。那究竟是什麼原因讓我決定走程式碼這條路呢?下面隨著我像大家介紹我寫的小程式來告訴大家,一個對電腦毫無興趣的女孩子,究竟是什麼讓她走上程式碼這條路了!

仿寫一個簡單的微信小程式(番茄鬧鐘)

前言

做任何事情之前都不能急,尤其是寫程式碼之前,當我們在公司或者我們想要寫一個專案的時候,第一件事並不是連忙開啟程式碼編輯器,我們應該先抖一會腿(就是看看寫這個專案需要哪些東西)。寫程式碼就好比我們我們做飯,在開火之前我們就要先提前洗菜,切菜,這樣才不會在飯做到一半的時候發現自己這個沒洗,那個沒切的情況。下面我們就一起來看看寫一個簡單的微信小程式需要做哪些準備工作。

專案效果圖

說了這麼多準備工作,下面我們就一起來看看小程式的整體效果圖(我不會錄動態圖下面這些動態圖都是用手機錄成視屏,最後轉成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檔案,之後你再專案中哪裡需要圖片只要引入就可以,這樣你就不用謝圖片的樣式的。

仿寫一個簡單的微信小程式(番茄鬧鐘)

寄語:

在學習前端的道路上我們最重要的就是堅持,因為在前端需要學習的東西非常多,所以我們必須靜下心來學習。我已經開始了前端的學習之旅了,讓我們一起來學習吧!希望我的文章對你有幫助的話,可以給我一個贊哦!

仿寫一個簡單的微信小程式(番茄鬧鐘)

相關文章