注冊(cè)

微信小程序音樂(lè)播放器,音樂(lè)播放器檢索頁(yè)制作（下）

2020-09-27
導(dǎo)讀：到目前為止，我們已經(jīng)完成了檢索頁(yè)所有的布局和格式文件，也完成了所有的數(shù)據(jù)請(qǐng)求函數(shù)，現(xiàn)在我們需要將這些串聯(lián)起來(lái)，實(shí)現(xiàn)這三部分間的切換。...

　　檢索頁(yè) (下)

　　

　　到目前為止，我們已經(jīng)完成了檢索頁(yè)所有的布局和格式文件，也完成了所有的數(shù)據(jù)請(qǐng)求函數(shù)，現(xiàn)在我們需要將這些串聯(lián)起來(lái)，實(shí)現(xiàn)這三部分間的切換。

　　

微信小程序音樂(lè)播放器,音樂(lè)播放器檢索頁(yè)制作（下）

　　總結(jié)一下我們需要完成的邏輯有：

　　

  • 點(diǎn)擊熱門(mén)關(guān)鍵字，頁(yè)面內(nèi)容變成搜索結(jié)果頁(yè)(需要請(qǐng)求網(wǎng)絡(luò)，用我們寫(xiě)好的getSearchMusic方法)，輸入框內(nèi)顯示點(diǎn)擊的關(guān)鍵字，同時(shí)這個(gè)關(guān)鍵字加入歷史搜索結(jié)果。
  • 在頁(yè)面內(nèi)容為熱門(mén)關(guān)鍵字的時(shí)候，點(diǎn)擊輸入框使其獲得焦點(diǎn)時(shí)，頁(yè)面內(nèi)容變成歷史記錄。
  • 點(diǎn)擊歷史記錄文字，內(nèi)容變成搜索結(jié)果(請(qǐng)求網(wǎng)絡(luò))，輸入框顯示這個(gè)記錄。
  • 點(diǎn)擊歷史記錄每條末尾的“X”，刪除這一條記錄，當(dāng)所有記錄全部刪除或點(diǎn)擊了“清除歷史記錄”選項(xiàng)，內(nèi)容變?yōu)闊衢T(mén)關(guān)鍵字。
  • 輸入框內(nèi)的內(nèi)容被全部刪除后，也返回?zé)衢T(mén)關(guān)鍵字。
  • 點(diǎn)擊確認(rèn)按鈕，內(nèi)容變?yōu)樗阉鹘Y(jié)果頁(yè)，同時(shí)加入歷史記錄。
  • 點(diǎn)擊搜索結(jié)果的item，頁(yè)面轉(zhuǎn)到專(zhuān)輯頁(yè)或音樂(lè)播放頁(yè)。

     

    　　


 

　　實(shí)現(xiàn)這些邏輯的相關(guān)事件我們已經(jīng)在頁(yè)面里注冊(cè)好了，在具體實(shí)現(xiàn)這些事件之前，我們先寫(xiě)一個(gè)函數(shù)——將字符串加入到歷史記錄。

　　

　　這個(gè)函數(shù)很簡(jiǎn)單，我們?cè)趯?xiě)歷史記錄頁(yè)面時(shí)，已經(jīng)用到了historySearchs這個(gè)數(shù)組，所以添加時(shí)我們只有獲取這個(gè)數(shù)組，然后將要添加的詞push到數(shù)組里，然后用setData更新頁(yè)面就可以了。

  1. addHistorySearchs: function (key) {
  2.         var historySearchs = this.data.historySearchs;
  3.             historySearchs.push(key);
  4.             this.setData({
  5.                 historySearchs: historySearchs
  6.             })
  7.     },
復(fù)制代碼

 

　　但是這樣做的問(wèn)題是當(dāng)用戶(hù)多次搜索相同內(nèi)容時(shí)，數(shù)組內(nèi)就會(huì)多次加入同樣的詞，導(dǎo)致我們的歷史記錄列表里出現(xiàn)重復(fù)內(nèi)容，這顯然是不合理的，所以我們?cè)诿看蝡ush前，需要判斷數(shù)組內(nèi)是否已經(jīng)含有這個(gè)詞。

  1. findHistorySearchs: function (key) {
  2.         var historySearchs = this.data.historySearchs;
  3.         for (var i = 0; i < historySearchs.length; i++) {
  4.             if (historySearchs[i] == key) { return false; }
  5.         }
  6.         return true;
  7.     },
復(fù)制代碼

 

　　創(chuàng)建新的函數(shù)，這個(gè)函數(shù)會(huì)遍歷historySearchs數(shù)組，如果存在相同項(xiàng)則返回false，沒(méi)有相同的返回true。

　　然后我們更改我們的addHistorySearchs方法：

  1. addHistorySearchs: function (key) {
  2.         var historySearchs = this.data.historySearchs;
  3.         if (this.findHistorySearchs(key)) {
  4.             historySearchs.push(key);
  5.             this.setData({
  6.                 historySearchs: historySearchs
  7.             })
  8.         }
  9.     },
復(fù)制代碼

 

　　有個(gè)這個(gè)方法后，我們開(kāi)始逐條完成我們的事件代碼。

　　

　　將所有更新頁(yè)面有關(guān)變量添加到data里：

  1. data: {
  2.         slider: [],
  3.         indicatorDots: true,
  4.         autoplay: true,
  5.         interval: 5000,
  6.         duration: 1000,
  7.         radioList: [],
  8.         currentView: 1,
  9.         topList: [],
  10.         hotkeys: [],
  11.         showSpecial: false,
  12.         special: { key: '', url: '' },
  13.         searchKey: '',
  14.         searchSongs: [],
  15.         zhida: {},
  16.         showSearchPanel: 1,
  17.         historySearchs: [],
  18.     },
復(fù)制代碼

 

　　熱門(mén)關(guān)鍵詞的點(diǎn)擊事件：

  1. hotKeysTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         var key = dataSet.key;                           //獲取點(diǎn)擊的關(guān)鍵詞
  4.         var self = this;              
  5.         if (key != '') {                                 //判斷是否為空
  6.             self.addHistorySearchs(key);                 //調(diào)用我們寫(xiě)好的方法，加入歷史記錄
  7.             self.setData({
  8.                 searchKey: key,                          //為輸入框內(nèi)添加文字
  9.                 showSearchPanel: 3,                       //顯示內(nèi)容切換為搜索結(jié)果
  10.             });
  11.             MusicService.getSearchMusic(key, function (data) {         //請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)
  12.                 if (data.code == 0) {
  13.                     var songData = data.data;
  14.                     self.setData({                                //將獲得的數(shù)據(jù)添加到相應(yīng)數(shù)組里
  15.                         searchSongs: songData.song.list,               
  16.                         zhida: songData.zhida
  17.                     });
  18.                 }
  19.             });
  20.         }
  21.     },
復(fù)制代碼

 

　　輸入框獲取焦點(diǎn)事件：

  1. bindFocus: function (e) {
  2.         var self = this;
  3.         if (this.data.showSearchPanel == 1) {      //判斷內(nèi)容是否為熱門(mén)關(guān)鍵詞
  4.             self.setData({
  5.                 showSearchPanel: 2                  //切換到歷史記錄
  6.             })
  7.         }
  8.     },
復(fù)制代碼

 

　　歷史記錄文字的點(diǎn)擊事件：

  1. historysearchTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         var key = dataSet.key;                        //獲取點(diǎn)擊的歷史記錄文字
  4.         var self = this;
  5.         self.setData({                                   
  6.             searchKey: key,                          //輸入框添加文字
  7.             showSearchPanel: 3                        //顯示搜索結(jié)果
  8.         });
  9.         MusicService.getSearchMusic(key, function (data) {     //請(qǐng)求網(wǎng)絡(luò)，獲取搜索結(jié)果
  10.             if (data.code == 0) {
  11.                 var songData = data.data;
  12.                 self.setData({
  13.                     searchSongs: songData.song.list,
  14.                     zhida: songData.zhida
  15.                 });
  16.             }
  17.         });
  18.     },
復(fù)制代碼

 

　　歷史記錄結(jié)尾的“X”與“清除歷史記錄”的點(diǎn)擊事件：

  1.     delHistoryItem: function (e) {
  2.         var historySearchs = this.data.historySearchs;
  3.         var dataSet = e.currentTarget.dataset;                 //獲取點(diǎn)擊的條目
  4.         if (dataSet.index != 'undefined') {                    
  5.             var _index = parseInt(dataSet.index);              //獲取點(diǎn)擊條目為數(shù)組的第幾項(xiàng)
  6.             historySearchs.splice(_index, 1);                  //從數(shù)組里刪除對(duì)應(yīng)的條目
  7.             this.setData({                                    //更新頁(yè)面
  8.                 historySearchs: historySearchs
  9.             });
  10.             if(historySearchs.length==0){                     //如果歷史記錄里沒(méi)有數(shù)據(jù)了
  11.                 this.setData({
  12.                     showSearchPanel: 1                        //切換到熱門(mén)關(guān)鍵字
  13.                 })
  14.             }
  15.         }
  16.     },
  17.     clearHistorySearchs: function () {               
  18.         this.setData({
  19.             historySearchs: [],                               //清空歷史記錄數(shù)組
  20.             showSearchPanel: 1                                //切換到熱門(mén)關(guān)鍵字
  21.         })
  22.     },
復(fù)制代碼

 

　　輸入框輸入事件：

  1. bindKeyInput: function (e) {
  2.         var self = this;
  3.         self.setData({                                        //更新searchKey的值
  4.                 searchKey: e.detail.value
  5.             });
  6.         if (e.detail.value == "") {                           //如果值為空且當(dāng)前未顯示熱門(mén)關(guān)鍵字
  7.             if (this.data.showSearchPanel != 1) {
  8.                 self.setData({
  9.                     showSearchPanel: 1                       //切換為熱門(mén)關(guān)鍵字
  10.                 })
  11.             }
  12.         }
  13.     },
復(fù)制代碼

 

　　確認(rèn)按鈕的點(diǎn)擊事件：

  1. searchOk: function (e) {
  2.         var self = this;
  3.         var searchKey = this.data.searchKey;                   //獲取searchKey的值
  4.         if (searchKey != "") {
  5.             self.setData({
  6.                 showSearchPanel: 3                            //顯示搜索結(jié)果
  7.             });
  8.             self.addHistorySearchs(searchKey);                  //添加到歷史記錄
  9.             MusicService.getSearchMusic(searchKey, function (data) {
  10.                 if (data.code == 0) {
  11.                     var songData = data.data;
  12.                     self.setData({
  13.                         searchSongs: songData.song.list,
  14.                         zhida: songData.zhida
  15.                     });
  16.                 }
  17.             });
  18.         }
  19.     },
復(fù)制代碼

 

　　搜索結(jié)果item的點(diǎn)擊事件,分為專(zhuān)輯與歌曲兩種：

  1.     zhidaTap: function (e) {                           //專(zhuān)輯的跳轉(zhuǎn)事件
  2.         var dataSet = e.currentTarget.dataset;
  3.         var mid = dataSet.id;
  4.  
  5.         app.setGlobalData({ 'zhidaAlbummid': mid });     //將專(zhuān)輯id保存為全局變量
  6.         wx.navigateTo({                                //頁(yè)面跳轉(zhuǎn)
  7.             url: '../cdinfo/cdinfo'
  8.         })
  9.  
  10.     },
  11.     musuicPlay: function (e) {                   //歌曲的跳轉(zhuǎn)事件
  12.         var dataSet = e.currentTarget.dataset;
  13.         //TODO
  14.         }
  15.     },
復(fù)制代碼

 

　　歌曲的跳轉(zhuǎn)事件相對(duì)復(fù)雜(不只是要跳轉(zhuǎn)，而且要加入播放列表)，我們留到播放頁(yè)再更改這部分吧。

　　

　　至此，首頁(yè)內(nèi)容全部完成(準(zhǔn)確的說(shuō)還缺少推薦頁(yè)與搜索結(jié)果頁(yè)向音樂(lè)播放頁(yè)跳轉(zhuǎn)的事件)。

　　

　　上一節(jié)：微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器—檢索頁(yè)(中)

　　下一節(jié)：微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器——列表頁(yè)

重磅推薦：小程序開(kāi)店目錄

第一部分：小商店是什么

第二部分：如何開(kāi)通一個(gè)小商店

第三部分：如何登錄小商店

第四部分：開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分：小商店可以賣(mài)什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開(kāi)發(fā)