舟山闪爸电子技术有限公司

產(chǎn)品中心
更多服務(wù)

微信小程序音樂(lè)播放器,音樂(lè)播放器檢索頁(yè)制作（上）

—— 2018 ——
03/21
00:00

來(lái)源：

作者：未知

閱讀：0

欄目：小程序開(kāi)發(fā)

2018/3/21 0:00:00 來(lái)源：不詳 作者：未知

　　首頁(yè)的最后一部分為檢索頁(yè)，也就是讓用戶(hù)通過(guò)關(guān)鍵字搜索歌曲或?qū)］嫛?/font>

　　說(shuō)到搜索頁(yè)，比不可少的就是關(guān)鍵字的輸入框。

　　參照這個(gè)樣式，布局文件應(yīng)該為：

  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="搜索歌曲、歌單、專(zhuān)輯" placeholder-class="search-input-placeholder"/>
  6.         <view class="search-cancel" bindtap="searchOk">確定</view>
  7.       </form>
  8.     </view>
  9.   </view>
復(fù)制代碼

 

　　格式文件為：

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

 

　　因?yàn)橐峤魂P(guān)鍵字，所以使用表單組件，內(nèi)部由表示搜索的放大鏡圖標(biāo)，代表輸入完成的“確定”按鈕以及輸入框組成。

　　

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

　　

  • 用戶(hù)進(jìn)入檢索頁(yè)，顯示的內(nèi)容應(yīng)該是輸入框與熱門(mén)關(guān)鍵字。
  • 開(kāi)始輸入后(即輸入框獲得焦點(diǎn))，應(yīng)該顯示歷史記錄。
  • 點(diǎn)擊確定，顯示結(jié)果列表。
  • 清空輸入框內(nèi)容后，返回關(guān)鍵字顯示。

     

    　　


 

　　可以看出，對(duì)輸入框的操作決定了當(dāng)前頁(yè)面顯示的內(nèi)容，所以我們需要監(jiān)聽(tīng)輸入框的獲取焦點(diǎn)事件(bindfocus)，確定點(diǎn)擊事件(bindtap)以及輸入事件(bindinput)，還需要記錄輸入的關(guān)鍵字searchKey。

　　

　　輸入框完成后我們先寫(xiě)熱門(mén)關(guān)鍵字，這些關(guān)鍵字也是來(lái)源于網(wǎng)絡(luò)，所以還需要請(qǐng)求網(wǎng)絡(luò)。在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: 'h5',
  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. }
復(fù)制代碼

 

　　返回JSON格式結(jié)果為

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

 

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

　　

　　微信小程序音樂(lè)播放器,音樂(lè)播放器檢索頁(yè)制作（上）

　　

 

　　

　　

　　實(shí)現(xiàn)這一布局的代碼為：

  1. <view class="quick-search" wx:if="{{showSearchPanel == 1}}">
  2.     <view class="quick-search-title">
  3.       <text>熱門(mén)搜索</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>
復(fù)制代碼

 

　　這里面showSearchPanel的值為我們控制這一頁(yè)面切換的依據(jù)，當(dāng)其為1的時(shí)候，顯示熱門(mén)關(guān)鍵字。

　　

　　綁定的數(shù)據(jù)有兩個(gè)，special和hotkey。對(duì)于special部分，為了防止服務(wù)器缺失“special_key”這一部分從而導(dǎo)致沒(méi)有數(shù)據(jù)顯示，我們定義一個(gè)數(shù)據(jù)showSpecial來(lái)決定是否顯示這一部分。

　　

　　將這三個(gè)數(shù)據(jù)以及輸入框用到的searchKey添加到data里吧。

　　

　　修改index.js文件：

  1. //引用網(wǎng)絡(luò)請(qǐng)求文件
  2. var MusicService = require('../../services/music');
  3.  
  4. //獲取應(yīng)用實(shí)例
  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) {  //當(dāng)返回?cái)?shù)據(jù)不為空且長(zhǎng)度不為0
  35.                 for (var i = 0; (i < data.data.hotkey.length && i < 6); i++) {   //如果長(zhǎng)度大于6只保留前6個(gè)
  36.                     var item = data.data.hotkey[i];                              
  37.                     hotkeys.push(item);
  38.                 }
  39.             }
  40.             if (special != undefined) {     //當(dāng)返回項(xiàng)有special部分時(shí)，showSpecial為true
  41.                 self.setData({
  42.                     showSpecial: true
  43.                 })
  44.             } else {                        //沒(méi)有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. })
復(fù)制代碼

 

　　數(shù)據(jù)加載完成后，我們?yōu)槊總€(gè)熱門(mén)關(guān)鍵字view添加點(diǎn)擊事件。

  1. hotKeysTap: function (e) {
  2.          //TODO
  3.     },
復(fù)制代碼

 

　　在這個(gè)點(diǎn)擊事件里，我們需要做的事情有：

　　

  • 將點(diǎn)擊的關(guān)鍵詞加入歷史記錄。
  • 將頁(yè)面切換到搜索結(jié)果列表。 在完成搜索結(jié)果列表頁(yè)后我們?cè)賮?lái)完善這一部分吧。

     

    　　


 

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

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

 

　　上一節(jié)：微信小程序小白項(xiàng)目開(kāi)發(fā)案例之音樂(lè)播放器—排行頁(yè)


【本站聲明】
  1、本站文章中所選用的圖片及文字來(lái)源于網(wǎng)絡(luò)以及用戶(hù)投稿，由于未聯(lián)系到知識(shí)產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識(shí)產(chǎn)權(quán)的登記，如有知識(shí)產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請(qǐng)立即聯(lián)系。
  2、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類(lèi)商品/服務(wù)詳細(xì)的資訊，請(qǐng)您直接與該類(lèi)商品/服務(wù)的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國(guó)內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長(zhǎng)期專(zhuān)注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開(kāi)店SaaS社交電商服務(wù)平臺(tái)、在線教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營(yíng)銷(xiāo)助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢(xún)等。

KESION 不斷通過(guò)技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過(guò)科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！



▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多



熱門(mén)標(biāo)簽
微信小程序
上/下篇
換一換相關(guān)推薦
精選內(nèi)容
熱點(diǎn)精選