微信小程序音樂播放器檢索頁如何制作

這篇文章主要介紹“微信小程序音樂播放器檢索頁如何制作”，在日常操作中，相信很多人在微信小程序音樂播放器檢索頁如何制作問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序音樂播放器檢索頁如何制作”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　這部分也是列表樣式，每一項由前面的時鐘圖標，中間的文字以及最后表示刪除的“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: 'h6',

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": "001lggCh3Nw7us",

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)。

到此，關于“微信小程序音樂播放器檢索頁如何制作”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！