基于Node接口的網易云小程序實戰心得【WEB前端大作戰】

因為之前也學過一段時間微信小程序，感覺小程序也挺有意思的。這次隨著移動應用開發全棧計劃考核，來做一下仿網易云音樂小程序。在這期間踩過了很多的坑，想要實現的效果和自己打的不一致的難受，直接戴上痛苦面具，慢慢的摸爬滾打，看著文檔和之前課程說講的，逐一改進，差不多像個樣子。這里初步完成了項目的主要功能，來分享一下自己的心路歷程。

實現功能

列表式渲染數據

圖片輪播

傳參頁面跳轉

按鈕點擊彈窗

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

選歌播放

嵌套template頁及傳遞數據

搜索音樂播放

熱搜榜

MV視頻

登錄/注冊

個人/我的消息/我的好友（待完善）

項目框架

wangyi_cloud_music // 網易云音樂 ├── components // 組件 ├── wangyi_cloudMusic_api_server // node版本網易云音樂接口 ├── pages // 小程序頁面 │ └── index // 首頁 │ └── login // 登錄頁 │ └── personal // 個人中心 │ └── recommendSong // 每日推薦 │ └── search // 搜索頁 │ └── songDetail // 音樂詳細頁 │ └── songListDetail // 歌單頁 │ └── video // 視頻頁 ├── utils // 工具 │ └── request.js // 請求封裝體 ├── static // 靜態資源

項目思想

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

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

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

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

項目接口

使用的是網上找的node版本網易云音樂接口https://binaryify.github.io/NeteaseCloudMusicApi/

項目細節

高度計算

這里使用的是 scroll-view 計算高度，用 calc(100vh - 已有的高度)可滾動視圖區域。使用豎向滾動時，需要給 scroll-view 一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認為px，支持傳入單位(rpx/px)。

動態css

通過 js 操作 css，這種情況我們可以通過內聯 style 來解決。

style="width: {{currentWidth}}"

動態class

在條件滿足時，加入 class，isPlay 是布爾類型，此處為三元表達式。同時前面的 class 不會受到任何影響。

class= “needle {{isPlay ? ‘needleRotate’ : ‘’}}”

或者直接用 &&

class= “needle {{isPlay && ‘needleRotate’}}”

登錄

通過監聽兩個 input 框的變化，實時保存到 data 中，登錄成功后將用戶信息和 cookies 保存在storage 中，使用 wx.setStorageSync，一旦有 cookies 后，帶在請求中，統一寫在 request 封裝體。

動畫旋轉

看下面這個動畫，一般的音樂播放器都有，那它是怎么實現的呢？

/* 搖桿抬上，默認情況 */ .needle { /* 調整旋轉中心點 */ transform-origin: 20rpx 0; /* 旋轉角度 -20° */ transform: rotate(-20deg); /* 旋轉時間 1秒 */ transition: transform 1s; } /* 搖桿放下，音樂播放時 */ .needleRotate { /* 不旋轉*/ transform: rotate(0deg); }

針對桿子是抬上還是抬下，我通過一個 js 變量來判斷，因此用到了上面的動態class。

動畫關鍵幀

` /* 磁盤轉圈動畫，音樂播放時 /

.discAnimation {

/

Animation-name：綁定到選擇器的 keyframe 的名稱。

animation-duration：完成動畫所花費的時間

animation-timing-function：規定動畫的速度曲線。

linear 動畫從頭到尾的速度是相同的。

animation-delay：在動畫開始之前的延遲時間。

延遲 1秒 等搖桿下來再開始旋轉

animation-iteration-count：動畫應該播放的次數。

infinite 無線循環

*/

animation: disc 6s linear 1s infinite;

}

/*

@keyframes 用來設置動畫幀

from to

- 適用于簡單的動畫，只有起始幀和結束幀

百分比

- 多用于復雜動畫，不止兩幀

*/

@keyframes disc {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

`

綁定事件傳參

全局變量

app.js 文件中設置，globalData 對象就是存儲全局變量的。

App({ globalData: { isMusicPlay: false, // 是否有音樂在播放 musicId: '' // 播放的音樂Id }, })

應用

const appInstance = getApp() appInstance.globalData.musicId

本地存儲

1、小程序中的本地存儲有同步功能，可用于保存用戶信息(用戶登錄后的一些基本信息)

2、緩存的更新需要使用 setStorageSync 方法。

效果圖

結語

一路跟隨華為云移動應用開發成長計劃學習過來，期間碰到的大大小小的問題數不勝數，收獲很大。目前還有一些功能暫未實現，會在以后繼續完善項目，繼續學習。

這個項目給我最大的啟示就是遇到問題不要逃避，自己想辦法解決，當你成功解決掉那個問題后，相信我，你一定非常開心。再就是很多時候解決問題的方法多種多樣，寫代碼時可以多做幾次考慮用哪種方式實現一個功能，這樣既讓項目變得更高效，也讓自己變得更優秀。越努力，越幸運！加油，IT朋友們。

【WEB前端大作戰】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

Node.js 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。