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

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

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

圖片輪播

傳參頁(yè)面跳轉(zhuǎn)

按鈕點(diǎn)擊彈窗

音樂(lè)播放、暫停、上一曲、下一曲

選歌播放

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

首屏

（圖一）

頁(yè)面的切換

（圖二）

播放效果

（圖三）

暫停、上一首、下一首

（圖四）

彈窗及選歌

（圖五）

*

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

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

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

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

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

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

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

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

音頻的后臺(tái)播放

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

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

播放狀態(tài)。

歌曲播放時(shí)頁(yè)面動(dòng)起來(lái)，歌曲未播放時(shí)靜止

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

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

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

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

（我在這收獲了另一種寫(xiě)動(dòng)畫(huà)效果的方式，哈哈）

next: function () {
        // 全局定義了proSet rotSet timeSet，因?yàn)樾枰宄?jì)時(shí)器
        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用來(lái)把n秒轉(zhuǎn)換為xx:xx的顯示形式
            });
        },1000)
    }

頁(yè)面還原

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

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

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

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

個(gè)人郵箱：QiuShuiZC@163.com

github地址：秋水白

wx: zcfusheng

大家可以一起交流學(xué)習(xí)，如果覺(jué)得這個(gè)項(xiàng)目不錯(cuò)的話，用star來(lái)砸我吧。

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