[2]。為了幫助開發(fā)人員更簡單，有效地開發(fā)和調(diào)試微信小程序，微信正式啟動了基于原始“官方帳戶”Web調(diào)試工具的新的微信開發(fā)者工具。通過微信開發(fā)者工具進行調(diào)試，開發(fā)人員可以調(diào)試小程序的API和頁面，查看和編輯代碼，預覽和發(fā)布小程序等功能。網(wǎng)易云接口APIAPI(ApplicationProgrammingInterface)是一種軟件中介，允許兩個應用程序之間相互通信。該項目所有接口使用的都是由網(wǎng)易云音樂提供的開放接口，最終請求的地址是自己使用Node.js搭建的服務器接口，流程為先請求自己搭建的Node.js服務器，由Node.js轉發(fā)請求給網(wǎng)易云音樂的服務器，此舉的目的是為了接口規(guī)范，統(tǒng)一化。接口技術AJAX全稱AsynchronousJavaScriptandXML（異步JavaScript和XML技術），它是指一種將多種技術集成在一起的基于Web的Web開發(fā)技術。傳統(tǒng)的Web應用程序允許在用戶端完成表單（表單），如果要提交表單，則請求將發(fā)送到Web服務器服務器接受并處理傳入的表單，然后將其返回到新的Web頁面。因為兩個頁面上的大多數(shù)HTML代碼通常是相同的，所以此方法會破壞大量帶寬。而使用Ajax技術進行通信的話，可以降低web服務器的負載，因為Ajax只需要發(fā)送一次請求給服務器端，獲得所需要返回的數(shù)據(jù)，并使用JavaScript處理服務器端和瀏覽器端之間的響應請求，使得兩端之間所交換的數(shù)據(jù)相比上一個方法來說大量降低，因此，服務器的響應速度更快。Node.jsNode.js是一個免費的，開源的，跨平臺的運行JavaScript的環(huán)境，使開發(fā)人員可以在瀏覽器之外編寫命令行工具和服務器端腳本。Node.js使用事件驅(qū)動的非阻塞I/O模型，使其輕巧高效，尤其是對于服務器端和網(wǎng)絡應用程序。Node.js具有一系列內(nèi)置模塊，這些模塊將系統(tǒng)與作為IIS的ApacheHTTP服務器與ApacheHTTP服務器分開，并作為獨立服務器運行。配置程序app.json文件是計算機整體配置的基本文件。確定頁面文件路徑，窗口性能，Web時間設置和多個選項卡設置等[2]。關于app.json的詳細配置如表2.1所示。表2.1app.json配置項屬性類型必填描述頁面結構(pages)StringArrayY設置頁面路徑窗口(window)ObjectN設置頁面的window屬性導航標簽(tabBar)ObjectN設置底部tab的表現(xiàn)pagespages可用于指定小型程序包含的頁面，每個頁面對應于頁面的路徑（包括文件名）。數(shù)組中的第一項代表小程序的初始頁面（主頁）。要在小程序中添加或刪除頁面，必須更改pages數(shù)組。文件名不需要擴展名。該框架將在適當?shù)奈恢米詣诱业?json，.js，.wxml和.wxss文件進行處理。windowwindow配置用于設置小程序狀態(tài)欄，導航欄，標題和窗口背景顏色，其具體包含的屬性及配置如表2.2所示。表2.2window屬性及配置屬性類型默認值描述navigationBarBackgroundColor十六進制#000000導航欄背景顏色navigationBarTextStyle字符串white導航欄標題顏色，僅支持black/whitenavigationBarTitleText字符串無導航欄標題文字內(nèi)容backgroundColor十六進制#ffffff窗口的背景色backgroundTextStyle字符串dark下拉背景樣式，僅支持dark/lighttabBar如果小程序是多選項卡應用程序（使用應用程序窗口底部或頂部的選項卡欄在選項卡之間切換），則其本質(zhì)等同于鏈接。當用戶在選項卡之間切換時則可以使用tabBar配置項指定選項卡欄和所顯示頁面的行為。tabBar是一個數(shù)組，只能配置2到5個選項卡，這些選項卡按陣列順序列出REF_Ref72143610\r\h[2]，其具體的配置屬性如表2.3所示。表2.3tabBar配置屬性屬性類型必填描述color十六進制Ytab上的文字默認顏色selectedColor十六進制Ytab上的文字選中時的顏色backgroundColor十六進制Ytab的背景色list數(shù)組Ytab的列表系統(tǒng)分析設計功能分析分析當前市面上的主流播放軟件，通過微信小程序開發(fā)確定音樂小程序的功能有用戶的登錄，歌曲的播放、暫停、繼續(xù)播放、切換歌曲、進度條，視頻的播放轉發(fā)分享，推薦歌曲，排行榜，推薦歌單，在線搜索功能以及搜索歷史記錄等功能?？傮w結構分析根據(jù)對目前媒體類播放器的各種分析進行對小程序的總體框架結構設計，如圖3.1所示。將音樂播放器插入微信小程序。此過程需要使用公司注冊信息和法人實體的個人信息來請求注冊帳戶獲取AppID，完成文件配置，加載服務器等任務。騰訊在完成審核后，將音樂播放器嵌入到微信小程序中。圖3.1總體結構設計主頁模塊主頁模塊由Banner輪播圖、圖標導航區(qū)域、推薦歌曲模塊以及排行榜模塊組成。輪播圖區(qū)域輪播圖通過調(diào)用/banner接口向后臺獲取banner數(shù)據(jù)，再通過type選擇相應的終端數(shù)據(jù)，type=0獲取PC端的數(shù)據(jù)，type=1獲取Android端的數(shù)據(jù)，type=2獲取iPhone端的數(shù)據(jù)，type=3獲取iPad端的數(shù)據(jù)。接口返回數(shù)據(jù)如圖3.2所示。圖3.2輪播圖數(shù)據(jù)圖標導航區(qū)域圖標導航區(qū)域有每日推薦、歌單、排行榜、以及搜索四個導航，點擊每日推薦圖標可以通過路由跳轉至每日推薦頁面，點擊搜索圖標可以通過路由跳轉至搜索頁面。推薦歌曲模塊推薦歌曲模塊需要實現(xiàn)動態(tài)動態(tài)滑塊效果，通過scroll-view標簽來設計滑塊，再通過scroll-x屬性實現(xiàn)左右滑動的效果；通過調(diào)用/personalized接口獲取后臺數(shù)據(jù)，limit為可選參數(shù)，默認為30，這里設置10，拿到10條數(shù)據(jù)，點擊歌單可以跳轉到相應的歌單列表頁面，接口返回數(shù)據(jù)如圖3.3所示。圖3.3推薦歌單數(shù)據(jù)排行榜模塊排行榜的分類類目有0-20共21種，本次設計只需要取前五種分類顯示即可，排行榜模塊整體要實現(xiàn)輪播效果，當前滑塊中顯示后一個滑塊部分內(nèi)容。排行榜模塊調(diào)用/top/list接口拿到后臺相應的數(shù)據(jù)，需要根據(jù)idx的值獲取對應的數(shù)據(jù)，idx的取值范圍是0-20，我們需要0-4，所以需要發(fā)送5次請求，接口返回數(shù)據(jù)如圖3.4所示。圖3.4排行榜數(shù)據(jù)視頻video頁模塊頭部搜索點擊搜索路由跳轉至搜索頁面。導航模塊導航模塊通過/video/group/list接口動態(tài)獲取視頻導航標簽列表數(shù)據(jù)，后臺對應的原數(shù)據(jù)有100條，通過slice（）方法截取前15條數(shù)據(jù)用于項目的使用，接口返回數(shù)據(jù)如圖3.5所示。圖3.5導航標簽列表數(shù)據(jù)視頻列表視頻列表模塊首先要判斷用戶是否登錄，如果沒有登錄則不顯示視頻列表數(shù)據(jù)，用戶登錄后，通過調(diào)用/video/group動態(tài)獲取視頻數(shù)據(jù)，發(fā)請求需要攜帶用戶cookie進行驗證，實現(xiàn)視頻的播放、暫停、分享的功能，用圖片代替viedo標簽進行性能優(yōu)化，分享功能的實現(xiàn)，通過點擊視頻列表模塊右下角‘三個點區(qū)域’實現(xiàn)轉發(fā)分享，接口返回的數(shù)據(jù)如圖3.6所示。圖3.6視頻數(shù)據(jù)個人中心頁模塊頭部模塊用戶未登錄顯示默認頭像圖片，及游客姓名，用戶未登錄的時候可以跳轉至登錄界面，登錄以后點擊不跳轉，用戶登錄顯示用戶頭像及賬號名。通過wx.getStorageSync()方法獲取本地存儲的用戶登錄信息。最近播放模塊用戶登錄后顯示用戶最近播放記錄，調(diào)用/user/record獲取用戶最近播放記錄，需要登錄以后拿到用戶的uid才能獲取對應的數(shù)據(jù)，可選擇的參數(shù)為type=1時只返回weekData,type=0時返回allData，接口返回的數(shù)據(jù)如圖3.7所示。圖3.7播放記錄數(shù)據(jù)內(nèi)容區(qū)模塊手指滑動內(nèi)容區(qū)跟隨移動，只能向下移動，最大移動距離80rpx，使用的技術是CSStransform動畫技術。CSStransform效果是指該技術通過移動，旋轉，使其在瀏覽器中透明且不引人注目來改變網(wǎng)頁上元素的外觀。在CSS中定義的修改操作在生成頁面之前已應用于網(wǎng)頁元素，因此該過程將不可見。但是，這些變化也可以通過懸?；蚱渌愃剖录|發(fā)，以便我們可以看到它們的行動過程。登錄頁模塊通過個人中心，video視頻頁可以點擊跳轉至登錄界面，登錄的是網(wǎng)易云音樂真實的手機號和密碼，登錄的流程為：收集表單項驗證前端驗證驗證用戶信息（賬號密碼）是否合法前端驗證不通過就提示用戶，不需要發(fā)請求給后端3）前端驗證通過了，發(fā)請求（攜帶賬號密碼）給服務器端3.后端驗證

1）驗證用戶是否存在

2）用戶不存在，直接返回，告訴前端用戶不存在

3）用戶存在驗證密碼是否正確

4）密碼不正確返回給前端提示密碼不正確

5）密碼正確則返回給前端，攜帶用戶有關的個人數(shù)據(jù)提醒用戶登錄成功用戶有關的個人數(shù)據(jù)將在登錄成功后存到本地的服務器中，登錄成功后跳轉至個人中心頁。登錄接口返回的數(shù)據(jù)如圖3.8所示。圖3.8登錄數(shù)據(jù)推薦歌曲頁模塊首先判斷用戶是否登錄，沒有登錄跳轉至登錄頁面，利用date函數(shù)顯示當前日期，顯示推薦歌曲列表，點擊歌曲跳轉至音樂播放頁面進行音樂播放。通過調(diào)用/recommend/songs接口獲取給用戶的每日推薦數(shù)據(jù)，發(fā)請求需要攜帶用戶cookie進行驗證，驗證成功后可以獲取每日推薦的歌曲列表。接口返回的數(shù)據(jù)如圖3.9所示。圖3.9每日推薦歌曲數(shù)據(jù)音樂詳情頁模塊1.動畫功能：根據(jù)音樂播放的狀態(tài)動態(tài)控制搖桿，磁盤進行動畫。2.音樂播放功能：根據(jù)點擊按鈕控制音樂播放暫停，根據(jù)點擊系統(tǒng)控制音樂播放按鈕控制音樂播放/暫停/停止，正確顯示音樂的播放狀態(tài)(頁面后退再進入)。調(diào)用/song/url接口用于獲取歌曲的播放地址，需要根據(jù)歌曲的id獲取。3.切換歌曲功能：點擊切換按鈕切換歌曲，需要同推薦歌曲頁面、歌單頁面進行交互。通過調(diào)用/song/detail接口獲取歌曲對應的詳情信息，需要根據(jù)歌曲的id獲取。4.進度條控制模塊：首先，找到當前歌曲的完整長度，然后找到當前歌曲的播放時間。使用不同的顏色來區(qū)分。已為進度欄設置了時間線。歌曲的播放時間標記為適當?shù)陌俜直龋㈦S長度而變化。當前長度等于進度條中的常數(shù)，播放結束。進度條流程如圖3.10所示圖3.10進度條流程搜索頁模塊搜索功能實現(xiàn)音樂關鍵字在線搜索功能，先輸入關鍵字，然后通過關鍵字來匹配相關的數(shù)據(jù)；默認關鍵字搜索功能；歷史記錄功能，根據(jù)用戶的搜索內(nèi)容顯示用戶的搜索記錄，數(shù)據(jù)需要存入至本地storage。首先，服務器必須有權訪問接口/search以獲取相應的ID和name，然后通過Ajax請求匹配ID和名稱值以訪問數(shù)據(jù)庫，這都是必需的。搜索流程如圖3.11所示，關鍵字接口返回的數(shù)據(jù)如圖3.12所示，默認搜索接口返回的數(shù)據(jù)如圖3.13所示圖3.11搜索流程圖圖3.12搜索數(shù)據(jù)圖3.13默認搜索數(shù)據(jù)熱搜榜在搜索頁面的在線搜索下方顯示，通過調(diào)用/search/hot/detail接口獲取熱搜榜數(shù)據(jù)。接口返回的數(shù)據(jù)如圖3.14所示。圖3.14熱搜榜數(shù)據(jù)系統(tǒng)實現(xiàn)配置服務器配置服務器相關信息由于本地服務器地址只能在電腦上訪問，為了能在真機上訪問到本地服務器地址，這里使用了內(nèi)網(wǎng)穿透功能，內(nèi)網(wǎng)穿透會在本地計算機和具有公共網(wǎng)絡的服務器之間建立連接，并且您可以通過檢索公共網(wǎng)絡服務器的域名來訪問本地計算機上的服務。使用uTools工具配置公網(wǎng)域名，如圖4.1所示；在config.js文件中專門配置服務器相關信息，如圖4.2所示。圖4.1配置公網(wǎng)域名圖4.2配置服務器相關信息發(fā)送Ajax請求在檢索數(shù)據(jù)庫信息并搜索歌曲以完成數(shù)據(jù)的初始交互時，將使用接口技術。前端提交一個應用程序，檢索數(shù)據(jù)，并完成首頁的數(shù)據(jù)呈現(xiàn)。首先，前端會將Ajax請求發(fā)送到服務器。請求的地址是Aiax中的參數(shù)URL。成功完成請求后，將執(zhí)行重新調(diào)用功能，并返回Ajax中的Success參數(shù)。后端Servlet收到初始請求后，首先獲取Request中的Parameter，然后將成功返回的數(shù)據(jù)分配給相應的對象。在后端返回的數(shù)據(jù)通常是JSon格式的字符串。通常根據(jù)數(shù)據(jù)處理要求將數(shù)據(jù)轉換為程序所需的JSon對象，然后前端頁面訪問轉換后的JSon對象的值以完成頁面數(shù)據(jù)呈現(xiàn)。JS控制代碼如圖4.3所示。圖4.3發(fā)送Ajax請求tabBar模塊tabBar模塊將配置三個tab，分別是主頁、視頻video頁和個人中心頁。其圖標是通過導入阿里巴巴圖標庫，然后選擇fontclass粘貼到網(wǎng)頁中，F(xiàn)ehelper可以修飾css代碼并將其粘貼到微信小程序中。其代碼控制如圖4.4所示。圖4.4tabBar主頁輪播圖區(qū)域輪播圖區(qū)域是一個可以左右滑動的圖片區(qū)域，再開發(fā)過程中使用<swiper>標簽以及<swiper>標簽下的<swiper-item>標簽進行開發(fā)，通過wx:for循環(huán)遍歷輪播圖列表數(shù)據(jù)進行展示，通過Ajax應用程序界面訪問后臺數(shù)據(jù)。請求成功后，后臺以json格式返回數(shù)據(jù)，并且接收到的數(shù)據(jù)以初始格式所需的數(shù)據(jù)格式進行處理，并放置在相應的代碼中，JS代碼獲取輪播圖數(shù)據(jù)如圖4.5所示。圖4.5獲取輪播圖數(shù)據(jù)導航區(qū)域?qū)Ш絽^(qū)域的導航標簽通過導入阿里巴巴圖標庫，然后選擇fontclass粘貼到網(wǎng)頁中，F(xiàn)ehelper可以修飾css代碼并將其粘貼到微信小程序中。由于導航頁面上的圖標必須在其他位置引用，因此在app.wxss中選擇引用它。推薦歌曲區(qū)域推薦歌曲區(qū)域的頭部區(qū)域和排行榜的頭部區(qū)域一樣，所以這里使用自定義組件進行來復用，首先將樣式和內(nèi)容提取出來，然后再index.json里面引用，最后在index.wxml里面輸入<navHeader></navHeader>就能使用組件。推薦歌曲內(nèi)容區(qū)域通過<scroll-view>標簽實現(xiàn)滑動效果，用scroll-x實現(xiàn)左右滑動，點擊歌單，跳轉到該歌單的列表頁面，通過調(diào)用/playlist/detail接口獲取歌單列表數(shù)據(jù)，點擊歌單列表的歌曲可以跳轉到音樂詳情頁面進行歌曲播放，利用PubSub.subscribe方法訂閱來自歌曲詳情頁面的信息，實現(xiàn)歌曲的切換功能。JS代碼獲取推薦歌單數(shù)據(jù)如圖4.6所示，獲取該歌單音樂列表如圖4.7所示。圖4.6獲取推薦歌單數(shù)據(jù)圖4.7獲取該歌單音樂列表排行榜區(qū)域排行榜區(qū)域需要展示歌曲的圖片、歌曲名稱以及作者，再開發(fā)過程中使用<swiper>標簽以及<swiper>標簽下的<swiper-item>標簽進行開發(fā)，通過wx:for循環(huán)遍歷排行榜列表數(shù)據(jù)進行展示，通過Ajax應用程序界面訪問后臺數(shù)據(jù)。請求成功后，后臺以json格式返回數(shù)據(jù)，并且接收到的數(shù)據(jù)以初始格式所需的數(shù)據(jù)格式進行處理，并放置在相應的代碼中，點擊排行榜下的歌曲，可以跳轉到音樂詳情頁進行歌曲播放。JS代碼獲取排行榜數(shù)據(jù)如圖4.8所示。圖4.8獲取排行榜數(shù)據(jù)視頻video頁頭部搜索區(qū)域頭部搜索區(qū)域通過bindtap綁定一個事件，然后在該事件下用wx.navgateTo()方法進行路由跳轉至搜索頁面，JS代碼控制如圖4.9所示。圖4.9跳轉至搜索頁導航標簽列表區(qū)域?qū)Ш綐撕灹斜韰^(qū)域通過<scroll-view>標簽實現(xiàn)滑動效果，scroll-x實現(xiàn)左右滑動，scroll-with-animation在設置滾動條位置時使用動畫過渡，點擊動態(tài)切換視頻列表數(shù)據(jù)，對應下邊框動態(tài)切換，且有過渡效果。JS代碼獲取導航標簽列表數(shù)據(jù)如圖4.10所示。圖4.10獲取導航標簽列表數(shù)據(jù)視頻列表區(qū)域首先判斷用戶是否登錄，如果沒有登錄則不顯示視頻列表數(shù)據(jù)，用戶登錄后，通過Ajax請求接口向后臺訪問用戶數(shù)據(jù)拿到cookie，將cookie存儲到本地，然后渲染列表，因為視頻列表的數(shù)據(jù)沒有唯一的id所以需要用map加工一下，JS控制代碼獲取視頻列表數(shù)據(jù)如圖4.11所示。圖4.11獲取視頻列表數(shù)據(jù)播放視頻播放視頻使用wx.createVideoContext創(chuàng)建video標簽的實例對象，通過判斷當前的視頻之前是否播放過，是否有播放記錄,如果有，跳轉至指定的播放位置，JS控制代碼如圖4.12所示。圖4.12播放視頻性能優(yōu)化圖片和視頻共用一個class和函數(shù)，一點擊圖片會把videoId更新到data中，然后判斷videoId與視頻哪一項匹配，哪一項匹配就顯示video而不是圖片。代碼如圖4.13所示。圖4.13性能優(yōu)化分享功能點擊視頻列表模塊右下角‘三個點區(qū)域’實現(xiàn)轉發(fā)分享，在button組件里使用open-type屬性進行分享，代碼如圖4.14所示。圖4.14分享視頻個人中心頁頭部模塊用戶未登錄顯示默認頭像圖片，及游客姓名，用戶未登錄的時候通過bindtap綁定一個toLogin事件，然后在該事件下用wx.navgateTo()方法進行路由跳轉至登錄頁面，用戶登錄后顯示用戶頭像及賬號名，登錄以后點擊不跳轉。代碼如圖4.15所示。圖4.15跳轉至登錄頁面最近播放區(qū)域最近播放需要登錄以后拿到用戶的uid才能獲取對應的數(shù)據(jù)，登錄成功后，通過Ajax請求接口向后臺訪問用戶數(shù)據(jù)拿到uid，然后渲染列表，JS控制代碼獲取用戶最近播放記錄數(shù)據(jù)如圖4.16所示。圖4.16獲取用戶播放記錄內(nèi)容區(qū)模塊手指點擊頁面并向下滑動，內(nèi)容區(qū)域頁跟隨向下移動，并且只能向下移動，最大移動距離為80rpx，使用到的技術為CSStransform動畫技術，JS控制代碼如圖4.17所示。圖4.17向下滑動登錄頁收集表單項數(shù)據(jù)通過綁定handleInput事件，可以通過id或data-type向event對象傳參，使用event.currentTarget.id或event.currentTarget.dataset.type進行傳值，當向event對象傳一個唯一的標識的時候，用id傳值，當向event對象傳一個或多個的標識的時候用data-的形式傳值。JS控制代碼如圖4.18所示。圖4.18收集表單項數(shù)據(jù)前端驗證前端驗證包括手機號驗證和密碼驗證，如果手機號內(nèi)容為空，提示用戶手機號不能為空，通過定義正則表達式驗證手機號格式是否正確，手機號的格式為11位，其次第一位是1，最后第二位為3-9，三個條件缺一不可，如果三個條件都滿足，則驗證通過，否則提示用戶手機號格式錯誤；接下來驗證密碼是否為空，如果為空，提示用戶密碼不能為空。JS控制代碼如圖4.19所示。圖4.19前端驗證后端驗證后端驗證驗證的是用戶存不存在，如果不存在，直接返回給前端，告訴前端用戶不存在，如果用戶存在，則驗證用戶是不是輸入了正確的密碼，如果輸入的密碼不正確，則返回給前端提示密碼錯誤，密碼正確返回給前端數(shù)據(jù)，攜帶用戶相關信息提示用戶登錄成功。登錄成功后，攜帶用戶的信息存儲至本地服務器，然后返回至個人中心頁面，用戶的頭像及用戶名顯示在游客區(qū)域并覆蓋游客。JS控制代碼如圖4.20所示。圖4.20后端驗證每日推薦歌曲頁點擊主頁的每日推薦導航，首先判斷用戶是否登錄，如果用戶沒有登錄，跳轉到登錄頁面，JS代碼如圖4.21所示；用戶登錄后，進入每日推薦歌曲頁面，利用date函數(shù)在頭部圖片區(qū)域顯示當前日期，JS代碼如圖4.22所示；調(diào)用/recommend/songs接口獲取每日推薦歌曲列表數(shù)據(jù)，利用PubSub.subscribe方法訂閱來自歌曲詳情頁面的信息，實現(xiàn)歌曲的切換功能，JS控制代碼如圖4.23所示。圖4.21判斷是否登錄圖4.22更新日期圖4.23訂閱消息獲取每日推薦數(shù)據(jù)音樂詳情頁音樂播放播放控制用來控制歌曲播放與暫停，在代碼中用backgroundAudioManager.onPlay函數(shù)實現(xiàn)該功能，播放使用隨機原理函數(shù)初始化播放列表。其關鍵點是通過Ajax應用程序界面訪問后臺數(shù)據(jù)。請求成功后，后臺以json格式返回數(shù)據(jù)，并且接收到的數(shù)據(jù)以初始格式所需的數(shù)據(jù)格式進行處理，并放置在相應的代碼中。JS控制代碼如圖4.24所示。圖4.24音樂播放進度條播放的進度條的顏色與未播放的進度條的顏色不同。播放的進度條的顏色為白色，未播放的為灰色。通過獲取實時進度條的寬度，計算實時播放的時間和長度來推動小圓球的向前移動，根據(jù)歌曲播放時間和整個進度條長度進行比例換算，以顯示進度條走動的距離。JS控制代碼如圖4.25所示。圖4.25進度條搜索頁頭部搜索區(qū)域點擊主頁的搜索導航，進入搜索頁面，搜索框中顯示默認搜索的數(shù)據(jù)，先輸入關鍵字，然后通過關鍵字來匹配相關的數(shù)據(jù)，點擊取消清空搜索內(nèi)容，將搜索的內(nèi)容添加到搜索歷史記錄中，點擊搜索列表里的相關歌曲信息通過musicId匹配進入歌曲詳情頁面實現(xiàn)播放功能；JS控制代碼如圖4.26所示。圖4.26搜索功能搜索歷史記錄搜索完成后，將搜索的關鍵字添加到搜索歷史記錄中，通過wx:if判斷historyList是否有值，如果有值則顯示在搜索框下方，沒有就不顯示。利用wx.getStorageSync方法將歷史記錄存儲到本地，控制JS代碼如圖4.27所示。圖4.27搜索歷史記錄熱搜榜通過調(diào)用/search/hot/detail接口獲取熱搜榜數(shù)據(jù)，點擊熱搜榜進行搜索，控制JS代碼如圖4.28所示。圖4.28熱搜榜系統(tǒng)測試tabBar模塊tabBar模塊由主頁、視頻video頁和個人中心頁三個導航標簽組成，位于頁面的下方，點擊可以切換到對應的頁面。如圖5.1所示。圖5.1tabBar主頁模塊主頁模塊包括輪播圖、導航標簽、歌曲推薦以及排行榜。輪播圖通過<swiper>標簽的autoplay屬性設置自動滾動，interval設置自動切換時間間隔為2000ms，如圖5.2所示；導航標簽通過導入阿里巴巴圖標庫，然后選擇fontclass粘貼到網(wǎng)頁中，F(xiàn)ehelper可以修飾css代碼并將其粘貼到微信小程序中。由于導航頁面上的圖標必須在其他位置引用，因此在app.wxss中選擇引用它。點擊每日推薦能進入到每日推薦頁面，如圖5.3所示；推薦歌曲區(qū)域通過<scroll-view>標簽實現(xiàn)滑動效果，點擊歌單能進入相應的歌單頁面，如圖5.4所示；點擊排行榜區(qū)域的歌曲能跳轉到相應的播放頁面，如圖5.5所示。圖5.2主頁圖5.3每日推薦圖5.4歌單圖5.5播放頁面視頻video頁視頻頁的頭部是搜索音樂區(qū)域，點擊可以進入搜索頁面，導航標簽列表區(qū)域通過<scroll-view>標簽實現(xiàn)滑動效果，scroll-x實現(xiàn)左右滑動，scroll-with-animation在設置滾動條位置時使用動畫過渡，點擊視頻可以播放，如圖5.6所示；點擊視頻右下角‘三個點區(qū)域’實現(xiàn)轉發(fā)分享，如圖5.7所示。圖5.6視頻頁圖5.7分享視頻個人中心頁用戶未登錄顯示默認頭像圖片，及游客姓名，播放記錄為暫無播放記錄，如圖5.8所示；用戶登錄后顯示用戶的頭像及用戶名，獲取用戶的播放記錄，如圖5.9所示。圖5.8登錄前圖5.9登錄后登錄頁面在未登錄的情況下，點擊個人中心頁的頭像區(qū)域跳轉至登錄頁面，或者主頁的每日推薦頁面跳轉至登錄頁面，然后進行登錄，如圖5.10所示。圖5.10登錄頁面搜索頁面進入搜索頁面是通過點擊主頁導航區(qū)域的搜索圖標或者視頻頁面頭部的搜索區(qū)域，搜索頁面中，搜索框顯示默認搜索的內(nèi)容，下方顯示熱搜榜模塊，如圖5.11所示；點擊搜索，輸入關鍵字，可以顯示相關列表，如圖5.12所示；點擊取消，搜索完成后，將搜索的關鍵字添加到搜索歷史記錄中。點擊熱搜榜的歌曲可以顯示搜索列表，如圖5.13所示。圖5.11搜索頁面圖5.12搜