检索页 (下)

到目前为止，我们已经完成了检索页所有的布局和格式文件，也完成了所有的数据请求函数，现在我们需要将这些串联起来，实现这三部分间的切换。

总结一下我们需要完成的逻辑有：

• 点击热门关键字，页面内容变成搜索结果页(需要请求网络，用我们写好的getSearchMusic方法)，输入框内显示点击的关键字，同时这个关键字加入历史搜索结果。
• 在页面内容为热门关键字的时候，点击输入框使其获得焦点时，页面内容变成历史记录。
• 点击历史记录文字，内容变成搜索结果(请求网络)，输入框显示这个记录。
• 点击历史记录每条末尾的“X”，删除这一条记录，当所有记录全部删除或点击了“清除历史记录”选项，内容变为热门关键字。
• 输入框内的内容被全部删除后，也返回热门关键字。
• 点击确认按钮，内容变为搜索结果页，同时加入历史记录。
• 点击搜索结果的item，页面转到专辑页或音乐播放页。
  

实现这些逻辑的相关事件我们已经在页面里注册好了，在具体实现这些事件之前，我们先写一个函数——将字符串加入到历史记录。

这个函数很简单，我们在写历史记录页面时，已经用到了ShopfastorySearchs这个数组，所以添加时我们只有获取这个数组，然后将要添加的词push到数组里，然后用setData更新页面就可以了。

但是这样做的问题是当用户多次搜索相同内容时，数组内就会多次加入同样的词，导致我们的历史记录列表里出现重复内容，这显然是不合理的，所以我们在每次push前，需要判断数组内是否已经含有这个词。

创建新的函数，这个函数会遍历ShopfastorySearchs数组，如果存在相同项则返回false，没有相同的返回true。

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

有个这个方法后，我们开始逐条完成我们的事件代码。

将所有更新页面有关变量添加到data里：

热门关键词的点击事件：

输入框获取焦点事件：

历史记录文字的点击事件：

历史记录结尾的“X”与“清除历史记录”的点击事件：

输入框输入事件：

确认按钮的点击事件：

搜索结果item的点击事件,分为专辑与歌曲两种：

歌曲的跳转事件相对复杂(不只是要跳转，而且要加入播放列表)，我们留到播放页再更改这部分吧。

至此，首页内容全部完成(准确的说还缺少推荐页与搜索结果页向音乐播放页跳转的事件)。

上一节：微信小程序小白项目开发案例之音乐播放器—检索页(中)

下一节：微信小程序小白项目开发案例之音乐播放器——列表页