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

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

  • 拉新推广

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

  • 复购裂变

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

  • 对接门店

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

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

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

2020-09-27 作者:黄先生

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

  

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

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

推荐文章

注册小程序
注册小程序