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

2018-03-21

導(dǎo)讀：首頁的最后一部分為檢索頁，也就是讓用戶通過關(guān)鍵字搜索歌曲或?qū)］嫛?..

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

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

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

<view class="search-bar">
<view class="search-input-warp">
<form bindsubmit="searchSubmit">
<label class="search-input-icon"></label>
<input type="text" class="search-input" bindfocus="bindFocus" name="search" value="{{searchKey}}" bindinput="bindKeyInput" placeholder="搜索歌曲、歌單、專輯" placeholder-class="search-input-placeholder"/>
<view class="search-cancel" bindtap="searchOk">確定</view>
</form>
</view>
</view>

復(fù)制代碼

　　格式文件為：

.search-bar {
background:#f7f7f7;
padding:20rpx;
}
.search-input-warp {
position:relative;
padding:16rpx 24rpx 16rpx 70rpx;
background:#fff;
}
.search-input-icon {
content:" ";
position:absolute;
top:18rpx;
left:20rpx;
display:inline-block;
vertical-align:middle;
width:40rpx;
height:40rpx;
background-image:url("../../resources/images/search.png");
background-repeat:no-repeat;
background-size:40rpx;
}
.search-input {
font-size:28rpx;
line-height:40rpx;
}
.search-input-placeholder {
color:#ddd;
font-size:28rpx;
line-height:40rpx;
}
.search-cancel {
position:absolute;
right:0;
top:0;
display:inline-block;
font-size:32rpx;
height:90rpx;
width:140rpx;
text-align:center;
line-height: 90rpx;
z-index:50;
background:#f7f7f7;
}

復(fù)制代碼

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

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

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

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

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

function getHotSearchKey(callback){
var data = {
g_tk: 5381,
uin: 0,
format: 'json',
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
platform: 'h5',
needNewCode: 1,
_: Date.now()
};
wx.request({
url: 'http://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg',
data: data,
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if (res.statusCode == 200) {
callback(res.data)
} else {
}
}
});
}
...
module.exports = {
...
getHotSearchKey:getHotSearchKey
}

復(fù)制代碼

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

{
"code": 0,
"data": {
"hotkey": [
{
"k": "三生三世十里桃花 ",
"n": 90558
},
{
"k": "DJ ",
"n": 67590
},
{
"k": "薛之謙 ",
"n": 60425
},
{
"k": "涼涼 ",
"n": 37056
},
{
"k": "那片星空那片海 ",
"n": 29170
},
{
"k": "理想 ",
"n": 28695
},
...
],
"special_key": "歌手",
"special_url": "http://y.qq.com/m/act/singer/index.html?ADTAG=search"
},
"subcode": 0
}

復(fù)制代碼

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

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

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

<view class="quick-search" wx:if="{{showSearchPanel == 1}}">
<view class="quick-search-title">
<text>熱門搜索</text>
</view>
<view class="quick-search-bd">
<text class="quick-search-item-red" data-url="{{special.url}}" data-key="{{special.key}}" bindtap="hotKeysTap" wx:if="{{showSpecial}}">{{special.key}}</text>
<text class="quick-search-item" wx:for="{{hotkeys}}" wx:key="unique" data-n="{{item.n}}" bindtap="hotKeysTap" data-key="{{item.k}}">{{item.k}}</text>
</view>
</view>

復(fù)制代碼

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

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

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

　　修改index.js文件：

//引用網(wǎng)絡(luò)請求文件
var MusicService = require('../../services/music');
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
radioList: [],
slider: [],
mainView: 1,
topList:[],
hotkeys: [],
showSpecial: false,
special: { key: '', url: '' },
searchKey: '',
},
onLoad: function () {
var that = this;
MusicService.getRecommendMusic(that.initPageData);
MusicService.getTopMusic(that.initTopList);
MusicService.getHotSearchKeys(that.initSearchHotKeys);
},
...
initSearchHotKeys: function (data) {
var self = this;
if (data.code == 0) {
var special = { key: data.data.special_key, url: data.data.special_url };
var hotkeys = [];
if (data.data.hotkey && data.data.hotkey.length) { //當(dāng)返回數(shù)據(jù)不為空且長度不為0
for (var i = 0; (i < data.data.hotkey.length && i < 6); i++) { //如果長度大于6只保留前6個
var item = data.data.hotkey[i];
hotkeys.push(item);
}
}
if (special != undefined) { //當(dāng)返回項(xiàng)有special部分時，showSpecial為true
self.setData({
showSpecial: true
})
} else { //沒有special部分，showSpecial為false
self.setData({
showSpecial:false
})
}
self.setData({
special: special,
hotkeys: hotkeys
})
}
},
...
})

復(fù)制代碼

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

hotKeysTap: function (e) {
//TODO
},

復(fù)制代碼

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

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

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

.quick-search {
padding:20rpx;
box-sizing:border-box;
}
.quick-search-title {
font-size:28rpx;
}
.quick-search-bd {
position:relative;
margin-top:20rpx;
}
.quick-search-item {
font-size:28rpx;
float:left;
margin:0 20rpx 20rpx 0;
line-height:40rpx;
padding:10rpx 20rpx;
border-radius:30rpx;
color:#000;
border:2rpx solid rgba(0,0,0,.6);
}
.quick-search-item-red {
font-size:28rpx;
float:left;
margin:0 20rpx 20rpx 0;
line-height:40rpx;
padding:10rpx 20rpx;
border-radius:30rpx;
color:#fc4524;
border:2rpx solid #fc4524;
}

復(fù)制代碼

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

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