微信小程序音乐播放器,音乐播放器检索页制作(下)
检索页 (下)
到目前为止,我们已经完成了检索页所有的布局和格式文件,也完成了所有的数据请求函数,现在我们需要将这些串联起来,实现这三部分间的切换。
总结一下我们需要完成的逻辑有:
- 点击热门关键字,页面内容变成搜索结果页(需要请求网络,用我们写好的getSearchMusic方法),输入框内显示点击的关键字,同时这个关键字加入历史搜索结果。
- 在页面内容为热门关键字的时候,点击输入框使其获得焦点时,页面内容变成历史记录。
- 点击历史记录文字,内容变成搜索结果(请求网络),输入框显示这个记录。
- 点击历史记录每条末尾的“X”,删除这一条记录,当所有记录全部删除或点击了“清除历史记录”选项,内容变为热门关键字。
- 输入框内的内容被全部删除后,也返回热门关键字。
- 点击确认按钮,内容变为搜索结果页,同时加入历史记录。
-
点击搜索结果的item,页面转到专辑页或音乐播放页。
实现这些逻辑的相关事件我们已经在页面里注册好了,在具体实现这些事件之前,我们先写一个函数——将字符串加入到历史记录。
这个函数很简单,我们在写历史记录页面时,已经用到了historySearchs这个数组,所以添加时我们只有获取这个数组,然后将要添加的词push到数组里,然后用setData更新页面就可以了。
- addHistorySearchs: function (key) {
- var historySearchs = this.data.historySearchs;
- historySearchs.push(key);
- this.setData({
- historySearchs: historySearchs
- })
- },
但是这样做的问题是当用户多次搜索相同内容时,数组内就会多次加入同样的词,导致我们的历史记录列表里出现重复内容,这显然是不合理的,所以我们在每次push前,需要判断数组内是否已经含有这个词。
- findHistorySearchs: function (key) {
- var historySearchs = this.data.historySearchs;
- for (var i = 0; i < historySearchs.length; i++) {
- if (historySearchs[i] == key) { return false; }
- }
- return true;
- },
创建新的函数,这个函数会遍历historySearchs数组,如果存在相同项则返回false,没有相同的返回true。
然后我们更改我们的addHistorySearchs方法:
- addHistorySearchs: function (key) {
- var historySearchs = this.data.historySearchs;
- if (this.findHistorySearchs(key)) {
- historySearchs.push(key);
- this.setData({
- historySearchs: historySearchs
- })
- }
- },
有个这个方法后,我们开始逐条完成我们的事件代码。
将所有更新页面有关变量添加到data里:
- data: {
- slider: [],
- indicatorDots: true,
- autoplay: true,
- interval: 5000,
- duration: 1000,
- radioList: [],
- currentView: 1,
- topList: [],
- hotkeys: [],
- showSpecial: false,
- special: { key: '', url: '' },
- searchKey: '',
- searchSongs: [],
- zhida: {},
- showSearchPanel: 1,
- historySearchs: [],
- },
热门关键词的点击事件:
- hotKeysTap: function (e) {
- var dataSet = e.currentTarget.dataset;
- var key = dataSet.key; //获取点击的关键词
- var self = this;
- if (key != '') { //判断是否为空
- self.addHistorySearchs(key); //调用我们写好的方法,加入历史记录
- self.setData({
- searchKey: key, //为输入框内添加文字
- showSearchPanel: 3, //显示内容切换为搜索结果
- });
- MusicService.getSearchMusic(key, function (data) { //请求网络数据
- if (data.code == 0) {
- var songData = data.data;
- self.setData({ //将获得的数据添加到相应数组里
- searchSongs: songData.song.list,
- zhida: songData.zhida
- });
- }
- });
- }
- },
输入框获取焦点事件:
- bindFocus: function (e) {
- var self = this;
- if (this.data.showSearchPanel == 1) { //判断内容是否为热门关键词
- self.setData({
- showSearchPanel: 2 //切换到历史记录
- })
- }
- },
历史记录文字的点击事件:
- historysearchTap: function (e) {
- var dataSet = e.currentTarget.dataset;
- var key = dataSet.key; //获取点击的历史记录文字
- var self = this;
- self.setData({
- searchKey: key, //输入框添加文字
- showSearchPanel: 3 //显示搜索结果
- });
- MusicService.getSearchMusic(key, function (data) { //请求网络,获取搜索结果
- if (data.code == 0) {
- var songData = data.data;
- self.setData({
- searchSongs: songData.song.list,
- zhida: songData.zhida
- });
- }
- });
- },
历史记录结尾的“X”与“清除历史记录”的点击事件:
- delHistoryItem: function (e) {
- var historySearchs = this.data.historySearchs;
- var dataSet = e.currentTarget.dataset; //获取点击的条目
- if (dataSet.index != 'undefined') {
- var _index = parseInt(dataSet.index); //获取点击条目为数组的第几项
- historySearchs.splice(_index, 1); //从数组里删除对应的条目
- this.setData({ //更新页面
- historySearchs: historySearchs
- });
- if(historySearchs.length==0){ //如果历史记录里没有数据了
- this.setData({
- showSearchPanel: 1 //切换到热门关键字
- })
- }
- }
- },
- clearHistorySearchs: function () {
- this.setData({
- historySearchs: [], //清空历史记录数组
- showSearchPanel: 1 //切换到热门关键字
- })
- },
输入框输入事件:
- bindKeyInput: function (e) {
- var self = this;
- self.setData({ //更新searchKey的值
- searchKey: e.detail.value
- });
- if (e.detail.value == "") { //如果值为空且当前未显示热门关键字
- if (this.data.showSearchPanel != 1) {
- self.setData({
- showSearchPanel: 1 //切换为热门关键字
- })
- }
- }
- },
确认按钮的点击事件:
- searchOk: function (e) {
- var self = this;
- var searchKey = this.data.searchKey; //获取searchKey的值
- if (searchKey != "") {
- self.setData({
- showSearchPanel: 3 //显示搜索结果
- });
- self.addHistorySearchs(searchKey); //添加到历史记录
- MusicService.getSearchMusic(searchKey, function (data) {
- if (data.code == 0) {
- var songData = data.data;
- self.setData({
- searchSongs: songData.song.list,
- zhida: songData.zhida
- });
- }
- });
- }
- },
搜索结果item的点击事件,分为专辑与歌曲两种:
- zhidaTap: function (e) { //专辑的跳转事件
- var dataSet = e.currentTarget.dataset;
- var mid = dataSet.id;
- app.setGlobalData({ 'zhidaAlbummid': mid }); //将专辑id保存为全局变量
- wx.navigateTo({ //页面跳转
- url: '../cdinfo/cdinfo'
- })
- },
- musuicPlay: function (e) { //歌曲的跳转事件
- var dataSet = e.currentTarget.dataset;
- //TODO
- }
- },
歌曲的跳转事件相对复杂(不只是要跳转,而且要加入播放列表),我们留到播放页再更改这部分吧。
至此,首页内容全部完成(准确的说还缺少推荐页与搜索结果页向音乐播放页跳转的事件)。
上一节:微信小程序小白项目开发案例之音乐播放器—检索页(中)
下一节:微信小程序小白项目开发案例之音乐播放器——列表页
第二部分:如何开通一个小商店