注冊(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ā)