檢索頁 (下)

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

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

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

   

  　　

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

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

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

　　創建新的函數，這個函數會遍歷historySearchs數組，如果存在相同項則返回false，沒有相同的返回true。

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

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

　　將所有更新頁面有關變量添加到data里：

　　熱門關鍵詞的點擊事件：

　　輸入框獲取焦點事件：

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

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

　　輸入框輸入事件：

　　確認按鈕的點擊事件：

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

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

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

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

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