逐福科技
177-371-24501(同微信)

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

2022-04-21 管理员

　　这部分也是列表样式，每一项由前面的时钟图标，中间的文字以及最后表示删除的“X”组成，最下方为清空整个列表的选项。

  1. <view class="search-hi" wx:if="{{showSearchPanel == 2}}">
  2.     <block wx:if="{{historySearchs.length > 0}}">
  3.       <view class="search-hi-item" wx:for="{{historySearchs}}" wx:key="unique">
  4.         <view class="hi-icon"></view>
  5.         <text class="hi-text" data-key="{{item}}" bindtap="historysearchTap">{{item}}</text>
  6.         <view class="hi-close" data-index="{{index}}" bindtap="delHistoryItem"></view>
  7.       </view>
  8.       <view class="clear-serach" bindtap="clearHistorySearchs">清除搜索记录</view>
  9.     </block>
  10.   </view>
复制代码

 

　　这一部分只有当showSearchPanel=2才显示。

　　

　　具体的内容，我们首先要判断是否有历史数据。使用historySearchs存储所以历史记录，只有当其长度大于0时，才渲染这一部分。

　　

　　block里的内容就如我们所要的一致，然后我们为文字，结尾的“X”标志，和最后的“清除搜索记录”添加点击事件。

　　格式文件为：

  1. .search-hi-item {
  2.     height:88rpx;
  3.     line-height:88rpx;
  4.     border-bottom:2rpx solid #ededed;
  5. }
  6. .hi-icon {
  7.     position:absolute;
  8.     left:20rpx;
  9.     display:inline-block;
  10.     width:88rpx;
  11.     height:88rpx;
  12.     background:url('../../resources/images/clock_ic.png') no-repeat center center;
  13.     background-size:40rpx;
  14. }
  15. .hi-text {
  16.     position:absolute;
  17.     left:108rpx;
  18.     right:108rpx;
  19.     display:block;
  20.     white-space:nowrap;
  21.     text-overflow:ellipsis;
  22.     overflow:hidden;
  23.     font-size:32rpx;
  24. }
  25. .hi-close {
  26.     width:88rpx;
  27.     height:88rpx;
  28.     position:absolute;
  29.     right:20rpx;
  30.     background:url('../../resources/images/cancel.png') no-repeat center center;
  31. }
  32. .clear-serach {
  33.     font-size:24rpx;
  34.     text-align:center;
  35.     color:#47c88a;
  36.     line-height:88rpx;
  37. }
复制代码

 

　　background里加载了分别加载了两个本地图片并为其设置了不平铺与居中的属性。

　　

　　很显然，在我们每次点击确定按钮后，输入框内的值除了发送到服务器请求搜索结果，还要添加到historySearchs里。

　　

　　所以我们先写搜索结果列表，然后一起处理确定按钮的点击事件。

　　

　　首先是网络请求的函数：

  1. function getSearchMusic(word,callback){        //word为传入的关键字，callback为回调函数
  2.     var data = {
  3.             g_tk: 5381,
  4.             uin: 0,
  5.             format: 'json',
  6.             inCharset: 'utf-8',
  7.             outCharset: 'utf-8',
  8.             notice: 0,
  9.             platform: 'h5',
  10.             needNewCode: 1,
  11.             w: word,
  12.             zhidaqu: 1,
  13.             catZhida: 1,
  14.             t: 0,
  15.             flag: 1,
  16.             ie: 'utf-8',
  17.             sem: 1,
  18.             aggr: 0,
  19.             perpage: 20,
  20.             n: 20,
  21.             p: 1,
  22.             remoteplace: 'txt.mqq.all',
  23.             _: Date.now()
  24.         };
  25.         wx.request({
  26.             url: 'http://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp',
  27.             data: data,
  28.             header: {
  29.                 'Content-Type': 'application/json'
  30.             },
  31.             success: function (res) {
  32.                 if (res.statusCode == 200) {
  33.                     callback(res.data);
  34.                 } else {
  35.  
  36.                 }
  37.  
  38.             }
  39.         });
  40. }
  41. ...
  42. module.exports = {
  43.   ...
  44.   getSearchMusic:getSearchMusic
  45. }
复制代码

 

　　返回的JSON数据为：

  1. {
  2.     "code": 0,
  3.     "data": {
  4.         "keyword": "那片星空那片海 ",
  5.         "priority": 0,
  6.         "qc": [],
  7.         "semantic": {
  8.             "curnum": 0,
  9.             "curpage": 1,
  10.             "list": [],
  11.             "totalnum": 0
  12.         },
  13.         "song": {
  14.             "curnum": 6,
  15.             "curpage": 1,
  16.             "list": [
  17.                 {
  18.                     "albumid": 1829165,
  19.                     "albummid": "000cvc411fKPIC",
  20.                     "albumname": "那片星空那片海 电视原声带",
  21.                     "albumname_hilight": "<span class=\"c_tx_highlight\">那片星空那片海</span> 电视原声带",
  22.                     "alertid": 100007,
  23.                     "chinesesinger": 0,
  24.                     "docid": "8313377529987609872",
  25.                     "format": "qqhq;common;mp3common;wmacommon",
  26.                     "grp": [],
  27.                     "interval": 227,
  28.                     "isonly": 1,
  29.                     "lyric": "《那片星空那片海》电视剧片头曲",
  30.                  &nnbsp;  "lyric_hilight": "《<span class=\"c_tx_highlight\">那片星空那片海</span>》电视剧<span class=\"c_tx_highlight\">片</span>头曲",
  31.                     "msgid": 13,
  32.                     "nt": 3247935513,
  33.                     "pay": {
  34.                         "payalbum": 1,
  35.                         "payalbumprice": 500,
  36.                         "paydownload": 1,
  37.                         "payinfo": 1,
  38.                         "payplay": 1,
  39.                         "paytrackmouth": 0,
  40.                         "paytrackprice": 0
  41.                     },
  42.                     "preview": {
  43.                         "trybegin": 0,
  44.                         "tryend": 0,
  45.                         "trysize": 0
  46.                     },
  47.                     "pubtime": 1486483200,
  48.                     "pure": 0,
  49.                     "singer": [
  50.                         {
  51.                             "id": 12111,
  52.                             "mid": "004YXxql1sSr2o",
  53.                             "name": "金志文",
  54.                             "name_hilight": "金志文"
  55.                         }
  56.                     ],
  57.                     "size128": 3649005,
  58.                     "size320": 9122181,
  59.                     "sizeape": 23599481,
  60.                     "sizeflac": 23676261,
  61.                     "sizeogg": 4916985,
  62.                     "songid": 200552006,
  63.                     "songmid": "001lggCh2Nw7us",
  64.                     "songname": "那片星空那片海",
  65.                     "songname_hilight": "<span class=\"c_tx_highlight\">那片星空那片海</span>",
  66.                     "songurl": "http://y.qq.com/#type=song&id=200552006",
  67.                     "stream": 5,
  68.                     "switch": 594177,
  69.                     "t": 0,
  70.                     "tag": 10,
  71.                     "type": 0,
  72.                     "ver": 0,
  73.                     "vid": ""
  74.                 },
  75.                 ...
  76.             ],
  77.             "totalnum": 6
  78.         },
  79.         "totaltime": 0,
  80.         "zhida": {
  81.             "albumid": 1829165,
  82.             "albummid": "000cvc411fKPIC",
  83.             "albumname": "那片星空那片海 电视原声带",
  84.             "singername": "华语群星",
  85.             "type": 3
  86.         }
  87.     },
  88.     "message": "",
  89.     "notice": "",
  90.     "subcode": 0,
  91.     "time": 1487063618,
  92.     "tips": ""
  93. }
复制代码

 

　　有了数据之后，我们需要在列表里显示的内容为歌曲名称(songname)与歌手名称(singer.name)。

　　

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

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

上一篇：微信门店小程序怎样创建,门店小程序创建方法简介
下一篇：小程序开发UnionID机制说明,微信开放平台绑定小程序流程(图文)
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
郑州快速建站：网站的站内优化怎么做
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话（微信同号）

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持：酷微科技

电话咨询 在线咨询 服务项目 SEO优化