微信小程序音乐播放器,音乐播放器检索页制作（中）

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)。

　　上一节：微信小程序小白项目开发案例之音乐播放器—检索页(上)

　　下一节：微信小程序小白项目开发案例之音乐播放器—检索页(下)

第二部分：如何开通一个小商店