微信小程序開發(fā)---跑步App+音樂播放器
開篇語
好不容易，終于把所有的基礎(chǔ)課程全部看完了！昨天，我很高興地開始了看別人做的項目進(jìn)行深度的學(xué)習(xí)。其實也說不上是項目吧，更多的像是一種給新手看的示例代碼。然后我在這些代碼上面進(jìn)行我自己的改進(jìn)。最后也就有了接下來我會給大家?guī)淼倪@篇文章中的項目。這個項目是完整的，它包括了一個原本的示例代碼中帶著的莫名其妙的動畫組件（可能是為了更多額展示微信小程序的控件體系）以及跑步的組件，還有我后來自己加上去的一個音樂播放組件。總共也就有了三個的功能：動畫效果展示；跑步的定時以及定位功能；音樂播放功能。 我相信本文能夠很大程度上幫助想要進(jìn)行開發(fā)但是苦于無門和資源所限的朋友領(lǐng)略小程序開發(fā)的魅力，非常完整地領(lǐng)略小程序的開發(fā)過程。當(dāng)然，其中還存在一些bug需要去調(diào)，但是因為某種不可描述的原因，我沒時間了。待會兒我不能繼續(xù)進(jìn)行開發(fā)了，所以我現(xiàn)在就把它寫出來。倉促之處敬請見諒！
正文
一、總體架構(gòu)
1、文件架構(gòu)
2、UI構(gòu)造
整體的架構(gòu)包括四個方面：首先我們打開小程序的話，會進(jìn)入** 初始界面 ，也就是index文件所定義的主頁面。 在其中有三個主要的功能按鈕。分別是 動畫按鈕、跑步按鈕、音樂按鈕**。
在最左上角的是我最喜歡的一個圖標(biāo)用來作為替代商標(biāo)。
然后下面是我們開發(fā)項目的名字，F(xiàn)*king Running*（這么優(yōu)秀的名字當(dāng)然不是我想出來了。歡迎大家去關(guān)注另一個作者）。下面有一行小字，是署名開發(fā)者。
最下面一張圖是我隨便放的，當(dāng)然如果要是真正的商業(yè)產(chǎn)品是可以用來做廣告的。（這個廣告是不是太大了？恩。主要是我暫時還沒想到加什么，所以先放一張圖片吧）。
頁面的最下角有一個首頁以及一個日志的按鈕。首頁是指直接回到首頁，日志的話是查詢我們進(jìn)行了操作的時間。這兩個基本上沒什么用處。但是官網(wǎng)給的簡易文檔里面也有這個，所以我覺得加上會比較好，顯得我做的工作多嘛！_
右上角的這三個點的按鈕，想必大家都非常常見，因為微信里面始終都有這么三個點的分享按鈕。一般來說點擊這個就會有很多的復(fù)制鏈接的行為，比如說分享給別人，比如說復(fù)制鏈接，比如說在某個瀏覽器里面打開，都是在這個里面。目前我只加了一個分享的按鈕，至于其他的，嗯，暫時沒什么用處也就沒加了。
3、功能展示
當(dāng)我們點擊這個莫名其妙的動畫按鈕，會出現(xiàn)一個藍(lán)色的方塊兒，這是讓我們來進(jìn)行操作的演示題。在下面有九個按鈕，分別是旋轉(zhuǎn)、縮放、移動、傾斜，上面所說的四種，分別是單個操作。然后接下來有，先旋轉(zhuǎn)再縮放，有旋轉(zhuǎn)和縮放一起進(jìn)行，然后還有所有的操作一起進(jìn)行，以及所有的操作一個一個的輪流進(jìn)行，最后還有一個Reset--恢復(fù)按鈕，也就是回歸到我們最初時的狀態(tài)，在下面我還給出了一些提示，歡迎大家閱覽。好的，第一個按鈕我們說到這里。
那么當(dāng)我們打開第二個跑步按鈕，小程序會自動的，讀取我們當(dāng)前的位置，然后在地圖上表示出來，在第二個跑步頁面中有三個按鈕分別是打開位置，以及開始跑步和暫停跑步，有兩個計數(shù)器，一個是里程數(shù)，也就是我們跑步的距離，然后還有一個是時間，即我們跑步所用的時間。在這三個按鈕下面的是一個騰訊官方提供的地圖，我們可以在地圖上面標(biāo)注我們當(dāng)前所在的位置，以及讓圖標(biāo)跟我們一起移動。靜態(tài)的getLocation()我已經(jīng)弄明白了，但是對于跑步過程中如何實時地更新自己的位置以及計算距離openLocation()，這個我還有一點點不明白。只能說項目文檔的封裝有點厲害，也可以說是我修煉不到家。
當(dāng)我們點擊打開位置就會出現(xiàn)一張地圖，然后在地圖上可以進(jìn)行我們常規(guī)所用的地圖的操作，當(dāng)然因為我沒有那個開發(fā)者賬戶，所以目前的話我并不能使用這項功能，只能查看一下自己大概的位置，就比如說我現(xiàn)在在長沙旁邊的寧鄉(xiāng)縣，但是系統(tǒng)給我定位定到了長沙。當(dāng)我們返回之后，點擊開始跑步，那么里程數(shù)就會隨著我們位置的移動而改變，然后時間的話也會當(dāng)我們從，點擊開始跑步開始，就已經(jīng)在自動的技術(shù)了，直到我們點擊暫停跑步，它才會停止計數(shù)，這就是這個空間全部的功能。
第三個空間是音樂空間，跑步之后來點歌是不是會很舒服呢？我就是這樣覺得的。所以目前我精選了一Carly Rae Jepsen的照片，作為音樂界面的首頁，然后在下面我僅僅放了一首她的歌，是CallMe Baby
當(dāng)然由于我是吃晚飯的時候才開始進(jìn)行音樂控件的操作，然后現(xiàn)在大概是八點，也就是差不多兩個小時。音樂控件我還沒有摸熟，有一些API的函數(shù)官方?jīng)]有給出來，我得去找人問一下。所以很遺憾呢，目前這個東西只能看，然后點擊一下，放一首歌。不過這也并不妨礙我來解說一下這個頁面，首先這個頁面有四個按鈕，一個是開始播放，一個是暫停，一個是設(shè)置當(dāng)前播放時間為14秒，最后一個是停止播放，每個按鈕都跟我們常用的播放器的功能是一樣的的。
然后在最上方我放了一個Banner，這個Banner可以有三種圖片切換模式，只要你點一下它就會切換（好吧，本來想做成那種自動切換的，但是學(xué)藝不精，還沒做到），是我自己的一個開心的小玩具。最中間當(dāng)然是我非常喜歡的**Carly_Rae_Jepsen **。當(dāng)然，我一個人在這瞎弄是比不上人家一個公司的團(tuán)隊在精心鉆研好幾天，甚至好幾個月甚至好幾年的所以，功能性方面，請不要強求，能用就行吧，等我后面再開發(fā)出音樂列表以及其他的一些功能，到時候說不定我真的可以上線，請大家期待。
整體來說，整個項目的全部結(jié)構(gòu)就差不多是這樣的，項目文件，樹狀圖已經(jīng)在一開始就放出來了。在簡書里面，我放上了所有的代碼以及圖片。但是如果各位嫌復(fù)制粘貼麻煩，就請去github下載。鏈接地址如下。至于具體的碼代碼的過程，請各位有興趣的，可以按照我的思路一起來，首先呢，可以看到微信小程序是一種網(wǎng)頁性的服務(wù)。類似于我們最常見的html5，加css3，加javascript的構(gòu)造。所以我用以前寫網(wǎng)站的時候的一些經(jīng)驗來解析這個代碼。我的主要思路：就是首先我們要遍歷一下.wxml文件，也就是最常見的超文本標(biāo)記語言。它會告訴我們的手機瀏覽器，這個地方要放什么，那個地方放什么？這個地方長什么樣，那個地方長什么樣？然后具體的這個地方到底是長什么樣呢就交給css也就是樣式文件來處理。然后，還有Js文件，負(fù)責(zé)邏輯層的一些事件觸發(fā)，就比如說我點了這個按鈕一下會發(fā)生什么呢？這個就要交給javascript來進(jìn)行解析。具體某一步我做什么這個我就不太多說了。反正我打開這個項目的第一頁，我是找到了index.wxml文件。然后依次的看這個地方有個什么組件，這個地方有個什么事件觸發(fā)，然后再在對應(yīng)的.js或者是.wxss文件里面找到相關(guān)解釋，再進(jìn)行自己的一些理解與修改！就這么簡單，讀小程序千萬別對著js文件去讀，會瘋的！最好的就是把自己代入用戶：我做了這一步，會有什么事情發(fā)生？那么，這個事情的發(fā)生，在視圖層是怎么實現(xiàn)？然后更深層次的邏輯層是怎么觸發(fā)這些事件的？我們該如何做到這個事情？這么一番理解下來就很順暢的可以坐到理解項目了。至于更深層次的讀代碼。我就沒有太多的指導(dǎo)了。你要讀這個還是要有點基礎(chǔ)的， 人心不足蛇吞象一點都不好玩！
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">
<!--標(biāo)題-->
<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;
}
結(jié)束語
小程序算是假期的一個調(diào)劑吧，不然可能就真的天天看小說，然后逛逛B站了。然后，我覺得我有必要show一下我的工作環(huán)境，最近都有點不想走人家，天天在家寫代碼了~~~~不過明天估計還是要出去走走的。一個很尊敬的姑奶奶一直叫我去她家里坐坐，吃頓飯。不去就真的感覺特別對不住老人家，以前都說年后去，結(jié)果很多次都是匆匆忙忙去學(xué)校。希望各位也珍惜眼前人，老人應(yīng)該是對你最沒有想法的人，但是往往也是關(guān)心你的想法最不含雜質(zhì)的人。他們已經(jīng)老了，再多的物欲橫流都對他們影響甚小，趁著這些可愛的老人家還在世，多多去看望才是我們應(yīng)該做的！
大神的作品就不安利了。我自己寫完的這些，我覺得應(yīng)該比之前說的一些膜拜的作品要優(yōu)秀了。明天繼續(xù)改進(jìn)，希望大家會喜歡！
