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

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

列表式渲染數據

圖片輪播

傳參頁面跳轉

按鈕點擊彈窗

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

選歌播放

嵌套template頁及傳遞數據

首屏

（圖一）

頁面的切換

（圖二）

播放效果

（圖三）

暫停、上一首、下一首

（圖四）

彈窗及選歌

（圖五）

*

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

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

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

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

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

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

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

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

音頻的后臺播放

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

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

播放狀態。

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

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

（備注：指針動畫簡單，進行一次就結束，這里不提。。）

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

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

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

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秒轉換為xx:xx的顯示形式
            });
        },1000)
    }

頁面還原

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

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

一路學習過來，期間碰到的大大小小的問題數不勝數，收獲很大。目前還有一些功能暫未實現，會在以后繼續完善項目，繼續學習。

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

個人郵箱：QiuShuiZC@163.com

github地址：秋水白

wx: zcfusheng

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

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