pp电子

登录
免费开通
产品中心
更多服务

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

—— 2020 ——
09/27
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2020/9/27 0:00:00 泉源：不详 作者：未知

　　检索页 (下)

　　

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

　　

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

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

　　

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

 

　　可是这样做的问题是当用户多次搜索相同内容时，，数组内就会多次加入同样的词，，导致pp电子历史纪录列内外泛起重复内容，，这显然是不对理的，，以是我们在每次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。。。。。。

　　然后我们更改pp电子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.     },
复制代码

 

　　有个这个要领后，，我们最先逐条完成pp电子事务代码。。。。。。

　　

　　将所有更新页面有关变量添加到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.     },
复制代码

 

　　歌曲的跳转事务相对重大(不但是要跳转，，并且要加入播放列表)，，我们留到播放页再更改这部分吧。。。。。。

　　

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

　　

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

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


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，由于未联系到知识产权人或未发明有关知识产权的挂号，，若有知识产权人并不肯意我们使用，，若是有侵权请连忙联系。。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，仅系客观性形貌，，如您需要相识该类商品/服务详细的资讯，，请您直接与该类商品/服务的提供者联系。。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。。

KESION 一直通过手艺立异，，提供产品和服务，，助力企业向数字化转型，，通过科技驱动商业刷新，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 小程序开发wx.requestPayment(OBJECT),提倡微信支付

    提倡微信支付。。。。。。 Object参数说明： 参数 类型 必填 说明 timeStamp String 是 时间戳从1970年1月1日00:00:00至今的秒数,即目今的时间 nonceStr String

    微信小程序开发微信小程序SaaS 2020/9/27 0:00:00

  • 微信小程序API绘图clearRect,扫除画布上在该矩形区域内的内容

    绘图接口和要领 canvasContext.clearRect 界说 扫除画布上在该矩形区域内的内容。。。。。。 Tip : clearRect 并非画一个白色的矩形在地点区域，，而是清空，，为了有直观感受，，对 c

    微信小程序开发微信小程序SaaS 2020/9/27 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序音乐播放器,音乐播放器检索页制作（下） - KES