返回
怎么开小程序商城店铺
  • 店铺开通

    销客多小程序商城，可快速开通上架店铺

  • 拉新推广

    链接12亿微信流量，拉新工具沉淀意向客户

  • 复购裂变

    拼团、分销等提升转化，不断裂变新用户购买

  • 对接门店

    线上导流、促活门店，实现线上下同步发展

制作小程序
HiShop > Hi小程序 > 小程序开发 >

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

2020-09-27 作者：黄先生

　　检索页 (下)

　　

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

　　

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

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

　　

  • 点击热门关键字，页面内容变成搜索结果页(需要请求网络，用我们写好的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.     },
复制代码

 

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

　　

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

　　

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

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

推荐文章

注册小程序
注册小程序