返回
HiShop > Hi小程序 > 小程序开发 >

微信小程序音乐播放器,音乐播放器检索页制作(下)

2018-03-21作者:黄先生
导读:到目前为止,我们已经完成了检索页所有的布局和格式文件,也完成了所有的数据请求函数,现在我们需要将这些串联起来,实现这三部分间的切换。...

Hi小程序小编了解到,小程序商城搭建成为当下热门话题,下面从多个方面来谈谈微信小程序音乐播放器,音乐播放器检索页制作(下)

  检索页 (下)

  

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

  

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

  

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

     

      


 

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

  

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

  1. addHistorySearchs: function (key) {
  2.         var historySearchs = this.data.historySearchs;
  3.             historySearchs.push(key);
  4.             this.setData({
  5.                 historySearchs: historySearchs
  6.             })
  7.     },
复制代码

 

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

  1. findHistorySearchs: function (key) {
  2.         var historySearchs = this.data.historySearchs;
  3.         for (var i = 0; i < historySearchs.length; i++) {
  4.             if (historySearchs[i] == key) { return false; }
  5.         }
  6.         return true;
  7.     },
复制代码

 

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

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

  1. addHistorySearchs: function (key) {
  2.         var historySearchs = this.data.historySearchs;
  3.         if (this.findHistorySearchs(key)) {
  4.             historySearchs.push(key);
  5.             this.setData({
  6.                 historySearchs: historySearchs
  7.             })
  8.         }
  9.     },
复制代码

 

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

  

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

  1. data: {
  2.         slider: [],
  3.         indicatorDots: true,
  4.         autoplay: true,
  5.         interval: 5000,
  6.         duration: 1000,
  7.         radioList: [],
  8.         currentView: 1,
  9.         topList: [],
  10.         hotkeys: [],
  11.         showSpecial: false,
  12.         special: { key: '', url: '' },
  13.         searchKey: '',
  14.         searchSongs: [],
  15.         zhida: {},
  16.         showSearchPanel: 1,
  17.         historySearchs: [],
  18.     },
复制代码

 

  热门关键词的点击事件:

  1. hotKeysTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         var key = dataSet.key;                           //获取点击的关键词
  4.         var self = this;              
  5.         if (key != '') {                                 //判断是否为空
  6.             self.addHistorySearchs(key);                 //调用我们写好的方法,加入历史记录
  7.             self.setData({
  8.                 searchKey: key,                          //为输入框内添加文字
  9.                 showSearchPanel: 3,                       //显示内容切换为搜索结果
  10.             });
  11.             MusicService.getSearchMusic(key, function (data) {         //请求网络数据
  12.                 if (data.code == 0) {
  13.                     var songData = data.data;
  14.                     self.setData({                                //将获得的数据添加到相应数组里
  15.                         searchSongs: songData.song.list,               
  16.                         zhida: songData.zhida
  17.                     });
  18.                 }
  19.             });
  20.         }
  21.     },
复制代码

 

  输入框获取焦点事件:

  1. bindFocus: function (e) {
  2.         var self = this;
  3.         if (this.data.showSearchPanel == 1) {      //判断内容是否为热门关键词
  4.             self.setData({
  5.                 showSearchPanel: 2                  //切换到历史记录
  6.             })
  7.         }
  8.     },
复制代码

 

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

  1. historysearchTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         var key = dataSet.key;                        //获取点击的历史记录文字
  4.         var self = this;
  5.         self.setData({                                   
  6.             searchKey: key,                          //输入框添加文字
  7.             showSearchPanel: 3                        //显示搜索结果
  8.         });
  9.         MusicService.getSearchMusic(key, function (data) {     //请求网络,获取搜索结果
  10.             if (data.code == 0) {
  11.                 var songData = data.data;
  12.                 self.setData({
  13.                     searchSongs: songData.song.list,
  14.                     zhida: songData.zhida
  15.                 });
  16.             }
  17.         });
  18.     },
复制代码

 

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

  1.     delHistoryItem: function (e) {
  2.         var historySearchs = this.data.historySearchs;
  3.         var dataSet = e.currentTarget.dataset;                 //获取点击的条目
  4.         if (dataSet.index != 'undefined') {                    
  5.             var _index = parseInt(dataSet.index);              //获取点击条目为数组的第几项
  6.             historySearchs.splice(_index, 1);                  //从数组里删除对应的条目
  7.             this.setData({                                    //更新页面
  8.                 historySearchs: historySearchs
  9.             });
  10.             if(historySearchs.length==0){                     //如果历史记录里没有数据了
  11.                 this.setData({
  12.                     showSearchPanel: 1                        //切换到热门关键字
  13.                 })
  14.             }
  15.         }
  16.     },
  17.     clearHistorySearchs: function () {               
  18.         this.setData({
  19.             historySearchs: [],                               //清空历史记录数组
  20.             showSearchPanel: 1                                //切换到热门关键字
  21.         })
  22.     },
复制代码

 

  输入框输入事件:

  1. bindKeyInput: function (e) {
  2.         var self = this;
  3.         self.setData({                                        //更新searchKey的值
  4.                 searchKey: e.detail.value
  5.             });
  6.         if (e.detail.value == "") {                           //如果值为空且当前未显示热门关键字
  7.             if (this.data.showSearchPanel != 1) {
  8.                 self.setData({
  9.                     showSearchPanel: 1                       //切换为热门关键字
  10.                 })
  11.             }
  12.         }
  13.     },
复制代码

 

  确认按钮的点击事件:

  1. searchOk: function (e) {
  2.         var self = this;
  3.         var searchKey = this.data.searchKey;                   //获取searchKey的值
  4.         if (searchKey != "") {
  5.             self.setData({
  6.                 showSearchPanel: 3                            //显示搜索结果
  7.             });
  8.             self.addHistorySearchs(searchKey);                  //添加到历史记录
  9.             MusicService.getSearchMusic(searchKey, function (data) {
  10.                 if (data.code == 0) {
  11.                     var songData = data.data;
  12.                     self.setData({
  13.                         searchSongs: songData.song.list,
  14.                         zhida: songData.zhida
  15.                     });
  16.                 }
  17.             });
  18.         }
  19.     },
复制代码

 

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

  1.     zhidaTap: function (e) {                           //专辑的跳转事件
  2.         var dataSet = e.currentTarget.dataset;
  3.         var mid = dataSet.id;
  4.  
  5.         app.setGlobalData({ 'zhidaAlbummid': mid });     //将专辑id保存为全局变量
  6.         wx.navigateTo({                                //页面跳转
  7.             url: '../cdinfo/cdinfo'
  8.         })
  9.  
  10.     },
  11.     musuicPlay: function (e) {                   //歌曲的跳转事件
  12.         var dataSet = e.currentTarget.dataset;
  13.         //TODO
  14.         }
  15.     },
复制代码

 

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

  

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

  

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

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

首页 免费咨询 广告合作 免费注册