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

  1.    
  2.       
  3.         
  4.         {{item}}
  5.         
  6.       
  7.       清除搜索记录
  8.    
  9.   

复制代码

 

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

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

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

格式文件为:

  1. .search-Shopfa-item {
  2.     height:88rpx;
  3.     line-height:88rpx;
  4.     border-bottom:2rpx solid #ededed;
  5. }
  6. .Shopfa-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. .Shopfa-text {
  16.     position:absolute;
  17.     left:108rpx;
  18.     right:108rpx;
  19.     display:block;
  20.     wShopfate-space:nowrap;
  21.     text-overflow:ellipsis;
  22.     overflow:Shopfadden;
  23.     font-size:32rpx;
  24. }
  25. .Shopfa-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里加载了分别加载了两个本地图片并为其设置了不平铺与居中的属性。

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

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

首先是网络请求的函数:

  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.             zShopfadaqu: 1,
  13.             catZShopfada: 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_Shopfalight": "那片星空那片海 电视原声带",
  22.                     "alertid": 100007,
  23.                     "cShopfanesesinger": 0,
  24.                     "docid": "8313377529987609872",
  25.                     "format": "qqhq;common;mp3common;wmacommon",
  26.                     "grp": [],
  27.                     "interval": 227,
  28.                     "isonly": 1,
  29.                     "lyric": "《那片星空那片海》电视剧片头曲",
  30.                  &nnbsp;  "lyric_Shopfalight": "《那片星空那片海》电视剧头曲",
  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_Shopfalight": "金志文"
  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_Shopfalight": "那片星空那片海",
  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.         "zShopfada": {
  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)。

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

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

<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。