注冊

微信小程序音樂播放器,音樂播放器檢索頁制作（下）

2020-09-27
導讀：到目前為止，我們已經完成了檢索頁所有的布局和格式文件，也完成了所有的數據請求函數，現在我們需要將這些串聯起來，實現這三部分間的切換。...

　　檢索頁 (下)

　　

　　到目前為止，我們已經完成了檢索頁所有的布局和格式文件，也完成了所有的數據請求函數，現在我們需要將這些串聯起來，實現這三部分間的切換。

　　

微信小程序音樂播放器,音樂播放器檢索頁制作（下）

　　總結一下我們需要完成的邏輯有：

　　

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

     

    　　


 

　　實現這些邏輯的相關事件我們已經在頁面里注冊好了，在具體實現這些事件之前，我們先寫一個函數——將字符串加入到歷史記錄。

　　

　　這個函數很簡單，我們在寫歷史記錄頁面時，已經用到了historySearchs這個數組，所以添加時我們只有獲取這個數組，然后將要添加的詞push到數組里，然后用setData更新頁面就可以了。

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

 

　　但是這樣做的問題是當用戶多次搜索相同內容時，數組內就會多次加入同樣的詞，導致我們的歷史記錄列表里出現重復內容，這顯然是不合理的，所以我們在每次push前，需要判斷數組內是否已經含有這個詞。

  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.     },
復制代碼

 

　　創(chuàng)建新的函數，這個函數會遍歷historySearchs數組，如果存在相同項則返回false，沒有相同的返回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.     },
復制代碼

 

　　有個這個方法后，我們開始逐條完成我們的事件代碼。

　　

　　將所有更新頁面有關變量添加到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.     },
復制代碼

 

　　熱門關鍵詞的點擊事件：

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

 

　　輸入框獲取焦點事件：

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

 

　　歷史記錄文字的點擊事件：

  1. historysearchTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         var key = dataSet.key;                        //獲取點擊的歷史記錄文字
  4.         var self = this;
  5.         self.setData({                                   
  6.             searchKey: key,                          //輸入框添加文字
  7.             showSearchPanel: 3                        //顯示搜索結果
  8.         });
  9.         MusicService.getSearchMusic(key, 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.     },
復制代碼

 

　　歷史記錄結尾的“X”與“清除歷史記錄”的點擊事件：

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

 

　　輸入框輸入事件：

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

 

　　確認按鈕的點擊事件：

  1. searchOk: function (e) {
  2.         var self = this;
  3.         var searchKey = this.data.searchKey;                   //獲取searchKey的值
  4.         if (searchKey != "") {
  5.             self.setData({
  6.                 showSearchPanel: 3                            //顯示搜索結果
  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.     },
復制代碼

 

　　搜索結果item的點擊事件,分為專輯與歌曲兩種：

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

 

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

　　

　　至此，首頁內容全部完成(準確的說還缺少推薦頁與搜索結果頁向音樂播放頁跳轉的事件)。

　　

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

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

重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

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

第四部分：開店任務常見問題

第五部分：小商店可以賣什么

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

第七部分：小程序直播

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

第九部分：小程序怎么結算

第十部分：小程序客服

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

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