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

This article introduces the relevant knowledge of "how to make the search page of WeChat Mini Programs music player". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

This function is very simple, we have used the historySearchs array when writing the history page, so when we add it, we only have to get this array, then push the words to be added to the array, and then update the page with setData.

AddHistorySearchs: function (key) {

Var historySearchs = this.data.historySearchs

HistorySearchs.push (key)

This.setData ({

HistorySearchs: historySearchs

})

}

Copy the code

But the problem with this is that when users search for the same content multiple times, the same word will be added to the array many times, resulting in duplicate content in our history list, which is obviously unreasonable, so we need to determine whether the word is already in the array before each push.

FindHistorySearchs: function (key) {

Var historySearchs = this.data.historySearchs

For (var I = 0; I < historySearchs.length; iTunes +) {

If (historySearchs [I] = = key) {return false;}

}

Return true

}

Create a new function that iterates through the historySearchs array and returns false if the same item exists, but not true.

Then we change our addHistorySearchs method:

AddHistorySearchs: function (key) {

Var historySearchs = this.data.historySearchs

If (this.findHistorySearchs (key)) {

HistorySearchs.push (key)

This.setData ({

HistorySearchs: historySearchs

})

}

}

With this method in place, we begin to complete our event code one by one.

Add all variables related to the update page to the data:

Data: {

Slider: []

IndicatorDots: true

Autoplay: true

Interval: 5000

Duration: 1000

RadioList: []

CurrentView: 1

TopList: []

Hotkeys: []

ShowSpecial: false

Special: {key:', url:''}

SearchKey:''

SearchSongs: []

Zhida: {}

ShowSearchPanel: 1

HistorySearchs: []

}

Click events for popular keywords:

HotKeysTap: function (e) {

Var dataSet = e.currentTarget.dataset

Var key = dataSet.key; / / get the keyword clicked

Var self = this

If (key! ='') {/ / determine whether it is empty or not

Self.addHistorySearchs (key); / / call the method we wrote to add the history

Self.setData ({

SearchKey: key, / / add text to the input box

ShowSearchPanel: 3, / / switch the display content to search results

});

MusicService.getSearchMusic (key, function (data) {/ / request network data

If (data.code = = 0) {

Var songData = data.data

Self.setData ({/ / add the obtained data to the corresponding array

SearchSongs: songData.song.list

Zhida: songData.zhida

});

}

});

}

}

Enter the box to get the focus event:

BindFocus: function (e) {

Var self = this

If (this.data.showSearchPanel = = 1) {/ / determine whether the content is a popular keyword

Self.setData ({

ShowSearchPanel: 2 / / switch to history

})

}

}

Click events for historical text:

HistorysearchTap: function (e) {

Var dataSet = e.currentTarget.dataset

Var key = dataSet.key; / / get the history text of the click

Var self = this

Self.setData ({

SearchKey: key, / / add text in the input box

ShowSearchPanel: 3 / / display search results

});

MusicService.getSearchMusic (key, function (data) {/ / request network to get search results

If (data.code = = 0) {

Var songData = data.data

Self.setData ({

SearchSongs: songData.song.list

Zhida: songData.zhida

});

}

});

}

Click events of "X" and "clear History" at the end of the history:

DelHistoryItem: function (e) {

Var historySearchs = this.data.historySearchs

Var dataSet = e.currentTarget.dataset; / / get the clicked entry

If (dataSet.index! = 'undefined') {

Var _ index = parseInt (dataSet.index); / / get the item of the array in which the click entry is

HistorySearchs.splice (_ index, 1); / / Delete the corresponding entry from the array

This.setData ({/ / update page

HistorySearchs: historySearchs

});

If (historySearchs.length==0) {/ / if there is no data in the history

This.setData ({

ShowSearchPanel: 1 / / switch to the hot keyword

})

}

}

}

ClearHistorySearchs: function () {

This.setData ({

HistorySearchs: [], / / empty the history array

ShowSearchPanel: 1 / / switch to the hot keyword

})

}

Enter the event in the input box:

BindKeyInput: function (e) {

Var self = this

Self.setData ({/ / update the value of searchKey

SearchKey: e.detail.value

});

If (e.detail.value = "") {/ / if the value is empty and no hot keywords are currently displayed

If (this.data.showSearchPanel! = 1) {

Self.setData ({

ShowSearchPanel: 1 / / switch to a hot keyword

})

}

}

}

Confirm button click event:

SearchOk: function (e) {

Var self = this

Var searchKey = this.data.searchKey; / / get the value of searchKey

If (searchKey! = "") {

Self.setData ({

ShowSearchPanel: 3 / / display search results

});

Self.addHistorySearchs (searchKey); / / add to history

MusicService.getSearchMusic (searchKey, function (data) {

If (data.code = = 0) {

Var songData = data.data

Self.setData ({

SearchSongs: songData.song.list

Zhida: songData.zhida

});

}

});

}

}

The click events of the search results item are divided into two categories: albums and songs:

ZhidaTap: function (e) {/ / the jump event of the album

Var dataSet = e.currentTarget.dataset

Var mid = dataSet.id

App.setGlobalData ({'zhidaAlbummid': mid}); / / Save album id as a global variable

Wx.navigateTo ({/ / Page Jump

Url:'.. / cdinfo/cdinfo'

})

}

MusuicPlay: function (e) {/ / the jump event of the song

Var dataSet = e.currentTarget.dataset

/ / TODO

}

}

This is the end of the content of "how to make the search page of WeChat Mini Programs Music player". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.