10.4.4 检索页 （中）
接着我们完成历史记录部分，完成后应该类似图10-6：
图10-6 历史记录样图
这部分也是列表样式，每一项由前面的时钟图标，中间的文字以及最后表示删除的“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": "<span class=\"c_tx_highlight\">那片星空那片海</span> 电视原声带",
"alertid": 100007,
"chinesesinger": 0,
"docid": "8313377529987609872",
"format": "qqhq;common;mp3common;wmacommon",
"grp": [],
"interval": 227,
"isonly": 1,
"lyric": "《那片星空那片海》电视剧片头曲",
"lyric_hilight": "《<span class=\"c_tx_highlight\">那片星空那片海</span>》电视剧<span class=\"c_tx_highlight\">片</span>头曲",
"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": "<span class=\"c_tx_highlight\">那片星空那片海</span>",
"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）。完成后的列表样式为图10-7所示。
图10-7 搜索结果样图
这个列表分为两个部分，首先是最上方的带图片的专辑信息，它的数据源为返回数据里“zhida”这部分，然后下面就是歌曲信息了，这前面的音乐图标为本地文件。
<view class="ssong-list" wx:if="{{showSearchPanel == 3}}">
<block wx:if="{{zhida.type == 3}}">
<view class="ssong-item" data-data="{{zhida}}" data-id="{{zhida.albummid}}" bindtap="zhidaTap">
<image class="ss-icon" mode="aspectFit" src="http://y.gtimg.cn/music/photo_new/T002R68x68M000{{zhida.albummid}}.jpg?max_age=2592000"></image>
<view class="ss-text">
<text class="ss-title">{{zhida.albumname}}</text>
<text class="ss-sub-title">{{zhida.singername}}</text>
</view>
</view>
</block>
<view class="ssong-item" wx:for="{{searchSongs}}" wx:key="unique" data-index="{{index}}" bindtap="musuicPlay">
<image class="ss-icon" mode="aspectFit" src="../../resources/images/song_icon.png"></image>
<view class="ss-text">
<text class="ss-title">{{item.songname}}</text>
<text class="ss-sub-title">
<block wx:for="{{item.singer}}">{{item.name}}</block>
</text>
</view>
</view>
</view>
首先这部分代码对应的内容只有在showSearchPanel=3的时候才显示，然后我们用block包裹了“zhida”这部分view，在判断返回数据中，zhida.type等于3后（表示搜索结果里包涵专辑结果，如果没有，这个值为0），才渲染这部分代码。包裹的内容与下方列表内容一致，都是由图片，主标题（歌曲/专辑名称）与副标题（歌手名称）组成，只不过专辑里的图片为网络图片，通过拼接字符串的方式（即使用我们获得的专辑id代替url里这部分组成完整地址）获取图片，而歌曲中我们使用的是本地图片。
这一部分的格式文件为：
.ssong-list {
background:#fff;
}
.ssong-item {
position:relative;
height:88rpx;
border-bottom:2rpx solid #ededed;
}
.ss-icon {
position:absolute;
left:20rpx;
top:14rpx;
width:60rpx;
height:60rpx;
}
.ss-text {
position:absolute;
left:108rpx;
right:20rpx;
padding:10rpx 0;
}
.ss-title {
font-size:32rpx;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.ss-sub-title {
display: block;
font-size:24rpx;
color:#999;
padding-top:4rpx;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}