首頁的最后一部分為檢索頁，也就是讓用戶通過關鍵字搜索歌曲或專輯。

　　說到搜索頁，比不可少的就是關鍵字的輸入框。

　　參照這個樣式，布局文件應該為：

　　格式文件為：

　　因為要提交關鍵字，所以使用表單組件，內部由表示搜索的放大鏡圖標，代表輸入完成的“確定”按鈕以及輸入框組成。

　　除了輸入框以外，此頁還需要顯示的內容應該是搜索的結果列表，搜索的歷史記錄以及熱門關鍵字。這些內容應該顯示在輸入框下方，并按一定邏輯切換。他們之間的邏輯關系為：

• 用戶進入檢索頁，顯示的內容應該是輸入框與熱門關鍵字。
• 開始輸入后(即輸入框獲得焦點)，應該顯示歷史記錄。
• 點擊確定，顯示結果列表。
• 清空輸入框內容后，返回關鍵字顯示。
  

   

  　　

　　可以看出，對輸入框的操作決定了當前頁面顯示的內容，所以我們需要監聽輸入框的獲取焦點事件(bindfocus)，確定點擊事件(bindtap)以及輸入事件(bindinput)，還需要記錄輸入的關鍵字searchKey。

　　輸入框完成后我們先寫熱門關鍵字，這些關鍵字也是來源于網絡，所以還需要請求網絡。在services/music里添加方法：

　　返回JSON格式結果為

　　這里返回的hotkey就是我們需要的關鍵字啦，除此之外，我們還看到下面有“special_key”這一部分，這相當于廣告部分，為服務器推薦的搜索關鍵字。所以我們以標簽的形式顯示關鍵字，對于廣告那部分關鍵字，我們以紅色字體，并且放在最前方，最后達成的樣式應該為圖10-5所示：

　　實現這一布局的代碼為：

　　這里面showSearchPanel的值為我們控制這一頁面切換的依據，當其為1的時候，顯示熱門關鍵字。

　　綁定的數據有兩個，special和hotkey。對于special部分，為了防止服務器缺失“special_key”這一部分從而導致沒有數據顯示，我們定義一個數據showSpecial來決定是否顯示這一部分。

　　將這三個數據以及輸入框用到的searchKey添加到data里吧。

　　修改index.js文件：

　　數據加載完成后，我們為每個熱門關鍵字view添加點擊事件。

　　在這個點擊事件里，我們需要做的事情有：

• 將點擊的關鍵詞加入歷史記錄。
• 將頁面切換到搜索結果列表。 在完成搜索結果列表頁后我們再來完善這一部分吧。
  

   

  　　

　　最后附上這一部分的格式文件。

　　上一節：微信小程序小白項目開發案例之音樂播放器—排行頁