摘要：為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。查文檔發(fā)現(xiàn)，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護(hù)了，后者低版本需做兼容處理。目前還有一些功能暫未實現(xiàn)，會在以后繼續(xù)完善項目，繼續(xù)學(xué)習(xí)。

為了提高自己，最近在學(xué)習(xí)微信小程序，選題是仿網(wǎng)易云音樂。期間踩過了大把的坑，bug出現(xiàn)的難受和解決bug歡喜，一直是伴隨我階段性學(xué)習(xí)這個項目的心情。初步完成了項目的主要功能，來分享一下自己的心路歷程。

列表式渲染數(shù)據(jù)

圖片輪播

傳參頁面跳轉(zhuǎn)

按鈕點擊彈窗

音樂播放、暫停、上一曲、下一曲

選歌播放

嵌套template頁及傳遞數(shù)據(jù)

首屏

（圖一）

頁面的切換

（圖二）

播放效果

（圖三）

暫停、上一首、下一首

（圖四）

彈窗及選歌

（圖五）

*

小程序的開發(fā)模式是MVVM模式。簡單的講就是頁面綁定的值改變，頁面就發(fā)生改變；頁面改變，頁面的綁定的值改變。這樣的話，列表式渲染就十分好用。只用寫一個通用的骨架，然后使用列表渲染生成頁面，這樣非常省時間省力氣。所以這個項目，大量充斥著列表渲染。

有的頁面部分可能會出現(xiàn)在好幾個頁面上。在這個項目里，頁面頂部的部分出現(xiàn)在多個部分中，同時小程序里很多地方需要用到**彈性布局居中效果**于是我便把常用css樣式寫在app.wxss中，這樣可以復(fù)用。

頁面右上角的四根豎線出現(xiàn)在多個頁面中，那變可以多帶帶拿出來寫，然后在通過template，導(dǎo)入至不同的頁面中去。

選歌很需要解決的一點就是怎么才知道選擇的是哪一首歌，歌單是哪一個歌單。一個頁面獲取到其他頁面想傳遞過來的數(shù)據(jù)的方式有很多。其一、可以通過url跳轉(zhuǎn)的時候，傳參跳轉(zhuǎn)，再通過跳轉(zhuǎn)頁面中onload事件添加options參數(shù)獲得。其二、可以通過點擊事件改變?nèi)謱傩詆lobalData的某項的值，然后再跳轉(zhuǎn)頁面中得到globalData中相應(yīng)的值，便能知道頁面跳轉(zhuǎn)中想傳遞的值。這個項目使用了這兩種方式，url傳參獲取播放第幾首歌曲，全局屬性globalData傳遞歌單。

后臺數(shù)據(jù)使用的是Easy Mock假數(shù)據(jù)，一個方便的數(shù)據(jù)構(gòu)建平臺。
當(dāng)然還有方便的weui框架了，這個框架可以去github上拷貝，然后再根據(jù)weui示例，找到想要的想過，再去下載好了的文件里找到對應(yīng)的代碼，試一試便知道要如何使用了。
圖片和音樂的話，因為使用的是網(wǎng)絡(luò)地址。如果直接從網(wǎng)站上，按F12找到資源然后提取的話，通常提取的資源過幾天便會失效。所以我們需要百度音樂外鏈、圖片外鏈，然后會有相應(yīng)的網(wǎng)站，可以生成一個長期不失效的鏈接，供我們下載圖片和音樂。

項目起步第一個問題便是圖片存放與加載。一些需要推送的消息以圖片的形式展示，那么這個圖是千萬不能存在本地，需要通過src鏈接網(wǎng)絡(luò)地址然后下載顯示。那么問題來了：首頁結(jié)構(gòu)已經(jīng)出來，圖片卻要延遲出來。頁面則會出現(xiàn)這種情況：

經(jīng)過思考，發(fā)現(xiàn)首頁圖片輪播條有很多張圖片，他們會同時加載。而需求最急的是顯示好第一張圖片，第一張圖片加載完成后，再加載其他圖片。這樣能減少頁面首加載中，圖片加載的將近一半的網(wǎng)速占用。查文檔發(fā)現(xiàn)，小程序中圖片加載完成后，有一個加載完成事件bindload。
因為使用的是列表渲染來填充頁面，所以便可以讓綁定渲染圖片的數(shù)據(jù)showImage起始為空，這樣頁面就先不會渲染，然后第一張圖加載完后，再給showImage賦值，然后就會自動渲染頁面，加載其他圖片了。這樣就能提高頁面的加載速度。
（備注:這里有些像懶加載的味道，在用戶需要的時候加載圖片）

這里有一個小小的技巧，第一張圖的swiper-item不參與頁面渲染，這樣第一張圖就一定會進(jìn)行加載。在第一張圖加載完成后，再進(jìn)行頁面渲染。同時讓swiper開始輪播效果和生成指示點。

音頻的后臺播放

在播放界面時，一開始使用的組件，洋洋灑灑敲下了一連串的代碼，播放音樂，一切正常。但當(dāng)我們前往另一個頁面時，播放的音樂就沒聲音了。查了文檔才知道audio并不能實現(xiàn)后臺播放，實現(xiàn)后臺播放的是wx.getBackgroundAudioPlayerState()和wx.getBackgroundAudioManager()兩個api。前者在微信客戶端1.2.0版本就不開始維護(hù)了，后者低版本需做兼容處理。這個項目我使用的是第二個api。
（備注：wx.getBackgroundAudioManager()官方文檔）

值得注意的是，當(dāng)音頻對象的src取得鏈接時，就自動開始播放。

播放狀態(tài)。

歌曲播放時頁面動起來，歌曲未播放時靜止

看見動畫了，第一個反應(yīng)是css的animation，后來經(jīng)過思考，如果不進(jìn)行dom操作就要控制動畫的進(jìn)行與否需要做的數(shù)據(jù)綁定就會很多，不方便使用。于是查文檔發(fā)現(xiàn)`wx.createAnimation(OBJECT)`這個api，但使用這個api，如果需要做到動畫的循環(huán)播放，要寫的js也很多很麻煩。經(jīng)過了各種踩坑，根據(jù)小程序中的`progress`進(jìn)度條組件，發(fā)現(xiàn)一個很棒的方法，那就是行內(nèi)樣式綁定數(shù)據(jù)。

（備注：指針動畫簡單，進(jìn)行一次就結(jié)束，這里不提。。）

（備注：進(jìn)度條是小程序自帶的組件，已播放時間完成方式和進(jìn)度條相似，這里與動畫效果一并提出）

這樣，只用在播放時，設(shè)計計時器，定時的按比列更改rotata、left、progress、的值，頁面就會有相關(guān)改變。這個函數(shù)中，一開始便是清除計時器，因為有一個坑點：點擊下一曲或上一曲時，計時器并未清除，那么，便會有兩個計時器同時作用于一個值得改變（這種頭疼的情況相信很多人都遇到過）。把三個計時器（轉(zhuǎn)盤、按鈕、進(jìn)度條）在函數(shù)運行的開始就做清除，這樣就讓每次調(diào)用函數(shù)時，都先清除上一層的計時器，做到只有一個計時器作用于一個值。這種方式，用少量的代碼，形成了可控的動畫效果，很是方便。

（我在這收獲了另一種寫動畫效果的方式，哈哈）

next: function () {
        // 全局定義了proSet rotSet timeSet，因為需要清除計時器
        var timeCount;
        clearInterval(proSet);
        clearInterval(rotSet);
        clearInterval(timeSet);
        proSet = setInterval(() => {
            if (this.data.progress >= 100) {
                i++;
                if(i==this.data.music.length){
                    i=0;
                }
                app.globalData.i=i;
                backgroundAudioManager.stop();                            
                this.nameBackMusic();
                timeCount = 0;
                this.setData({
                    progress: 0,
                    left: 0,
                    songTime: this.data.music[i].songTime,
                    songer: this.data.music[i].songer,
                    songName: this.data.music[i].songName,
                    time: secondToDate(this.data.music[i].songTime)
                });
            }
            else if (this.data.run == 0) {
                clearInterval(proSet);
                clearInterval(rotSet);
                clearInterval(timeSet);
            }
            this.setData({
                progress: 0.01 + this.data.progress,
                left: 0.0458 + this.data.left
            });
        }, this.data.music[i].songTime / 10);
        rotSet = setInterval(() => {
            this.setData({
                rotate: 1 + this.data.rotate,
            });
        }, 24);
        timeCount = backgroundAudioManager.currentTime;
        if (typeof (backgroundAudioManager.currentTime) === "undefined")
        {
            timeCount = 0;
        }
        timeSet = setInterval(()=>{
            timeCount++;
            this.setData({
                currentTime: secondToDate(timeCount), 
                //secondToDate用來把n秒轉(zhuǎn)換為xx:xx的顯示形式
            });
        },1000)
    }

頁面還原

在播放界面中，設(shè)計一個值run初始值為0，用來記錄是否播放，播放時run為1，暫停時run為0。在頁面跳轉(zhuǎn)在返回播放頁面時，之前因為播放設(shè)置的data值會全部還原，導(dǎo)致頁面靜態(tài)顯示（進(jìn)度條不動、時間不增加等）。這個時候，全局屬性globalData就上場了。不論是在選歌、播放、暫停的時候，globalData中的變量記錄播放的狀態(tài)（是否播放、播放哪一首歌等）。而播放頁面重新打開會執(zhí)行onShow()生命周期函數(shù)，這個時候變可以從全局變量中得到播放的狀態(tài)，然后決定播放頁面是否要動起來和相應(yīng)的數(shù)據(jù)）。

因為頁面第一次加載也會執(zhí)行onShow()函數(shù)，而暫停音樂時backgroundAudioManager.paused返回true，播放時放回fals，沒有音樂播放時返回undefined，如果單純的用:if(backgroundAudioManager.paused)則會判斷無音樂和音樂播放時都為假，這樣兩種不同的情況執(zhí)行相同的操作，則會發(fā)生意外，所以需要添加這樣的判斷
if (typeof (backgroundAudioManager.paused) !== "undefined") 用以區(qū)分播放和無音樂事件。

一路學(xué)習(xí)過來，期間碰到的大大小小的問題數(shù)不勝數(shù)，收獲很大。目前還有一些功能暫未實現(xiàn)，會在以后繼續(xù)完善項目，繼續(xù)學(xué)習(xí)。

這個項目給我最大的啟示就是文檔是一個好東西，鍛煉看文檔的能力會自己接受新東西的速度變快。再就是很多時候解決問題的方法多種多樣，寫代碼時可以多做幾次考慮用哪種方式實現(xiàn)一個功能，這樣既讓項目變得更高校，也讓自己變得更優(yōu)秀。

個人郵箱：[email protected]

github地址：秋水白

wx: zcfusheng

大家可以一起交流學(xué)習(xí)，如果覺得這個項目不錯的話，用star來砸我吧。

（備注：我給項目里放的音樂都是周董和姿媽的，哈哈，畢竟男杰倫，女燕姿）