微信小程序音乐播放器检索页如何制作

这篇文章主要介绍“微信小程序音乐播放器检索页如何制作”，在日常操作中，相信很多人在微信小程序音乐播放器检索页如何制作问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序音乐播放器检索页如何制作”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

到此，关于“微信小程序音乐播放器检索页如何制作”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！