開篇語
好不容易鸠信，終于把所有的基礎課程全部看完了纵寝！昨天，我很高興地開始了看別人做的項目進行深度的學習星立。其實也說不上是項目吧爽茴，更多的像是一種給新手看的示例代碼。然后我在這些代碼上面進行我自己的改進绰垂。最后也就有了接下來我會給大家?guī)淼倪@篇文章中的項目室奏。這個項目是完整的，它包括了一個原本的示例代碼中帶著的莫名其妙的動畫組件（可能是為了更多額展示微信小程序的控件體系）以及跑步的組件劲装，還有我后來自己加上去的一個音樂播放組件胧沫〔颍總共也就有了三個的功能：動畫效果展示；跑步的定時以及定位功能绒怨；音樂播放功能纯赎。
我相信本文能夠很大程度上幫助想要進行開發(fā)但是苦于無門和資源所限的朋友領略小程序開發(fā)的魅力，非常完整地領略小程序的開發(fā)過程南蹂。當然犬金，其中還存在一些bug需要去調，但是因為某種不可描述的原因六剥，我沒時間了晚顷。待會兒我不能繼續(xù)進行開發(fā)了，所以我現(xiàn)在就把它寫出來仗考。倉促之處敬請見諒音同！
https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
我的以前關于小程序的文章
開篇語已經(jīng)在熱身階段說過了，所以就不重復了秃嗜。有興趣的讀者移步
來寫點微信小程序吧：D） ～～～（熱身階段）
以及前面借鑒小程序開發(fā)官方文檔的簡易教程寫的總綱
來寫點微信小程序吧：D） ～～～狂奔階段
還有分析小程序的目錄結構與配置的內容
來寫點微信小程序吧：D） ~ ~ ~ 分析小程序目錄結構與配置
以及分析小程序的邏輯層的內容：
分析小程序邏輯層內容
分析小程序視圖層內容
來寫點微信小程序吧：D） ---- 分析小程序視圖層內容
分析小程序WXSS
來寫點微信小程序吧：D） ---- 分析小程序WXSS
上一張學長的圖片鎮(zhèn)樓权均，下面直接上昨晚到現(xiàn)在一天時間的成果。
正文
一锅锨、總體架構
1叽赊、文件架構
2、UI構造
整體的架構包括四個方面：首先我們打開小程序的話，會進入** 初始界面 霜第，也就是index文件所定義的主頁面葛家。
在其中有三個主要的功能按鈕。分別是 動畫按鈕泌类、跑步按鈕癞谒、音樂按鈕**。
在最左上角的是我最喜歡的一個圖標用來作為替代商標刃榨。
然后下面是我們開發(fā)項目的名字苞轿，F*king Running*
（這么優(yōu)秀的名字當然不是我想出來了茅诱。歡迎大家去關注另一個作者）为流。下面有一行小字，是署名開發(fā)者让簿。
最下面一張圖是我隨便放的，當然如果要是真正的商業(yè)產(chǎn)品是可以用來做廣告的秀睛。（這個廣告是不是太大了尔当？恩。主要是我暫時還沒想到加什么蹂安，所以先放一張圖片吧）椭迎。
頁面的最下角有一個首頁以及一個日志的按鈕。首頁是指直接回到首頁田盈，日志的話是查詢我們進行了操作的時間畜号。這兩個基本上沒什么用處。但是官網(wǎng)給的簡易文檔里面也有這個允瞧，所以我覺得加上會比較好简软，顯得我做的工作多嘛！_
右上角的這三個點的按鈕痹升，想必大家都非常常見，因為微信里面始終都有這么三個點的分享按鈕畦韭。一般來說點擊這個就會有很多的復制鏈接的行為疼蛾，比如說分享給別人，比如說復制鏈接艺配，比如說在某個瀏覽器里面打開察郁，都是在這個里面。目前我只加了一個分享的按鈕转唉，至于其他的皮钠，嗯，暫時沒什么用處也就沒加了酝掩。
3秤涩、功能展示
當我們點擊這個莫名其妙的動畫按鈕，會出現(xiàn)一個藍色的方塊兒糟趾，這是讓我們來進行操作的演示題踊淳。在下面有九個按鈕，分別是旋轉镶苞、縮放喳坠、移動、傾斜茂蚓，上面所說的四種壕鹉，分別是單個操作剃幌。然后接下來有，先旋轉再縮放晾浴，有旋轉和縮放一起進行负乡，然后還有所有的操作一起進行，以及所有的操作一個一個的輪流進行脊凰，最后還有一個Reset--恢復按鈕抖棘，也就是回歸到我們最初時的狀態(tài)，在下面我還給出了一些提示狸涌，歡迎大家閱覽切省。好的，第一個按鈕我們說到這里帕胆。
那么當我們打開第二個跑步按鈕朝捆，小程序會自動的，讀取我們當前的位置懒豹，然后在地圖上表示出來芙盘，在第二個跑步頁面中有三個按鈕分別是打開位置，以及開始跑步和暫停跑步歼捐，有兩個計數(shù)器何陆，一個是里程數(shù)，也就是我們跑步的距離豹储，然后還有一個是時間贷盲，即我們跑步所用的時間。在這三個按鈕下面的是一個騰訊官方提供的地圖剥扣，我們可以在地圖上面標注我們當前所在的位置巩剖，以及讓圖標跟我們一起移動。靜態(tài)的
getLocation()我已經(jīng)弄明白了钠怯，但是對于跑步過程中如何實時地更新自己的位置以及計算距離openLocation()佳魔，這個我還有一點點不明白。只能說項目文檔的封裝有點厲害晦炊，也可以說是我修煉不到家鞠鲜。
當我們點擊打開位置就會出現(xiàn)一張地圖，然后在地圖上可以進行我們常規(guī)所用的地圖的操作断国，當然因為我沒有那個開發(fā)者賬戶贤姆，所以目前的話我并不能使用這項功能，只能查看一下自己大概的位置稳衬，就比如說我現(xiàn)在在長沙旁邊的寧鄉(xiāng)縣霞捡，但是系統(tǒng)給我定位定到了長沙。當我們返回之后薄疚，點擊開始跑步碧信，那么里程數(shù)就會隨著我們位置的移動而改變赊琳，然后時間的話也會當我們從，點擊開始跑步開始砰碴，就已經(jīng)在自動的技術了躏筏，直到我們點擊暫停跑步，它才會停止計數(shù)呈枉，這就是這個空間全部的功能寸士。
第三個空間是音樂空間，跑步之后來點歌是不是會很舒服呢碴卧？我就是這樣覺得的。所以目前我精選了一Carly Rae Jepsen的照片乃正，作為音樂界面的首頁住册，然后在下面我僅僅放了一首她的歌，是CallMe Baby
當然由于我是吃晚飯的時候才開始進行音樂控件的操作瓮具，然后現(xiàn)在大概是八點荧飞，也就是差不多兩個小時。音樂控件我還沒有摸熟名党，有一些
API的函數(shù)官方?jīng)]有給出來叹阔，我得去找人問一下。所以很遺憾呢传睹，目前這個東西只能看耳幢，然后點擊一下，放一首歌欧啤。不過這也并不妨礙我來解說一下這個頁面睛藻，首先這個頁面有四個按鈕，一個是開始播放邢隧，一個是暫停店印，一個是設置當前播放時間為14秒，最后一個是停止播放倒慧，每個按鈕都跟我們常用的播放器的功能是一樣的的按摘。
然后在最上方我放了一個Banner，這個Banner可以有三種圖片切換模式纫谅，只要你點一下它就會切換（好吧炫贤，本來想做成那種自動切換的，但是學藝不精系宜，還沒做到）照激，是我自己的一個開心的小玩具。最中間當然是我非常喜歡的**Carly_Rae_Jepsen **盹牧。當然俩垃，我一個人在這瞎弄是比不上人家一個公司的團隊在精心鉆研好幾天励幼，甚至好幾個月甚至好幾年的所以，功能性方面口柳，請不要強求苹粟，能用就行吧，等我后面再開發(fā)出音樂列表以及其他的一些功能跃闹，到時候說不定我真的可以上線嵌削，請大家期待。
整體來說望艺，整個項目的全部結構就差不多是這樣的苛秕，項目文件，樹狀圖已經(jīng)在一開始就放出來了找默。在簡書里面艇劫，我放上了所有的代碼以及圖片。但是如果各位嫌復制粘貼麻煩惩激，就請去github下載店煞。鏈接地址如下。至于具體的碼代碼的過程风钻，請各位有興趣的顷蟀，可以按照我的思路一起來，首先呢骡技，可以看到微信小程序是一種網(wǎng)頁性的服務鸣个。類似于我們最常見的html5，加css3布朦，加javascript的構造毛萌。所以我用以前寫網(wǎng)站的時候的一些經(jīng)驗來解析這個代碼。我的主要思路：就是首先我們要遍歷一下.wxml文件喝滞，也就是最常見的超文本標記語言阁将。它會告訴我們的手機瀏覽器，這個地方要放什么右遭，那個地方放什么做盅？這個地方長什么樣，那個地方長什么樣窘哈？然后具體的這個地方到底是長什么樣呢就交給css也就是樣式文件來處理吹榴。然后，還有Js文件滚婉，負責邏輯層的一些事件觸發(fā)图筹，就比如說我點了這個按鈕一下會發(fā)生什么呢？這個就要交給javascript來進行解析。具體某一步我做什么這個我就不太多說了远剩。反正我打開這個項目的第一頁扣溺，我是找到了index.wxml文件。然后依次的看這個地方有個什么組件瓜晤，這個地方有個什么事件觸發(fā)锥余，然后再在對應的.js或者是.wxss文件里面找到相關解釋，再進行自己的一些理解與修改痢掠！就這么簡單驱犹，讀小程序千萬別對著js文件去讀，會瘋的足画！最好的就是把自己代入用戶：我做了這一步雄驹，會有什么事情發(fā)生？那么淹辞，這個事情的發(fā)生荠医，在視圖層是怎么實現(xiàn)？然后更深層次的邏輯層是怎么觸發(fā)這些事件的桑涎？我們該如何做到這個事情？這么一番理解下來就很順暢的可以坐到理解項目了兼贡。至于更深層次的讀代碼攻冷。我就沒有太多的指導了。你要讀這個還是要有點基礎的遍希， 人心不足蛇吞象一點都不好玩等曼！
3、代碼和圖片
意外發(fā)現(xiàn)凿蒜，代碼實在太多了〗現(xiàn)在是北京時間2017/2/2/23:59，我要睡覺了废封。一個個粘貼實在太麻煩了州泊。我還是一次行的放到:
https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
然后諸君有興趣的自己去下載吧。
姑且把圖片放在下面漂洋。這個放上來只要一拖就好遥皂，簡單方便！（v保留了在項目文件中的名字刽漂，方便下載~）
<!--
index.wxml
-->
<view clas="index">
<!--標題-->
<view class="header">
<image class="icon" src="/resources/fuckrun.png" mode="aspectFill"/>
<view class="bigTitle">Fucking Running</view>
<view class="desc">The First Program of HustWolf and XNC</view>
</view>
<view class="body">
<view class="widget">
<block wx:for="{{pageNames}}">
<view class="widgets__item">
<navigator class="navigator-hover" url="{{item.id}}/{{item.id}}">{{item.name}}</navigator>
</view>
</block>
</view>
</view>
</view>
<image class="pic" src="/resources/ok.jpg" mode="aspectFill"/>
<!--
index.js
-->
Page({
data: {
pageNames: [
{
id: 'animation',
name: '動畫',
}, {
id: 'run',
name: '跑步',
},
{
id: 'music',
name: '音樂',
},
],
},
onShareAppMessage: function () {
return {
title: '歡迎使用顏大傻牌多功能APP',
desc: '將Fucking Running分享到~~~',
path: '/page/index/index.js'
}
},
});
<!--
index.wxss
-->
.index{
background-color: #Eeefaf;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
flex: 1;
min-height: 100%;
font-size: 32rpx;
}
.header{
margin-top: 20;
line-height: 1;
}
.icon{
width: 60rpx;
height: 60rpx;
padding: 30;
margin-top: 20;
margin-bottom:20;
}
.pic{
width: 800rpx;
height: 650rpx;
padding: 30;
margin-top: 20;
margin-bottom:100;
}
.bigTitle{
font-size: 60rpx;
padding-left: 150rpx;
color: #556B2F;
position: center;
}
.title{
font-size: 60rpx;
}
.desc{
margin-top: 15rpx;
color: #8B1A1A;
font-size: 30rpx;
padding-left: 90rpx;
}
.body{
padding-left: 30rpx;
padding-right: 30rpx;
overflow: hidden;
}
.navigator-hover {
color:cornsilk;
background-color: #8B1A1A;
padding-left: 250rpx;
}
.widget{
position: relative;
padding-top: 26rpx;
padding-bottom: 26rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
.widgets__item{
margin-top: 30rpx;
margin-bottom: 20rpx;
background-color: black;
overflow: hidden;
border-radius: 4rpx;
cursor: pointer;
padding-left: 100;
}
結束語
小程序算是假期的一個調劑吧演训，不然可能就真的天天看小說，然后逛逛B站了贝咙。然后样悟，我覺得我有必要show一下我的工作環(huán)境，最近都有點不想走人家，天天在家寫代碼了~~~~不過明天估計還是要出去走走的窟她。一個很尊敬的姑奶奶一直叫我去她家里坐坐陈症，吃頓飯。不去就真的感覺特別對不住老人家礁苗，以前都說年后去爬凑，結果很多次都是匆匆忙忙去學校。希望各位也珍惜眼前人试伙，老人應該是對你最沒有想法的人嘁信，但是往往也是關心你的想法最不含雜質的人。他們已經(jīng)老了疏叨，再多的物欲橫流都對他們影響甚小潘靖，趁著這些可愛的老人家還在世，多多去看望才是我們應該做的蚤蔓！
大神的作品就不安利了卦溢。我自己寫完的這些，我覺得應該比之前說的一些膜拜的作品要優(yōu)秀了秀又。明天繼續(xù)改進单寂，希望大家會喜歡！
個人宣言
知識傳遞力量宣决，技術無國界，文化改變生活昏苏！
