微信小程序怎么制作音樂播放器檢索頁

這篇文章主要介紹“微信小程序怎么制作音樂播放器檢索頁”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么制作音樂播放器檢索頁”文章能幫助大家解決問題。

　　首頁的最后一部分為檢索頁，也就是讓用戶通過關鍵字搜索歌曲或專輯。

　　說到搜索頁，比不可少的就是關鍵字的輸入框。

　　參照這個樣式，布局文件應該為：

1. <view class="search-bar">

2.     <view class="search-input-warp">

3.       <form bindsubmit="searchSubmit">

4.         <label class="search-input-icon"></label>

5.         <input type="text" class="search-input" bindfocus="bindFocus" name="search" value="{{searchKey}}" bindinput="bindKeyInput" placeholder="搜索歌曲、歌單、專輯" placeholder-class="search-input-placeholder"/>

6.         <view class="search-cancel" bindtap="searchOk">確定</view>

7.       </form>

8.     </view>

9.   </view>

復制代碼

　　格式文件為：

1. .search-bar {

2.     background:#f7f7f7;

3.     padding:20rpx;

4. }

5. .search-input-warp {

6.     position:relative;

7.     padding:16rpx 24rpx 16rpx 70rpx;

8.     background:#fff;

9. }

10. .search-input-icon {

11.     content:" ";

12.     position:absolute;

13.     top:18rpx;

14.     left:20rpx;

15.     display:inline-block;

16.     vertical-align:middle;

17.     width:40rpx;

18.     height:40rpx;

19.     background-image:url("../../resources/images/search.png");

20.     background-repeat:no-repeat;

21.     background-size:40rpx;

22. }

23. .search-input {

24.     font-size:28rpx;

25.     line-height:40rpx;

26. }

27. .search-input-placeholder {

28.     color:#ddd;

29.     font-size:28rpx;

30.     line-height:40rpx;

31. }

32. .search-cancel {

33.     position:absolute;

34.     right:0;

35.     top:0;

36.     display:inline-block;

37.     font-size:32rpx;

38.     height:90rpx;

39.     width:140rpx;

40.     text-align:center;

41.     line-height: 90rpx;

42.     z-index:50;

43.     background:#f7f7f7;

44. }

復制代碼

　　因為要提交關鍵字，所以使用表單組件，內部由表示搜索的放大鏡圖標，代表輸入完成的“確定”按鈕以及輸入框組成。

　　除了輸入框以外，此頁還需要顯示的內容應該是搜索的結果列表，搜索的歷史記錄以及熱門關鍵字。這些內容應該顯示在輸入框下方，并按一定邏輯切換。他們之間的邏輯關系為：

• 用戶進入檢索頁，顯示的內容應該是輸入框與熱門關鍵字。

• 開始輸入后(即輸入框獲得焦點)，應該顯示歷史記錄。

• 點擊確定，顯示結果列表。

• 清空輸入框內容后，返回關鍵字顯示。
  

   

  　　

　　可以看出，對輸入框的操作決定了當前頁面顯示的內容，所以我們需要監聽輸入框的獲取焦點事件(bindfocus)，確定點擊事件(bindtap)以及輸入事件(bindinput)，還需要記錄輸入的關鍵字searchKey。

　　輸入框完成后我們先寫熱門關鍵字，這些關鍵字也是來源于網絡，所以還需要請求網絡。在services/music里添加方法：

1. function getHotSearchKey(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.             _: Date.now()

12.         };

13.         wx.request({

14.             url: 'http://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg',

15.             data: data,

16.             header: {

17.                 'Content-Type': 'application/json'

18.             },

19.             success: function (res) {

20.                 if (res.statusCode == 200) {

21.                     callback(res.data)

22.                 } else {

23.  

24.                 }

25.             }

26.         });

27. }

28. ...

29. module.exports = {

30.   ...

31.   getHotSearchKey:getHotSearchKey

32. }

復制代碼

　　返回JSON格式結果為

1. {

2.     "code": 0,

3.     "data": {

4.         "hotkey": [

5.             {

6.                 "k": "三生三世十里桃花 ",

7.                 "n": 90558

8.             },

9.             {

10.                 "k": "DJ ",

11.                 "n": 67590

12.             },

13.             {

14.                 "k": "薛之謙 ",

15.                 "n": 60425

16.             },

17.             {

18.                 "k": "涼涼 ",

19.                 "n": 37056

20.             },

21.             {

22.                 "k": "那片星空那片海 ",

23.                 "n": 29170

24.             },

25.             {

26.                 "k": "理想 ",

27.                 "n": 28695

28.             },

29.             ...

30.         ],

31.         "special_key": "歌手",

32.         "special_url": "http://y.qq.com/m/act/singer/index.html?ADTAG=search"

33.     },

34.     "subcode": 0

35. }

復制代碼

　　這里返回的hotkey就是我們需要的關鍵字啦，除此之外，我們還看到下面有“special_key”這一部分，這相當于廣告部分，為服務器推薦的搜索關鍵字。所以我們以標簽的形式顯示關鍵字，對于廣告那部分關鍵字，我們以紅色字體，并且放在最前方，最后達成的樣式應該為圖10-5所示：

43232.png (5.21 KB, 下載次數: 4)

　　下載附件

　　 保存到相冊

2017-2-15 11:19 上傳

　　實現這一布局的代碼為：

1. <view class="quick-search" wx:if="{{showSearchPanel == 1}}">

2.     <view class="quick-search-title">

3.       <text>熱門搜索</text>

4.     </view>

5.     <view class="quick-search-bd">

6.       <text class="quick-search-item-red" data-url="{{special.url}}" data-key="{{special.key}}" bindtap="hotKeysTap" wx:if="{{showSpecial}}">{{special.key}}</text>

7.       <text class="quick-search-item" wx:for="{{hotkeys}}" wx:key="unique" data-n="{{item.n}}" bindtap="hotKeysTap" data-key="{{item.k}}">{{item.k}}</text>

8.     </view>

9.   </view>

復制代碼

　　這里面showSearchPanel的值為我們控制這一頁面切換的依據，當其為1的時候，顯示熱門關鍵字。

　　綁定的數據有兩個，special和hotkey。對于special部分，為了防止服務器缺失“special_key”這一部分從而導致沒有數據顯示，我們定義一個數據showSpecial來決定是否顯示這一部分。

　　將這三個數據以及輸入框用到的searchKey添加到data里吧。

　　修改index.js文件：

1. //引用網絡請求文件

2. var MusicService = require('../../services/music');

3.  

4. //獲取應用實例

5. var app = getApp()

6. Page({

7.     data: {

8.         indicatorDots: true,

9.         autoplay: true,

10.         interval: 5000,

11.         duration: 1000,

12.         radioList: [],

13.         slider: [],

14.         mainView: 1,

15.         topList:[],

16.         hotkeys: [],

17.         showSpecial: false,

18.         special: { key: '', url: '' },

19.         searchKey: '',

20.     },

21.     onLoad: function () {

22.         var that = this;

23.         MusicService.getRecommendMusic(that.initPageData);

24.         MusicService.getTopMusic(that.initTopList);

25.         MusicService.getHotSearchKeys(that.initSearchHotKeys);   

26.     },

27.  

28.     ...

29.     initSearchHotKeys: function (data) {

30.         var self = this;

31.         if (data.code == 0) {

32.             var special = { key: data.data.special_key, url: data.data.special_url };

33.             var hotkeys = [];

34.             if (data.data.hotkey && data.data.hotkey.length) {  //當返回數據不為空且長度不為0

35.                 for (var i = 0; (i < data.data.hotkey.length && i < 6); i++) {   //如果長度大于6只保留前6個

36.                     var item = data.data.hotkey[i];                              

37.                     hotkeys.push(item);

38.                 }

39.             }

40.             if (special != undefined) {     //當返回項有special部分時，showSpecial為true

41.                 self.setData({

42.                     showSpecial: true

43.                 })

44.             } else {                        //沒有special部分，showSpecial為false

45.                 self.setData({

46.                     showSpecial:false

47.                 })

48.             }

49.             self.setData({

50.                 special: special,

51.                 hotkeys: hotkeys

52.             })

53.         }

54.     },

55.     ...

56. })

復制代碼

　　數據加載完成后，我們為每個熱門關鍵字view添加點擊事件。

1. hotKeysTap: function (e) {

2.          //TODO

3.     },

復制代碼

　　在這個點擊事件里，我們需要做的事情有：

• 將點擊的關鍵詞加入歷史記錄。

• 將頁面切換到搜索結果列表。 在完成搜索結果列表頁后我們再來完善這一部分吧。
  

   

  　　

　　最后附上這一部分的格式文件。

1. .quick-search {

2.     padding:20rpx;

3.     box-sizing:border-box;

4. }

5. .quick-search-title {

6.     font-size:28rpx;

7. }

8. .quick-search-bd {

9.     position:relative;

10.     margin-top:20rpx;

11. }

12. .quick-search-item {

13.     font-size:28rpx;

14.     float:left;

15.     margin:0 20rpx 20rpx 0;

16.     line-height:40rpx;

17.     padding:10rpx 20rpx;

18.     border-radius:30rpx;

19.     color:#000;

20.     border:2rpx solid rgba(0,0,0,.6);

21. }

22. .quick-search-item-red {

23.     font-size:28rpx;

24.     float:left;

25.     margin:0 20rpx 20rpx 0;

26.     line-height:40rpx;

27.     padding:10rpx 20rpx;

28.     border-radius:30rpx;

29.     color:#fc4524;

30.     border:2rpx solid #fc4524;

31. }

關于“微信小程序怎么制作音樂播放器檢索頁”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。