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

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

2018-01-05|HiShop|阅读量:
导读:这部分也是列表样式,每一项由前面的时钟图标,中间的文字以及最后表示删除的“X”组成,最下方为清空整个列表的选项。...

最新消息,Hi小程序小编了解到,微信小程序音乐播放器,音乐播放器检索页制作(中)。

  这部分也是列表样式,每一项由前面的时钟图标,中间的文字以及最后表示删除的“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)。

  

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

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

相关推荐

  • 微信小程序音乐播放器,音乐播放器检索页

    到目前为止,我们已经完成了检索页所有的布局和格式文件,也完成了…

  • 微信小程序音乐播放器,音乐播放器检索页

    首页的最后一部分为检索页,也就是让用户通过关键字搜索歌曲或专辑…

  • 微信小程序音乐播放器,音乐播放器小程序

    同上一小节所做的一样,我们先在services/music.js里添加网络请求函数…

  • 微信小程序音乐播放器,音乐播放器小程序

    为了解决这个问题,我们给图片添加一个渐变的遮罩,就像图10-8那样,…

  • 微信小程序音乐播放器,音乐播放器小程序

    我们先来完成点击排行里的项目所跳转的排行列表。…

  • 首页 免费咨询 免费电话 免费注册