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

This article mainly introduces the relevant knowledge of "how to make music player search page by WeChat Mini Programs". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how WeChat Mini Programs makes a music player search page" can help you solve the problem.

The last part of the home page is the search page, which allows users to search for songs or albums by keywords.

When it comes to the search page, what is indispensable is the keyword input box.

With reference to this style, the layout file should be:

Confirm

Copy the code

The format file is:

. 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

}

Copy the code

Because you want to submit keywords, you use the form component, which consists of a magnifying glass icon that represents the search, an OK button that represents the completion of the input, and an input box.

In addition to the input box, this page should also display a list of search results, search history and popular keywords. These contents should be displayed below the input box and switched logically. The logical relationship between them is as follows:

When the user enters the search page, the content displayed should be the input box and popular keywords.

After you start typing (that is, the input box gets focus), the history should be displayed.

Click OK to display a list of results.

After clearing the contents of the input box, return to the keyword display.

As you can see, the action on the input box determines what is displayed on the current page, so we need to monitor the input box's acquisition focus event (bindfocus), determine the click event (bindtap) and the input event (bindinput), and record the keyword searchKey entered.

After the completion of the input box, we first write hot keywords, these keywords are also from the network, so we also need to request the network. Add a method to services/music:

Function getHotSearchKey (callback) {

Var data = {

G_tk: 5381

Uin: 0

Format: 'json'

InCharset: 'utf-8'

OutCharset: 'utf-8'

Notice: 0

Platform: 'H6'

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

}

Copy the code

Returns the result in JSON format as

{

"code": 0

"data": {

"hotkey": [

{

"k": "three lives, three generations, ten miles of peach blossoms"

"n": 90558

}

{

"k": "DJ"

"n": 67590

}

{

K: Xue Zhiqian

"n": 60425

}

{

"k": "cool"

"n": 37056

}

{

"K": "the starry sky and the sea"

"n": 29170

}

{

"k": "ideal"

"n": 28695

}

...

]

"special_key": "Singer"

"special_url": "http://y.qq.com/m/act/singer/index.html?ADTAG=search""

}

"subcode": 0

}

Copy the code

The hotkey returned here is the keyword we need, and in addition, we see the "special_key" section below, which is equivalent to the advertising section, the search keyword recommended for the server. So we display keywords in the form of tags, and for that part of the advertisement, we put them in red font and put them at the front, and the final style should be shown in figure 10-5:

43232.png (5.21 KB, downloads: 4)

Download attachment

Save to album

2017-2-15 11:19 upload

The code to implement this layout is:

Popular search

{{special.key}}

{{item.k}}

Copy the code

The value of showSearchPanel is the basis for us to control the switching of this page, and when it is 1, the popular keyword is displayed.

There are two bound data, special and hotkey. For the special part, to prevent the server from missing the "special_key" part, resulting in no data display, we define a data showSpecial to decide whether or not to display this part.

Add these three data and the searchKey used in the input box to the data.

Modify the index.js file:

/ / reference the network request file

Var MusicService = require ('.. /.. / services/music')

/ / obtain an application instance

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) {/ / when the returned data is not empty and the length is not 0

For (var I = 0; (I < data.data.hotkey.length & & I < 6); iTunes +) {/ / keep only the first 6 if the length is greater than 6

Var item = data.data.hotkey [I]

Hotkeys.push (item)

}

}

If (special! = undefined) {/ / when the returned item has a special part, showSpecial is true

Self.setData ({

ShowSpecial: true

})

} else {/ / there is no special part, and showSpecial is false

Self.setData ({

ShowSpecial:false

})

}

Self.setData ({

Special: special

Hotkeys: hotkeys

})

}

}

...

})

Copy the code

After the data is loaded, we add click events for each popular keyword view.

HotKeysTap: function (e) {

/ / TODO

}

Copy the code

In this click event, what we need to do are:

Add the clicked keywords to the history.

Switch the page to the list of search results. Let's refine this section after completing the search results list page.

Finally, this part of the format file is attached.

. 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 (0pr 0re0pl .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

}

This is the end of the content about "how to make the music player search page by WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.