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

2020-09-27

導讀：這部分也是列表樣式，每一項由前面的時鐘圖標，中間的文字以及最后表示刪除的“X”組成，最下方為清空整個列表的選項。...

　　這部分也是列表樣式，每一項由前面的時鐘圖標，中間的文字以及最后表示刪除的“X”組成，最下方為清空整個列表的選項。

<view class="search-hi" wx:if="{{showSearchPanel == 2}}">
<block wx:if="{{historySearchs.length > 0}}">
<view class="search-hi-item" wx:for="{{historySearchs}}" wx:key="unique">
<view class="hi-icon"></view>
<text class="hi-text" data-key="{{item}}" bindtap="historysearchTap">{{item}}</text>
<view class="hi-close" data-index="{{index}}" bindtap="delHistoryItem"></view>
</view>
<view class="clear-serach" bindtap="clearHistorySearchs">清除搜索記錄</view>
</block>
</view>

復制代碼

　　這一部分只有當showSearchPanel=2才顯示。

　　具體的內容，我們首先要判斷是否有歷史數據。使用historySearchs存儲所以歷史記錄，只有當其長度大于0時，才渲染這一部分。

　　block里的內容就如我們所要的一致，然后我們為文字，結尾的“X”標志，和最后的“清除搜索記錄”添加點擊事件。

　　格式文件為：

.search-hi-item {
height:88rpx;
line-height:88rpx;
border-bottom:2rpx solid #ededed;
}
.hi-icon {
position:absolute;
left:20rpx;
display:inline-block;
width:88rpx;
height:88rpx;
background:url('../../resources/images/clock_ic.png') no-repeat center center;
background-size:40rpx;
}
.hi-text {
position:absolute;
left:108rpx;
right:108rpx;
display:block;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
font-size:32rpx;
}
.hi-close {
width:88rpx;
height:88rpx;
position:absolute;
right:20rpx;
background:url('../../resources/images/cancel.png') no-repeat center center;
}
.clear-serach {
font-size:24rpx;
text-align:center;
color:#47c88a;
line-height:88rpx;
}

復制代碼

　　background里加載了分別加載了兩個本地圖片并為其設置了不平鋪與居中的屬性。

　　很顯然，在我們每次點擊確定按鈕后，輸入框內的值除了發送到服務器請求搜索結果，還要添加到historySearchs里。

　　所以我們先寫搜索結果列表，然后一起處理確定按鈕的點擊事件。

　　首先是網絡請求的函數：

function getSearchMusic(word,callback){ //word為傳入的關鍵字，callback為回調函數
var data = {
g_tk: 5381,
uin: 0,
format: 'json',
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
platform: 'h5',
needNewCode: 1,
w: word,
zhidaqu: 1,
catZhida: 1,
t: 0,
flag: 1,
ie: 'utf-8',
sem: 1,
aggr: 0,
perpage: 20,
n: 20,
p: 1,
remoteplace: 'txt.mqq.all',
_: Date.now()
};
wx.request({
url: 'http://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp',
data: data,
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if (res.statusCode == 200) {
callback(res.data);
} else {
}
}
});
}
...
module.exports = {
...
getSearchMusic:getSearchMusic
}

復制代碼

　　返回的JSON數據為：

{
"code": 0,
"data": {
"keyword": "那片星空那片海 ",
"priority": 0,
"qc": [],
"semantic": {
"curnum": 0,
"curpage": 1,
"list": [],
"totalnum": 0
},
"song": {
"curnum": 6,
"curpage": 1,
"list": [
{
"albumid": 1829165,
"albummid": "000cvc411fKPIC",
"albumname": "那片星空那片海電視原聲帶",
"albumname_hilight": "那片星空那片海 電視原聲帶",
"alertid": 100007,
"chinesesinger": 0,
"docid": "8313377529987609872",
"format": "qqhq;common;mp3common;wmacommon",
"grp": [],
"interval": 227,
"isonly": 1,
"lyric": "《那片星空那片海》電視劇片頭曲",
&nnbsp; "lyric_hilight": "《那片星空那片海》電視劇片頭曲",
"msgid": 13,
"nt": 3247935513,
"pay": {
"payalbum": 1,
"payalbumprice": 500,
"paydownload": 1,
"payinfo": 1,
"payplay": 1,
"paytrackmouth": 0,
"paytrackprice": 0
},
"preview": {
"trybegin": 0,
"tryend": 0,
"trysize": 0
},
"pubtime": 1486483200,
"pure": 0,
"singer": [
{
"id": 12111,
"mid": "004YXxql1sSr2o",
"name": "金志文",
"name_hilight": "金志文"
}
],
"size128": 3649005,
"size320": 9122181,
"sizeape": 23599481,
"sizeflac": 23676261,
"sizeogg": 4916985,
"songid": 200552006,
"songmid": "001lggCh2Nw7us",
"songname": "那片星空那片海",
"songname_hilight": "那片星空那片海",
"songurl": "http://y.qq.com/#type=song&id=200552006",
"stream": 5,
"switch": 594177,
"t": 0,
"tag": 10,
"type": 0,
"ver": 0,
"vid": ""
},
...
],
"totalnum": 6
},
"totaltime": 0,
"zhida": {
"albumid": 1829165,
"albummid": "000cvc411fKPIC",
"albumname": "那片星空那片海電視原聲帶",
"singername": "華語群星",
"type": 3
}
},
"message": "",
"notice": "",
"subcode": 0,
"time": 1487063618,
"tips": ""
}

復制代碼

　　有了數據之后，我們需要在列表里顯示的內容為歌曲名稱(songname)與歌手名稱(singer.name)。

　　上一節：微信小程序小白項目開發案例之音樂播放器—檢索頁(上)

　　下一節：微信小程序小白項目開發案例之音樂播放器—檢索頁(下)

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

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

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