Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to make the retrieval page of WeChat Mini Programs music player". In the daily operation, I believe many people have doubts about how to make the retrieval page of WeChat Mini Programs music player. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation method. I hope it will be helpful to answer the doubt of "how to make WeChat Mini Programs music player retrieval page". Next, please follow the editor to study!

This section is also a list style, and each item consists of the previous clock icon, the middle text, and the last "X" that indicates deletion, with the option to clear the entire list at the bottom.

{{item}}

Clear search record

This section is displayed only when showSearchPanel=2.

For the specific content, we first have to judge whether there is historical data. Use historySearchs to store history, which is rendered only if its length is greater than 0.

The content in block is exactly what we want, and then we add click events to the text, the "X" flag at the end, and the final "clear search record".

The format file is:

.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 loads two local images and sets the properties of untiling and centering for them.

Obviously, after each click of the OK button, the values in the input box are not only sent to the server to request the search results, but also added to the historySearchs.

So let's first write a list of search results, and then deal with the click event of the OK button together.

First, the function of the network request:

Function getSearchMusic (word,callback) {/ / word is the passed keyword, and callback is the callback function

Var data = {

G_tk: 5381

Uin: 0

Format: 'json'

InCharset: 'utf-8'

OutCharset: 'utf-8'

Notice: 0

Platform: 'H6'

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

}

The returned JSON data is:

{

"code": 0

"data": {

"keyword": "the starry sky and the sea"

"priority": 0

"qc": []

"semantic": {

"curnum": 0

"curpage": 1

"list": []

"totalnum": 0

}

"song": {

"curnum": 6

"curpage": 1

"list": [

{

"albumid": 1829165

"albummid": "000cvc411fKPIC"

"albumname": "the starry sky, the sea TV soundtrack."

"albumname_hilight": "the starry sky, the sea TV soundtrack."

"alertid": 100007

"chinesesinger": 0

"docid": "8313377529987609872"

"format": "qqhq;common;mp3common;wmacommon"

"grp": []

"interval": 227

"isonly": 1

"lyric": "the starry sky, the sea" TV series opening song

& nnbsp; "lyric_hilight": "the starry sky, the sea" TV series opener

"msgid": 13

"nt": 3247935513

"pay": {

"payalbum": 1

"payalbumprice":

"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": "Jin Zhiwen"

"name_hilight": "Jin Zhiwen"

}

]

"size128": 3649005

"size320": 9122181

"sizeape": 23599481

"sizeflac": 23676261

"sizeogg": 4916985

"songid": 200552006

"songmid": "001lggCh3Nw7us"

"songname": "the starry sky and the sea"

"songname_hilight": "the starry sky and the sea"

"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": "the starry sky, the sea TV soundtrack."

"singername": "Chinese stars"

"type": 3

}

}

"message":

"notice":

"subcode": 0

"time": 1487063618

"tips":

}

Once we have the data, what we need to display in the list are the song name (songname) and the singer name (singer.name).

At this point, the study on "how to make the retrieval page of WeChat Mini Programs music player" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.