開篇語

好不(bu)容易，終(zhong)于(yu)把所(suo)(suo)有的(de)(de)(de)(de)(de)基礎課程全(quan)部看完了！昨天，我(wo)(wo)很(hen)(hen)高(gao)興地(di)開(kai)(kai)始了看別人(ren)做的(de)(de)(de)(de)(de)項(xiang)目進(jin)(jin)行(xing)深度的(de)(de)(de)(de)(de)學習。其(qi)實也(ye)說不(bu)上(shang)是(shi)(shi)(shi)項(xiang)目吧，更多(duo)(duo)的(de)(de)(de)(de)(de)像是(shi)(shi)(shi)一種給新手看的(de)(de)(de)(de)(de)示例代(dai)碼(ma)。然后(hou)我(wo)(wo)在這些代(dai)碼(ma)上(shang)面進(jin)(jin)行(xing)我(wo)(wo)自(zi)己的(de)(de)(de)(de)(de)改(gai)進(jin)(jin)。最后(hou)也(ye)就有了接下來我(wo)(wo)會給大(da)家帶來的(de)(de)(de)(de)(de)這篇(pian)文(wen)章(zhang)中(zhong)的(de)(de)(de)(de)(de)項(xiang)目。這個項(xiang)目是(shi)(shi)(shi)完整的(de)(de)(de)(de)(de)，它包括了一個原本的(de)(de)(de)(de)(de)示例代(dai)碼(ma)中(zhong)帶著的(de)(de)(de)(de)(de)莫名其(qi)妙的(de)(de)(de)(de)(de)動(dong)畫組件(jian)（可能(neng)是(shi)(shi)(shi)為了更多(duo)(duo)額(e)展示微信小(xiao)程序(xu)的(de)(de)(de)(de)(de)控件(jian)體(ti)系）以及(ji)(ji)跑步的(de)(de)(de)(de)(de)組件(jian)，還有我(wo)(wo)后(hou)來自(zi)己加上(shang)去的(de)(de)(de)(de)(de)一個音樂(le)(le)播放(fang)組件(jian)。總共也(ye)就有了三個的(de)(de)(de)(de)(de)功(gong)能(neng)：動(dong)畫效果(guo)展示；跑步的(de)(de)(de)(de)(de)定時(shi)以及(ji)(ji)定位功(gong)能(neng)；音樂(le)(le)播放(fang)功(gong)能(neng)。 我(wo)(wo)相信本文(wen)能(neng)夠很(hen)(hen)大(da)程度上(shang)幫助想要進(jin)(jin)行(xing)開(kai)(kai)發但(dan)是(shi)(shi)(shi)苦于(yu)無門和(he)資源(yuan)所(suo)(suo)限(xian)的(de)(de)(de)(de)(de)朋友領(ling)略小(xiao)程序(xu)開(kai)(kai)發的(de)(de)(de)(de)(de)魅力(li)，非常完整地(di)領(ling)略小(xiao)程序(xu)的(de)(de)(de)(de)(de)開(kai)(kai)發過程。當然，其(qi)中(zhong)還存(cun)在一些bug需要去調，但(dan)是(shi)(shi)(shi)因(yin)為某種不(bu)可描述的(de)(de)(de)(de)(de)原因(yin)，我(wo)(wo)沒時(shi)間(jian)了。待會兒我(wo)(wo)不(bu)能(neng)繼續進(jin)(jin)行(xing)開(kai)(kai)發了，所(suo)(suo)以我(wo)(wo)現(xian)在就把它寫出(chu)來。倉促之處敬請見諒！ 

正文

一、總體架構

1、文件架構

2、UI構造

整(zheng)體的架(jia)構包括四個方(fang)面(mian)：首先我們(men)打(da)開小(xiao)程序的話，會進入** 初始界面(mian) ，也就是index文件所定義的主頁(ye)面(mian)。 在其中有三(san)個主要的功(gong)能按(an)鈕。分別是 動畫按(an)鈕、跑步(bu)按(an)鈕、音樂按(an)鈕**。

在最左(zuo)上角的是我最喜歡的一個圖標用來作為替代商標。

然(ran)后下面是我們開發(fa)項目的名(ming)(ming)字，F*king Running*（這(zhe)么優秀的名(ming)(ming)字當然(ran)不是我想出來了。歡迎大家去關(guan)注另(ling)一個作者(zhe)）。下面有一行小字，是署名(ming)(ming)開發(fa)者(zhe)。

最下(xia)面(mian)一張圖是(shi)我隨便(bian)放(fang)的(de)(de)，當然如果要是(shi)真正的(de)(de)商業產品是(shi)可以用來(lai)做廣(guang)告(gao)的(de)(de)。（這個廣(guang)告(gao)是(shi)不(bu)是(shi)太(tai)大了？恩。主(zhu)要是(shi)我暫(zan)時(shi)還沒想到(dao)加什(shen)么，所以先放(fang)一張圖片吧）。

頁面(mian)的最下(xia)角有(you)一(yi)個(ge)首(shou)(shou)頁以及一(yi)個(ge)日(ri)志的按鈕。首(shou)(shou)頁是(shi)(shi)指直接回到首(shou)(shou)頁，日(ri)志的話(hua)是(shi)(shi)查詢我(wo)們進行了操作(zuo)的時間。這(zhe)兩個(ge)基本上(shang)沒什么(me)用處。但是(shi)(shi)官網給的簡易文檔里面(mian)也有(you)這(zhe)個(ge)，所以我(wo)覺(jue)得(de)加上(shang)會(hui)比(bi)較(jiao)好，顯得(de)我(wo)做的工作(zuo)多嘛(ma)！_

右上角的這三(san)個(ge)點的按鈕(niu)(niu)，想必(bi)大家都(dou)(dou)非常(chang)常(chang)見，因為微信里(li)面始終都(dou)(dou)有這么三(san)個(ge)點的分(fen)享按鈕(niu)(niu)。一般來(lai)說(shuo)點擊這個(ge)就會有很多(duo)的復制鏈接(jie)的行(xing)為，比如(ru)(ru)說(shuo)分(fen)享給別人(ren)，比如(ru)(ru)說(shuo)復制鏈接(jie)，比如(ru)(ru)說(shuo)在(zai)(zai)某個(ge)瀏覽器(qi)里(li)面打開，都(dou)(dou)是在(zai)(zai)這個(ge)里(li)面。目前我只加了(le)一個(ge)分(fen)享的按鈕(niu)(niu)，至于其他的，嗯(ng)，暫時沒什(shen)么用處也就沒加了(le)。

3、功能展示

當我(wo)(wo)們點擊這(zhe)個(ge)(ge)(ge)莫(mo)名其妙的(de)(de)(de)動畫按鈕(niu)，會(hui)出現一個(ge)(ge)(ge)藍色的(de)(de)(de)方塊兒，這(zhe)是(shi)(shi)讓我(wo)(wo)們來(lai)進(jin)(jin)(jin)行(xing)(xing)操作(zuo)的(de)(de)(de)演示題。在(zai)下面有(you)(you)九個(ge)(ge)(ge)按鈕(niu)，分別是(shi)(shi)旋轉、縮放(fang)、移動、傾斜，上面所(suo)(suo)說的(de)(de)(de)四種(zhong)，分別是(shi)(shi)單個(ge)(ge)(ge)操作(zuo)。然(ran)后(hou)(hou)(hou)接(jie)下來(lai)有(you)(you)，先旋轉再(zai)縮放(fang)，有(you)(you)旋轉和縮放(fang)一起進(jin)(jin)(jin)行(xing)(xing)，然(ran)后(hou)(hou)(hou)還有(you)(you)所(suo)(suo)有(you)(you)的(de)(de)(de)操作(zuo)一起進(jin)(jin)(jin)行(xing)(xing)，以及所(suo)(suo)有(you)(you)的(de)(de)(de)操作(zuo)一個(ge)(ge)(ge)一個(ge)(ge)(ge)的(de)(de)(de)輪流進(jin)(jin)(jin)行(xing)(xing)，最后(hou)(hou)(hou)還有(you)(you)一個(ge)(ge)(ge)Reset--恢復按鈕(niu)，也就是(shi)(shi)回歸到(dao)我(wo)(wo)們最初時的(de)(de)(de)狀態，在(zai)下面我(wo)(wo)還給出了一些提(ti)示，歡迎大家閱覽。好的(de)(de)(de)，第一個(ge)(ge)(ge)按鈕(niu)我(wo)(wo)們說到(dao)這(zhe)里。

那么當我(wo)(wo)們(men)打(da)(da)開(kai)第(di)二(er)個(ge)跑(pao)步按(an)鈕，小程(cheng)序會自(zi)動(dong)的(de)(de)(de)(de)，讀(du)取我(wo)(wo)們(men)當前的(de)(de)(de)(de)位置，然后在(zai)地圖(tu)上表示出來，在(zai)第(di)二(er)個(ge)跑(pao)步頁面中(zhong)有(you)(you)(you)三個(ge)按(an)鈕分別是(shi)(shi)打(da)(da)開(kai)位置，以(yi)(yi)及(ji)(ji)開(kai)始跑(pao)步和(he)暫停(ting)跑(pao)步，有(you)(you)(you)兩(liang)個(ge)計(ji)數器(qi)，一個(ge)是(shi)(shi)里(li)程(cheng)數，也就是(shi)(shi)我(wo)(wo)們(men)跑(pao)步的(de)(de)(de)(de)距(ju)離(li)，然后還有(you)(you)(you)一個(ge)是(shi)(shi)時間，即我(wo)(wo)們(men)跑(pao)步所用的(de)(de)(de)(de)時間。在(zai)這三個(ge)按(an)鈕下面的(de)(de)(de)(de)是(shi)(shi)一個(ge)騰訊官方提供的(de)(de)(de)(de)地圖(tu)，我(wo)(wo)們(men)可以(yi)(yi)在(zai)地圖(tu)上面標注我(wo)(wo)們(men)當前所在(zai)的(de)(de)(de)(de)位置，以(yi)(yi)及(ji)(ji)讓(rang)圖(tu)標跟(gen)我(wo)(wo)們(men)一起移動(dong)。靜(jing)態的(de)(de)(de)(de)getLocation()我(wo)(wo)已(yi)經(jing)弄明白(bai)(bai)了，但是(shi)(shi)對于(yu)跑(pao)步過程(cheng)中(zhong)如何實時地更新(xin)自(zi)己的(de)(de)(de)(de)位置以(yi)(yi)及(ji)(ji)計(ji)算(suan)距(ju)離(li)openLocation()，這個(ge)我(wo)(wo)還有(you)(you)(you)一點點不(bu)明白(bai)(bai)。只能說項目文檔的(de)(de)(de)(de)封(feng)裝(zhuang)有(you)(you)(you)點厲害(hai)，也可以(yi)(yi)說是(shi)(shi)我(wo)(wo)修煉不(bu)到家。

當我(wo)(wo)們(men)點擊(ji)打開(kai)位(wei)置就(jiu)會(hui)出現一(yi)張地圖(tu)，然(ran)(ran)后(hou)(hou)在地圖(tu)上可以(yi)進行我(wo)(wo)們(men)常規所用(yong)的(de)(de)(de)地圖(tu)的(de)(de)(de)操作，當然(ran)(ran)因為我(wo)(wo)沒有那個(ge)開(kai)發者賬戶，所以(yi)目前的(de)(de)(de)話我(wo)(wo)并不能使(shi)用(yong)這項功能，只能查看一(yi)下自(zi)己(ji)大概的(de)(de)(de)位(wei)置，就(jiu)比如說我(wo)(wo)現在在長沙旁邊的(de)(de)(de)寧鄉(xiang)縣，但是(shi)系統給我(wo)(wo)定(ding)位(wei)定(ding)到(dao)了長沙。當我(wo)(wo)們(men)返(fan)回之后(hou)(hou)，點擊(ji)開(kai)始(shi)跑(pao)步(bu)，那么里程數就(jiu)會(hui)隨著我(wo)(wo)們(men)位(wei)置的(de)(de)(de)移動而改變，然(ran)(ran)后(hou)(hou)時間的(de)(de)(de)話也(ye)會(hui)當我(wo)(wo)們(men)從，點擊(ji)開(kai)始(shi)跑(pao)步(bu)開(kai)始(shi)，就(jiu)已經在自(zi)動的(de)(de)(de)技術了，直到(dao)我(wo)(wo)們(men)點擊(ji)暫(zan)停跑(pao)步(bu)，它(ta)才會(hui)停止計數，這就(jiu)是(shi)這個(ge)空(kong)間全部的(de)(de)(de)功能。

第三個(ge)空(kong)間是(shi)音樂空(kong)間，跑步之(zhi)后來(lai)點歌(ge)是(shi)不是(shi)會很舒服呢？我(wo)(wo)就是(shi)這樣覺(jue)得的(de)(de)。所(suo)以目前我(wo)(wo)精(jing)選了一Carly Rae Jepsen的(de)(de)照片(pian)，作為(wei)音樂界面(mian)的(de)(de)首(shou)頁，然后在(zai)下(xia)面(mian)我(wo)(wo)僅僅放了一首(shou)她的(de)(de)歌(ge)，是(shi)CallMe Baby

當(dang)然(ran)由于我(wo)(wo)是(shi)吃晚飯(fan)的(de)(de)時(shi)(shi)候才開(kai)始進(jin)行音樂(le)(le)控件(jian)的(de)(de)操作，然(ran)后現在大(da)概是(shi)八點，也就是(shi)差不多(duo)兩個(ge)(ge)(ge)小時(shi)(shi)。音樂(le)(le)控件(jian)我(wo)(wo)還沒有(you)(you)(you)摸熟，有(you)(you)(you)一(yi)(yi)些API的(de)(de)函數官(guan)方(fang)沒有(you)(you)(you)給出來，我(wo)(wo)得(de)去找人問一(yi)(yi)下(xia)。所以很(hen)遺憾呢(ni)，目前這(zhe)個(ge)(ge)(ge)東西只(zhi)能看，然(ran)后點擊一(yi)(yi)下(xia)，放(fang)(fang)一(yi)(yi)首歌(ge)。不過(guo)這(zhe)也并不妨礙我(wo)(wo)來解說一(yi)(yi)下(xia)這(zhe)個(ge)(ge)(ge)頁面(mian)(mian)，首先這(zhe)個(ge)(ge)(ge)頁面(mian)(mian)有(you)(you)(you)四(si)個(ge)(ge)(ge)按鈕(niu)，一(yi)(yi)個(ge)(ge)(ge)是(shi)開(kai)始播放(fang)(fang)，一(yi)(yi)個(ge)(ge)(ge)是(shi)暫停(ting)，一(yi)(yi)個(ge)(ge)(ge)是(shi)設置當(dang)前播放(fang)(fang)時(shi)(shi)間為(wei)14秒，最后一(yi)(yi)個(ge)(ge)(ge)是(shi)停(ting)止播放(fang)(fang)，每個(ge)(ge)(ge)按鈕(niu)都跟我(wo)(wo)們(men)常(chang)用的(de)(de)播放(fang)(fang)器的(de)(de)功能是(shi)一(yi)(yi)樣的(de)(de)的(de)(de)。

然后在最(zui)上方(fang)我(wo)放了(le)一(yi)(yi)個(ge)Banner，這個(ge)Banner可(ke)以(yi)(yi)有(you)三種圖片切(qie)換(huan)模式，只要(yao)你點一(yi)(yi)下它就會(hui)切(qie)換(huan)（好吧(ba)，本來想做成那種自動切(qie)換(huan)的(de)，但(dan)是(shi)學(xue)藝(yi)不(bu)(bu)(bu)精，還沒做到(dao)），是(shi)我(wo)自己的(de)一(yi)(yi)個(ge)開心的(de)小玩具。最(zui)中間當然是(shi)我(wo)非常喜歡的(de)**Carly_Rae_Jepsen **。當然，我(wo)一(yi)(yi)個(ge)人在這瞎弄是(shi)比(bi)不(bu)(bu)(bu)上人家(jia)一(yi)(yi)個(ge)公司(si)的(de)團隊在精心鉆(zhan)研好幾天，甚(shen)(shen)至好幾個(ge)月甚(shen)(shen)至好幾年的(de)所以(yi)(yi)，功能性方(fang)面(mian)，請(qing)不(bu)(bu)(bu)要(yao)強求，能用就行吧(ba)，等我(wo)后面(mian)再開發出音樂列表以(yi)(yi)及其他(ta)的(de)一(yi)(yi)些功能，到(dao)時候說不(bu)(bu)(bu)定我(wo)真的(de)可(ke)以(yi)(yi)上線，請(qing)大家(jia)期待。

整體來(lai)說，整個(ge)(ge)(ge)項(xiang)(xiang)(xiang)目(mu)的(de)(de)(de)全(quan)部(bu)結(jie)構(gou)就(jiu)(jiu)差(cha)不(bu)(bu)多是(shi)(shi)(shi)這(zhe)(zhe)(zhe)樣的(de)(de)(de)，項(xiang)(xiang)(xiang)目(mu)文(wen)件(jian)，樹狀圖(tu)(tu)已經(jing)在一(yi)(yi)開始就(jiu)(jiu)放(fang)出來(lai)了。在簡(jian)書里面，我(wo)(wo)(wo)放(fang)上(shang)了所有(you)(you)(you)(you)(you)(you)的(de)(de)(de)代(dai)碼(ma)以(yi)及圖(tu)(tu)片。但(dan)是(shi)(shi)(shi)如果各(ge)位(wei)嫌復制(zhi)粘貼麻(ma)煩(fan)，就(jiu)(jiu)請去github下(xia)(xia)載。鏈接地(di)址(zhi)如下(xia)(xia)。至于具體的(de)(de)(de)碼(ma)代(dai)碼(ma)的(de)(de)(de)過(guo)程(cheng)，請各(ge)位(wei)有(you)(you)(you)(you)(you)(you)興趣的(de)(de)(de)，可以(yi)按照我(wo)(wo)(wo)的(de)(de)(de)思路(lu)(lu)一(yi)(yi)起來(lai)，首先呢，可以(yi)看到微信小程(cheng)序是(shi)(shi)(shi)一(yi)(yi)種網頁性的(de)(de)(de)服(fu)務(wu)。類似于我(wo)(wo)(wo)們最(zui)常見的(de)(de)(de)html5，加css3，加javascript的(de)(de)(de)構(gou)造。所以(yi)我(wo)(wo)(wo)用(yong)以(yi)前寫網站的(de)(de)(de)時候的(de)(de)(de)一(yi)(yi)些(xie)(xie)經(jing)驗來(lai)解析這(zhe)(zhe)(zhe)個(ge)(ge)(ge)代(dai)碼(ma)。我(wo)(wo)(wo)的(de)(de)(de)主(zhu)要(yao)思路(lu)(lu)：就(jiu)(jiu)是(shi)(shi)(shi)首先我(wo)(wo)(wo)們要(yao)遍歷(li)一(yi)(yi)下(xia)(xia).wxml文(wen)件(jian)，也就(jiu)(jiu)是(shi)(shi)(shi)最(zui)常見的(de)(de)(de)超文(wen)本(ben)標記語(yu)言。它會(hui)告訴我(wo)(wo)(wo)們的(de)(de)(de)手機(ji)瀏(liu)覽器(qi)，這(zhe)(zhe)(zhe)個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)要(yao)放(fang)什(shen)(shen)么(me)，那個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)放(fang)什(shen)(shen)么(me)？這(zhe)(zhe)(zhe)個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)長什(shen)(shen)么(me)樣，那個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)長什(shen)(shen)么(me)樣？然后(hou)(hou)具體的(de)(de)(de)這(zhe)(zhe)(zhe)個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)到底是(shi)(shi)(shi)長什(shen)(shen)么(me)樣呢就(jiu)(jiu)交給css也就(jiu)(jiu)是(shi)(shi)(shi)樣式文(wen)件(jian)來(lai)處(chu)理。然后(hou)(hou)，還(huan)有(you)(you)(you)(you)(you)(you)Js文(wen)件(jian)，負責邏輯層的(de)(de)(de)一(yi)(yi)些(xie)(xie)事(shi)件(jian)觸發(fa)(fa)，就(jiu)(jiu)比如說我(wo)(wo)(wo)點(dian)了這(zhe)(zhe)(zhe)個(ge)(ge)(ge)按鈕一(yi)(yi)下(xia)(xia)會(hui)發(fa)(fa)生(sheng)(sheng)什(shen)(shen)么(me)呢？這(zhe)(zhe)(zhe)個(ge)(ge)(ge)就(jiu)(jiu)要(yao)交給javascript來(lai)進行解析。具體某一(yi)(yi)步(bu)我(wo)(wo)(wo)做(zuo)什(shen)(shen)么(me)這(zhe)(zhe)(zhe)個(ge)(ge)(ge)我(wo)(wo)(wo)就(jiu)(jiu)不(bu)(bu)太多說了。反正我(wo)(wo)(wo)打開這(zhe)(zhe)(zhe)個(ge)(ge)(ge)項(xiang)(xiang)(xiang)目(mu)的(de)(de)(de)第(di)一(yi)(yi)頁，我(wo)(wo)(wo)是(shi)(shi)(shi)找到了index.wxml文(wen)件(jian)。然后(hou)(hou)依次的(de)(de)(de)看這(zhe)(zhe)(zhe)個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)有(you)(you)(you)(you)(you)(you)個(ge)(ge)(ge)什(shen)(shen)么(me)組件(jian)，這(zhe)(zhe)(zhe)個(ge)(ge)(ge)地(di)方(fang)(fang)(fang)有(you)(you)(you)(you)(you)(you)個(ge)(ge)(ge)什(shen)(shen)么(me)事(shi)件(jian)觸發(fa)(fa)，然后(hou)(hou)再在對應的(de)(de)(de).js或者是(shi)(shi)(shi).wxss文(wen)件(jian)里面找到相關(guan)解釋，再進行自(zi)己的(de)(de)(de)一(yi)(yi)些(xie)(xie)理解與修改！就(jiu)(jiu)這(zhe)(zhe)(zhe)么(me)簡(jian)單，讀(du)小程(cheng)序千萬別對著js文(wen)件(jian)去讀(du)，會(hui)瘋的(de)(de)(de)！最(zui)好(hao)的(de)(de)(de)就(jiu)(jiu)是(shi)(shi)(shi)把自(zi)己代(dai)入用(yong)戶：我(wo)(wo)(wo)做(zuo)了這(zhe)(zhe)(zhe)一(yi)(yi)步(bu)，會(hui)有(you)(you)(you)(you)(you)(you)什(shen)(shen)么(me)事(shi)情發(fa)(fa)生(sheng)(sheng)？那么(me)，這(zhe)(zhe)(zhe)個(ge)(ge)(ge)事(shi)情的(de)(de)(de)發(fa)(fa)生(sheng)(sheng)，在視圖(tu)(tu)層是(shi)(shi)(shi)怎么(me)實現(xian)？然后(hou)(hou)更深層次的(de)(de)(de)邏輯層是(shi)(shi)(shi)怎么(me)觸發(fa)(fa)這(zhe)(zhe)(zhe)些(xie)(xie)事(shi)件(jian)的(de)(de)(de)？我(wo)(wo)(wo)們該(gai)如何做(zuo)到這(zhe)(zhe)(zhe)個(ge)(ge)(ge)事(shi)情？這(zhe)(zhe)(zhe)么(me)一(yi)(yi)番(fan)理解下(xia)(xia)來(lai)就(jiu)(jiu)很順暢的(de)(de)(de)可以(yi)坐到理解項(xiang)(xiang)(xiang)目(mu)了。至于更深層次的(de)(de)(de)讀(du)代(dai)碼(ma)。我(wo)(wo)(wo)就(jiu)(jiu)沒有(you)(you)(you)(you)(you)(you)太多的(de)(de)(de)指導了。你要(yao)讀(du)這(zhe)(zhe)(zhe)個(ge)(ge)(ge)還(huan)是(shi)(shi)(shi)要(yao)有(you)(you)(you)(you)(you)(you)點(dian)基礎的(de)(de)(de)， 人心(xin)不(bu)(bu)足蛇吞象一(yi)(yi)點(dian)都不(bu)(bu)好(hao)玩(wan)！

3、代碼和圖片

意外發現(xian)，代碼實在(zai)太(tai)多(duo)了。現(xian)在(zai)是(shi)北京時間2017/2/2/23:59，我要睡覺(jue)了。一個個粘貼實在(zai)太(tai)麻煩了。我還是(shi)一次行的放到: //github.com/HustWolfzzb/WeChat-Fucking_Running.git 然后諸君有興趣的自己去下載吧。

 姑且(qie)把圖(tu)片放在下(xia)面。這(zhe)個(ge)放上來只要一拖就好(hao)，簡單方便！（v保留(liu)了(le)在項目文(wen)件中的(de)名字，方便下(xia)載~）

<!--
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;
}

結束語

小程(cheng)序算是假(jia)期的(de)(de)一(yi)個(ge)調劑吧，不(bu)(bu)(bu)然(ran)可(ke)能就(jiu)(jiu)真的(de)(de)天天看小說，然(ran)后逛逛B站(zhan)了。然(ran)后，我(wo)覺得我(wo)有(you)必要show一(yi)下我(wo)的(de)(de)工作環(huan)境(jing)，最近都(dou)(dou)有(you)點不(bu)(bu)(bu)想(xiang)走(zou)人(ren)(ren)家，天天在家寫代(dai)碼了~~~~不(bu)(bu)(bu)過(guo)明(ming)天估計(ji)還是要出去走(zou)走(zou)的(de)(de)。一(yi)個(ge)很(hen)尊敬的(de)(de)姑奶(nai)奶(nai)一(yi)直叫我(wo)去她家里坐坐，吃頓飯。不(bu)(bu)(bu)去就(jiu)(jiu)真的(de)(de)感覺特別對(dui)不(bu)(bu)(bu)住老人(ren)(ren)家，以前(qian)都(dou)(dou)說年后去，結果很(hen)多(duo)次都(dou)(dou)是匆匆忙(mang)忙(mang)去學校。希望各位也珍惜(xi)眼前(qian)人(ren)(ren)，老人(ren)(ren)應該是對(dui)你(ni)最沒有(you)想(xiang)法的(de)(de)人(ren)(ren)，但是往(wang)往(wang)也是關心你(ni)的(de)(de)想(xiang)法最不(bu)(bu)(bu)含(han)雜質(zhi)的(de)(de)人(ren)(ren)。他們已經老了，再多(duo)的(de)(de)物欲橫流都(dou)(dou)對(dui)他們影響甚小，趁著這些可(ke)愛的(de)(de)老人(ren)(ren)家還在世，多(duo)多(duo)去看望才是我(wo)們應該做的(de)(de)！

---

大神(shen)的作品(pin)就不安(an)利(li)了(le)。我自(zi)己寫完的這(zhe)些，我覺(jue)得(de)應(ying)該(gai)比之前說(shuo)的一些膜拜的作品(pin)要優秀了(le)。明(ming)天繼續改進，希望大家(jia)會(hui)喜歡！