微信小程序音乐播放器,音乐播放器检索页制作（上）

　　首页的最后一部分为检索页，也就是让用户通过关键字搜索歌曲或专辑。

　　说到搜索页，比不可少的就是关键字的输入框。

　　参照这个样式，布局文件应该为：

　　格式文件为：

　　因为要提交关键字，所以使用表单组件，内部由表示搜索的放大镜图标，代表输入完成的“确定”按钮以及输入框组成。

　　除了输入框以外，此页还需要显示的内容应该是搜索的结果列表，搜索的历史记录以及热门关键字。这些内容应该显示在输入框下方，并按一定逻辑切换。他们之间的逻辑关系为：

• 用户进入检索页，显示的内容应该是输入框与热门关键字。
• 开始输入后(即输入框获得焦点)，应该显示历史记录。
• 点击确定，显示结果列表。
• 清空输入框内容后，返回关键字显示。
  

   

  　　

　　可以看出，对输入框的操作决定了当前页面显示的内容，所以我们需要监听输入框的获取焦点事件(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添加点击事件。

　　在这个点击事件里，我们需要做的事情有：

• 将点击的关键词加入历史记录。
• 将页面切换到搜索结果列表。 在完成搜索结果列表页后我们再来完善这一部分吧。
  

   

  　　

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

　　上一节：微信小程序小白项目开发案例之音乐播放器—排行页