注冊

微信小程序音樂播放器,音樂播放器檢索頁制作（中）

2020-09-27
導(dǎo)讀：這部分也是列表樣式，每一項由前面的時鐘圖標，中間的文字以及最后表示刪除的“X”組成，最下方為清空整個列表的選項。...

　　這部分也是列表樣式，每一項由前面的時鐘圖標，中間的文字以及最后表示刪除的“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>
復(fù)制代碼

微信小程序音樂播放器,音樂播放器檢索頁制作（中）

 

　　這一部分只有當showSearchPanel=2才顯示。

　　

　　具體的內(nèi)容，我們首先要判斷是否有歷史數(shù)據(jù)。使用historySearchs存儲所以歷史記錄，只有當其長度大于0時，才渲染這一部分。

　　

　　block里的內(nèi)容就如我們所要的一致，然后我們?yōu)槲淖?，結(jié)尾的“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. }
復(fù)制代碼

 

　　background里加載了分別加載了兩個本地圖片并為其設(shè)置了不平鋪與居中的屬性。

　　

　　很顯然，在我們每次點擊確定按鈕后，輸入框內(nèi)的值除了發(fā)送到服務(wù)器請求搜索結(jié)果，還要添加到historySearchs里。

　　

　　所以我們先寫搜索結(jié)果列表，然后一起處理確定按鈕的點擊事件。

　　

　　首先是網(wǎng)絡(luò)請求的函數(shù)：

  1. function getSearchMusic(word,callback){        //word為傳入的關(guān)鍵字，callback為回調(diào)函數(shù)
  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. }
復(fù)制代碼

 

　　返回的JSON數(shù)據(jù)為：

  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. }
復(fù)制代碼

 

　　有了數(shù)據(jù)之后，我們需要在列表里顯示的內(nèi)容為歌曲名稱(songname)與歌手名稱(singer.name)。

　　

　　上一節(jié)：微信小程序小白項目開發(fā)案例之音樂播放器—檢索頁(上)

　　下一節(jié)：微信小程序小白項目開發(fā)案例之音樂播放器—檢索頁(下)

重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

第三部分：如何登錄小商店

第四部分：開店任務(wù)常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)