看到標題的你們肯定覺得我是一個很菜的人，確實你們的覺得沒有錯，因為現在的我確實很菜。曾今一段時間我甚至覺得我自己根本不可能會走上寫程式碼的這個職業的，可能大家沒有了解過我，在上大學之前，我就像農村的老人家一樣根本不會去碰電腦這個東西。那究竟是什麼原因讓我決定走程式碼這條路呢？下面隨著我像大家介紹我寫的小程式來告訴大家，一個對電腦毫無興趣的女孩子，究竟是什麼讓她走上程式碼這條路了！
前言
做任何事情之前都不能急，尤其是寫程式碼之前，當我們在公司或者我們想要寫一個專案的時候，第一件事並不是連忙開啟程式碼編輯器，我們應該先抖一會腿（就是看看寫這個專案需要哪些東西）。寫程式碼就好比我們我們做飯，在開火之前我們就要先提前洗菜，切菜，這樣才不會在飯做到一半的時候發現自己這個沒洗，那個沒切的情況。下面我們就一起來看看寫一個簡單的微信小程式需要做哪些準備工作。
- 第一個我們需要下載一個微信開發者工具
- 我們需要下載好我們的編輯器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可以返回到原頁面）這就是我前面提到的
功能二：計時頁面
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
})
}
});
複製程式碼
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
})
}
複製程式碼總結
- 在寫程式碼之前一定要分析，哪些地方需要特別注意，在這個小程式中，我就犯了一個很大的錯，那就是剛開始在每一個需要用到formatTime的頁面都寫上了。
- 那就是在開發小程式的時候一定開啟官方文件，要學會看開發文件
- 那就是要學會用框架，這樣會節省你很多時間的
- 最重要的一點那就是在開發的時候一定要學會打上備註，因為這樣我們返回來看程式碼就會輕鬆很多，我一開始就是因為沒有打備註結果後面時間久了，自己之前寫了什麼都不記得了。
- 最後分享一個好的方法，在這個小程式上用到哪些圖示我並沒有把圖片下載下來，我是把它們新增至專案，之後再下載整個檔案，之後找到這個檔案裡面的css檔案，把他改成wxss檔案,之後你再專案中哪裡需要圖片只要引入就可以，這樣你就不用謝圖片的樣式的。
寄語：
在學習前端的道路上我們最重要的就是堅持，因為在前端需要學習的東西非常多，所以我們必須靜下心來學習。我已經開始了前端的學習之旅了，讓我們一起來學習吧！希望我的文章對你有幫助的話，可以給我一個贊哦！
