Related learning recommendations: WeChat mini program tutorial

Preface

My mini program some time ago My partner has introduced the music playback function of the NetEase Cloud Music applet in detail. As a front-end novice, I have been learning for a while. I have been very busy recently and did not write out the real-time search content in time to share with you (in fact, the code and The function has almost been written before), so today I will tell you some details and optimizations in it.

The search function is very common and can be used in many places. I hope I can share useful things with you. At the same time, if there are any deficiencies, I hope you guys can point them out and give some suggestions for modifications. Xiaomi Thank you very much!

We also need to use the API interface in the real-time search function, from inputting values ????in the input box to search suggestions, then to search results, and finally to jumping to song playback. It is no longer as simple as picking up. Passing values ????is critical. , at the same time, the hiding and display of different container boxes under different functions, as well as some details and optimization involved in search. Let’s take a look!

Interface preview

Interface analysis

In the head search bar: left return arrow, middle input box , the singer ranking page on the right jumps; as for the clear button, we hide it and it will only appear after entering the input value.

When going down the history record, like each search record value here is a small piece of equidistant distribution, the search value is as long as the length of this small piece, here it is used What you get is display: flex;flex-wrap: wrap;. Friends who are interested in this interface style can take a look at the entire code later.

Next is the hot search list. There is not much emphasis here. Just initiate an interface to request data, bury the data and display it.

The search suggestions will appear after the input is completed, and they are very three-dimensional and cover the entire page. Use box-shadow: 1px 1px 5px #888888 to achieve a three-dimensional effect.z-index has the effect of coverage.

The search results will appear after you click on one of the search suggestions or click on the search history or hot search. At the same time, all other containers on the interface will be hidden. This is actually the hiding and appearance of a container box. It’s a small detail, we will talk about it in detail later in the function. Here we first talk about how to hide and display components (containers), so as to avoid seeing these contents in the following functions.

Header display of several containers

<!-- 點(diǎn)擊×可以清空正在輸入 -->
<image class="{{showClean ? &#39;header_view_hide&#39; : &#39;clean-pic&#39;}}" src="../../image/search_delete.png" bindtap="clearInput" />復(fù)制代碼

<!-- 搜索建議 -->
<view class="{{showSongResult ? &#39;search_suggest&#39; : &#39;header_view_hide&#39;}}">復(fù)制代碼

<!-- 搜索結(jié)果 -->
<view class="{{showSearchResult ? &#39;header_view_hide&#39; : &#39;search_result_songs&#39;}}">復(fù)制代碼

<!-- 搜索歷史 -->
<view class="{{showView?&#39;option&#39;:&#39;header_view_hide&#39;}}">復(fù)制代碼

<!-- 熱搜榜 -->
<view class="{{showView?&#39;option&#39;:&#39;header_view_hide&#39;}}">復(fù)制代碼

Analysis: Only the contents of the headers of these containers are placed here. showClean, showSongResult, showSearchResult, showView are placed in the data data source respectively, which is true Then these containers default to the style before :(colon), if false, the default is the style after :(colon); header_view_hide The style is set to display: none;, that is, hidden and not displayed; so in a certain method, you can change showClean, showSongResult, showSearchResult, showView to true Or false can make these containers show or hide respectively.

Interface encapsulation

Interface encapsulation My friend has already explained it very clearly in the previous article. We will not explain it more here. The same functions used now are also It is not just as simple as just adjusting the interface to request data, we need to pass the value to the interface, and let the interface return the corresponding data to us after receiving the value; in the search interface, we use the interface for search suggestions and search results. For the hot search list, we only use the most basic wx.request to obtain data directly

api.js

const?API?=?{
????getSearchSuggest:?(data)?=>?request(GET,?`/search/suggest`,?data),??//?搜索建議接口
????getSearchResult:?(data)?=>?request(GET,?`/search`,?data),??//?搜索結(jié)果接口
}復(fù)制代碼

Real-time search function:

1. Data source analysis

There will be a lot of data that we design for a search function. We can list it in detail: input value inputValue, obtained during input; hot search Ranking data hots, obtained through hot search interface; search keyword searchKey, itself is the value of the input box, used to pass to search suggestions as search keywords; searchSuggest, the data (search suggestions) returned by the search suggestion interface after getting the search keywords; search results searchResult, when you click on one of the search suggestions, the value will be filled in the search box, and then search The keyword searchKey will be changed to this value and passed to the search result interface, and the returned data will be put into searchResult; finally, the search history history will be performed every time Search and put the value of the original input box into the history data source. Regarding other data sources, it involves component hiding and display, that is, under what circumstances is the container box of each piece hidden and under what circumstances is it displayed.

數(shù)據(jù)源展示

data:?{
????inputValue:?null,//輸入框輸入的值
????history:?[],?//搜索歷史存放數(shù)組
????searchSuggest:?[],?//搜索建議
????showView:?true,//組件的顯示與隱藏
????showSongResult:?true,
????searchResult:?[],//搜索結(jié)果
????searchKey:?[],
????showSearchResult:?true,
????showClean:?true,
????hots:?[]?//熱門搜索
?}復(fù)制代碼

2.獲取熱搜榜

這里我們直接在頁(yè)面的初始數(shù)據(jù)中調(diào)用接口，直接獲取到數(shù)據(jù)使用

onLoad:?function?(options)?{
????wx.request({
??????url:?'http://neteasecloudmusicapi.zhaoboy.com/search/hot/detail',
??????header:?{?"Content-Type":?"application/json"?},
??????success:?(res)?=>?{??//?console.log(res)
????????this.setData({
??????????hots:?res.data.result.hots?})
??????}
????})
??},復(fù)制代碼

3.獲取input文本

前面已將講過(guò)，搜索建議和結(jié)果的接口并沒(méi)有直接的獲取方式，需要我們進(jìn)行傳值，所以首先我們需要獲取到輸入框的值

input框內(nèi)容分析

<input focus=&#39;true&#39; type="text" class="weui-search-bar__input" placeholder="大家都在搜 " placeholder-style="color:#eaeaea" value=&#39;{{inputValue}}&#39; bindinput="getSearchKey" bindblur="routeSearchResPage" bindconfirm="searchOver" />復(fù)制代碼

小程序中關(guān)于input輸入框的相關(guān)屬性大家可以去詳細(xì)了解一下；placeholder為輸入框?yàn)榭諘r(shí)占位符，即還沒(méi)輸入前輸入框顯示的內(nèi)容，placeholder-style可以去設(shè)置placeholder的樣式；value是輸入框的初始內(nèi)容，即自己在輸入框輸入的內(nèi)容，我們?cè)谶@里直接將輸入的內(nèi)容value直接作為了data數(shù)據(jù)源中inputValue的內(nèi)容；bindinput是在鍵盤輸入時(shí)觸發(fā)，即我們一進(jìn)行打字，就能觸發(fā)我們的自定義事件getSearchKey,并且會(huì)返還相應(yīng)數(shù)據(jù)；bindblur在輸入框失去焦點(diǎn)時(shí)觸發(fā)，進(jìn)行搜索功能時(shí)，需要在搜索框輸值，此時(shí)焦點(diǎn)一直在輸入框，當(dāng)點(diǎn)擊輸入框以外的地方即輸入框失去焦點(diǎn)，同時(shí)觸發(fā)routeSearchResPage事件，還會(huì)返回相應(yīng)的數(shù)據(jù)，在下面功能中會(huì)講到；bindconfirm在點(diǎn)擊完成按鈕時(shí)觸發(fā)，這里綁定一個(gè)searchOver,用來(lái)隱藏組件(容器塊)，再次觸發(fā)搜索功能，在下面的功能中也會(huì)講到。

獲取input文本

getSearchKey:?function?(e)?{
????//?console.log(e.detail)?//打印出輸入框的值
????if?(e.detail.cursor?!=?this.data.cursor)?{?//實(shí)時(shí)獲取輸入框的值
??????this.setData({
????????showSongResult:?true,
????????searchKey:?e.detail.value?})
??????this.searchSuggest();
????}
????if?(e.detail.value)?{?//?當(dāng)input框有值時(shí)，才顯示清除按鈕'x'
??????this.setData({
????????showClean:?false??//?出現(xiàn)清除按鈕?})
????}
????if(e.detail.cursor?===?0){
??????this.setData({??//?當(dāng)輸入框沒(méi)有值時(shí)，即沒(méi)有輸入時(shí)，隱藏搜索建議界面，返回到最開(kāi)始的狀態(tài)
????????showSongResult:?false?})
??????return
????}
??}復(fù)制代碼

bindinput本身是會(huì)返回?cái)?shù)據(jù)，在代碼運(yùn)行時(shí)，可以打印出來(lái)先看看； e.detail.value即為輸入框的值，將它賦值給searchKey; 查看打印數(shù)據(jù)e:

解析：

疑惑的小伙伴可以將代碼運(yùn)行，打印出以上設(shè)計(jì)的幾個(gè)數(shù)據(jù)進(jìn)行分析

①當(dāng)此時(shí)輸入框的值和bindinput返回的輸入框的值時(shí)一樣的，就將輸入框的值賦給搜索關(guān)鍵詞searchKey，此時(shí)顯示搜索建議欄(showSongResult寫在wxml當(dāng)中，用來(lái)控制該容器是否展示，可以看到最后面發(fā)的整個(gè)界面的wxml中的詳情)；同時(shí)searchSuggest事件(方法)生效。

②當(dāng)輸入框沒(méi)值時(shí)，清除按鈕x是不會(huì)顯示的，只有當(dāng)輸入框有值是才會(huì)出現(xiàn)清除按鈕x

③當(dāng)輸入框沒(méi)有值時(shí)，隱藏搜索建議欄，其實(shí)本身我們最開(kāi)始進(jìn)入這個(gè)頁(yè)面時(shí)，輸入框是沒(méi)值的，搜索建議欄也是不展示的，為沒(méi)進(jìn)行輸入就沒(méi)有數(shù)據(jù)；但是當(dāng)我們輸入內(nèi)容后，出現(xiàn)搜索建議，此時(shí)我們點(diǎn)擊清除按鈕，輸入框的內(nèi)容沒(méi)了，但是搜索建議還停留在之前的狀態(tài)，所以這里我們優(yōu)化一下，讓showSongResult為false,即一清空輸入框內(nèi)容，隱藏掉搜索建議欄。另外我們?yōu)槭裁匆?code>return呢？這里還有一個(gè)bug,當(dāng)清除輸入框內(nèi)容后，再輸入發(fā)現(xiàn)已經(jīng)不再具備搜索功能了，所以需要return回到初始的狀態(tài)，就能重新進(jìn)行輸入并且搜索。同時(shí)當(dāng)輸入框?yàn)榭諘r(shí)進(jìn)行搜索功能還會(huì)報(bào)錯(cuò)，這也是一個(gè)bug,所以有了return即使空值搜索也會(huì)立馬回到初始狀態(tài)，解決了空值搜索報(bào)錯(cuò)的bug。

4.搜索框其他功能

• 清空輸入框內(nèi)容

  ?clearInput:?function?(e)?{
  ????//?console.log(e)??
  ????this.setData({
  ??????inputValue:?'',??//?將輸入框的值為空
  ??????showSongResult:?false,??//?隱藏搜索建議欄
  ??????showClean:?true?//?隱藏清除按鈕?(不加此項(xiàng)會(huì)出現(xiàn)清除輸入框內(nèi)容后清除按鈕不消失的bug)
  ????})
  ??},復(fù)制代碼

  點(diǎn)擊清除按鈕，就讓inputValue值為空，即輸入框的內(nèi)容為空，達(dá)到清除文本的效果；在獲取輸入框文本那里我們也提到了清除按鈕,也提到輸入框文本清空時(shí)，之前的搜索建議欄還會(huì)留下，所以這里我們讓showSongResult為false,使得搜索建議欄隱藏。清除文本的同時(shí)再隱藏掉清除按鈕。

• 取消搜索返回上頁(yè)

  back:?function?()?{
  ????wx:?wx.navigateBack({??//?關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面
  ??????delta:?0???//?返回的頁(yè)面數(shù)，如果?delta?大于現(xiàn)有頁(yè)面數(shù)，則返回到首頁(yè)
  ?????});
  ??}復(fù)制代碼

  這里用到的小程序自帶的返回頁(yè)面的功能，當(dāng)給delta值為0即回到上一個(gè)頁(yè)面。(可去文檔查看詳情)

• 跳轉(zhuǎn)歌手排行榜

  singerPage:?function?()?{
  ????wx.navigateTo({??//?保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到?tabbar?頁(yè)面
  ??????url:?`../singer/singer`?//?要跳轉(zhuǎn)去的界面
  ????})
  ??},復(fù)制代碼

  在微信官方文檔可以查看到navigateTo的功能及其屬性，這里不多講。

5.搜索建議

?searchSuggest()?{
????$api.?getSearchSuggest({?keywords:?this.data.searchKey,?type:?'mobile'?}).then(res?=>?{
??????//請(qǐng)求成功?
??????//?console.log(res);??//?打印出返回?cái)?shù)據(jù)進(jìn)行查看
??????if(res.statusCode?===?200){
????????this.setData({
??????????searchSuggest:?res.data.result.allMatch??//?將返回?cái)?shù)據(jù)里的歌名傳給搜索建議
????????})
???????}
????})
????.catch(err?=>?{??//?請(qǐng)求失敗
??????console.log('錯(cuò)誤')???})
??}復(fù)制代碼

解析：開(kāi)始我們將接口進(jìn)行了封裝，在上一篇講播放的文章中我的小伙伴已經(jīng)把接口跟封裝講的很仔細(xì)了，這里我們就不在講這個(gè)了，就分析我們的接口。searchKey作為搜索關(guān)鍵詞需要傳遞給接口，在前面的getSearchKey方法中，我們已經(jīng)講輸入框的內(nèi)容傳給了searchKey作為它的值；所以此時(shí)我們拿到有值的searchKey傳遞給接口，讓接口返回相關(guān)數(shù)據(jù)，返回的數(shù)據(jù)中的res.data.result.allMatch就是從搜索關(guān)鍵詞返回的搜索建議里的所有歌名，在將這些數(shù)據(jù)放到searchSuggest數(shù)據(jù)源中，這樣在wxml埋好的空就能拿到數(shù)據(jù)，將搜索建議欄顯示出。

6.搜索結(jié)果

• 搜索建議內(nèi)的歌曲點(diǎn)擊事件

  //?看看?wxml中的點(diǎn)擊事件展示
  //?<view wx:for="{{searchSuggest}}" wx:key="index" class=&#39;search_result&#39; data-value=&#39;{{item.keyword}} &#39; bindtap=&#39;fill_value&#39;>
  //?js如下：
  fill_value:?function?(e)?{???//?點(diǎn)擊搜索建議，熱門搜索值或搜索歷史，填入搜索框
  ????//?console.log(e.currentTarget.dataset.value)??//?打印`e`中的數(shù)據(jù)->點(diǎn)擊的值
  ????this.setData({
  ??????searchKey:?e.currentTarget.dataset.value,?//?點(diǎn)擊時(shí)把值給searchKey進(jìn)行搜索
  ??????inputValue:?e.currentTarget.dataset.value,?//?在輸入框顯示內(nèi)容
  ??????showSongResult:?false,?//?給false值，隱藏搜索建議頁(yè)面
  ??????showClean:?false?//?顯示清除按鈕?（不加此項(xiàng)，會(huì)出現(xiàn)點(diǎn)擊后輸入框有值但不顯示清除按鈕的bug）
  ????})
  ????this.searchResult();??//?執(zhí)行搜索功能
  ??},復(fù)制代碼

  解析：首先點(diǎn)擊事件可以攜帶額外信息，如 id, dataset, touches;返回參數(shù)event，event本身會(huì)有一個(gè)currentTarget屬性；這里解釋一下data-value='{{item.keyword}}=>data就是dataset;item.keyword是搜索建議完成之后返回的數(shù)據(jù)賦值給searchSuggest里面的某個(gè)數(shù)據(jù)；當(dāng)一點(diǎn)擊搜索建議里面的某一個(gè)歌名時(shí)，此歌名即為此時(shí)的item.keyword,并將該值存入點(diǎn)擊事件的參數(shù)event內(nèi)的dataset。大家也可操作一波打印出來(lái)看看結(jié)果，currentTarget.dataset.value就是我們點(diǎn)擊的那個(gè)歌曲名字。所以一點(diǎn)擊搜索建議中的某個(gè)歌名或者搜索歷史以及熱搜榜單中的某個(gè)歌名時(shí)，點(diǎn)擊事件生效，返回這樣該歌曲名稱，并將該值給到此時(shí)的searchKey和inputValue,此時(shí)輸入框的值會(huì)變成該值，搜索結(jié)果的關(guān)鍵詞的值也會(huì)變成該值；同時(shí)this.searchResult()可讓此時(shí)執(zhí)行搜索結(jié)果功能。showSongResult: false這里還將搜索建議欄給隱藏了。增加showClean: false是為了解決點(diǎn)擊后輸入框有值但不顯示清除按鈕的bug。 查看打印數(shù)據(jù)e:

  

• 返回搜索結(jié)果

  searchResult:?function?()?{
  ????//?console.log(this.data.searchKey)??//?打印此時(shí)的搜索關(guān)鍵詞
  ????$api.getSearchResult({?keywords:?this.data.searchKey,?type:?1,?limit:?100,?offset:?2?}).then(res?=>?{
  ??????//?請(qǐng)求成功
  ??????if?(res.statusCode?===?200)?{
  ????????//?console.log(res)??//?打印返回?cái)?shù)據(jù)
  ????????this.setData({
  ??????????searchResult:?res.data.result.songs,?//?將搜索出的歌曲名稱給到搜索結(jié)果
  ??????????showSearchResult:?false,?//?顯示搜索結(jié)果欄
  ??????????showView:?false,??//?隱藏搜索歷史欄和熱搜榜單欄
  ????????});
  ??????}
  ????})
  ????.catch(ree?=>?{
  ??????//請(qǐng)求失敗
  ????})
  ??},復(fù)制代碼

  解析：上面的歌曲名稱點(diǎn)擊同時(shí)觸發(fā)了搜索結(jié)果的功能，將點(diǎn)擊后的新的keywords傳遞給了搜索結(jié)果的接口，接口請(qǐng)求后返回給我們數(shù)據(jù)，數(shù)據(jù)中的res.data.result.songs為搜索到的歌曲，此時(shí)將它賦值給到searchResult,這樣搜索結(jié)果欄中會(huì)拿到數(shù)據(jù)，并且showSearchResult: false讓搜索結(jié)果欄顯示出來(lái)；這里還做了搜索歷史欄和熱搜欄的隱藏功能注：搜索結(jié)果和搜索建議都需要將搜索關(guān)鍵詞傳遞給接口，不清楚的小伙伴可以去查看接口文檔研究一下:https://binaryify.github.io/NeteaseCloudMusicApi/#/

• 搜索完成后的優(yōu)化

  ??searchOver:?function?()?{?//?搜索結(jié)果完成后(再次點(diǎn)擊輸入框)
  ???this.setData({
  ?????showSongResult:?false??//?搜索建議這塊容器消失
  ???})
  ???this.searchResult();??//?執(zhí)行搜索結(jié)果
  ?},復(fù)制代碼

  解析：前面我們講到過(guò)， searchOver是綁定在input框中的bindconfirm事件，即點(diǎn)擊完成按鈕時(shí)觸發(fā)。當(dāng)我們搜索完成之后，界面上還有搜索欄以及搜索結(jié)果的顯示，此時(shí)我們?cè)俅吸c(diǎn)擊輸入框，可以進(jìn)行清除文本，同時(shí)我們還需要增加一個(gè)功能，即在此種情況下，我們還可以進(jìn)行再次輸入并且返回搜索建議以及點(diǎn)擊搜索建議中的歌曲時(shí)再次執(zhí)行搜索結(jié)果功能。

7.搜索歷史

• input失去焦點(diǎn)

  routeSearchResPage:?function?(e)?{??
  ????//?console.log(this.data.searchKey)??//?打印此時(shí)的搜索關(guān)鍵詞
  ????//?console.log(this.data.searchKey.length)??
  ????if?(this.data.searchKey.length?>?0)?{??//?當(dāng)搜索框有值的情況下才把搜索值存放到歷史中，避免將空值存入歷史記錄
  ??????let?history?=?wx.getStorageSync("history")?||?[];??//?從本地緩存中同步獲取指定?key?對(duì)應(yīng)的內(nèi)容，key指定為history
  ??????//?console.log(history);
  ??????history?=?history.filter(item?=>?item?!==?this.data.searchKey)??//?歷史去重
  ??????history.unshift(this.data.searchKey)??//?排序傳入
  ??????wx.setStorageSync("history",?history);
  ????}
  ??}復(fù)制代碼

  解析：之前講過(guò)routeSearchResPage事件時(shí)放在input框中的，輸入框失去焦點(diǎn)時(shí)觸發(fā)，即不在輸入框內(nèi)進(jìn)行輸入，點(diǎn)擊輸入框以外的內(nèi)容時(shí)觸發(fā)。當(dāng)輸入完成時(shí)會(huì)出現(xiàn)搜索建議，此時(shí)焦點(diǎn)還在輸入框，當(dāng)我們點(diǎn)擊搜索建議中的某一天時(shí)，輸入框即失去焦點(diǎn)，此時(shí)該事件觸發(fā)。失去焦點(diǎn)函數(shù)是在搜索建議事件后發(fā)生，此時(shí)的搜索關(guān)鍵詞為搜索建議的搜索關(guān)鍵詞，前面也講到過(guò)，這個(gè)搜索關(guān)鍵詞就是我們?cè)谳斎肟蜉斎氲奈谋緝?nèi)容，所以將此時(shí)的搜索關(guān)鍵詞賦值給搜索歷史history。注：關(guān)于搜索歷史，我們這里增加了一個(gè)判斷，即當(dāng)搜索關(guān)鍵詞不為空時(shí)，才會(huì)拿到搜索關(guān)鍵詞給到搜索歷史里面，否則，每一次不輸入值也去點(diǎn)擊輸入框以外，會(huì)將一個(gè)空值傳給搜索歷史，導(dǎo)致搜索歷史中會(huì)有空值得顯示，這也是一個(gè)`bug得解決。同時(shí)還進(jìn)一步將代碼進(jìn)行優(yōu)化，用到filter達(dá)到歷史去重得效果，即判斷新拿到得搜索關(guān)鍵詞是否與已有得搜索歷史中的搜索關(guān)鍵詞相同，同則過(guò)濾掉先前的那個(gè)，并使用到unshift向數(shù)組開(kāi)頭增加這個(gè)作為新的歷史記錄。

• 歷史緩存

  onShow:?function?()?{??//每次顯示變動(dòng)就去獲取緩存，給history，并for出來(lái)。
  ??//?console.log('a')
  ??this.setData({
  ????history:?wx.getStorageSync("history")?||?[]
  ??})
  }復(fù)制代碼

  解析：雖然上一步將拿到的搜索記錄存入到了搜索歷史，但是還不能顯示出來(lái)，讓數(shù)據(jù)源拿到數(shù)據(jù)，這里要做一個(gè)歷史緩存的操作。onShow為監(jiān)聽(tīng)頁(yè)面顯示，每次在搜素建議功能后進(jìn)行點(diǎn)擊歌名出現(xiàn)搜索結(jié)果欄時(shí)觸發(fā)，此時(shí)將上一步拿到的history用getStorageSync進(jìn)行本地緩存，使得在刷新或者跳轉(zhuǎn)時(shí)，不會(huì)講搜索歷史丟失，一直保存下來(lái)。

• 刪除歷史

  clearHistory:?function?()?{??//?清空page對(duì)象data的history數(shù)組?重置緩存為[]（空）
  ????const?that?=?this;
  ????wx.showModal({
  ??????content:?'確認(rèn)清空全部歷史記錄',
  ??????cancelColor:?'#DE655C',
  ??????confirmColor:?'#DE655C',
  ??????success(res)?{
  ????????if?(res.confirm)?{?//?點(diǎn)擊確認(rèn)
  ??????????that.setData({
  ????????????history:?[]
  ??????????})
  ??????????wx.setStorageSync("history",?[])?//把空數(shù)組給history,即清空歷史記錄
  ????????}?else?if?(res.cancel)?{
  ????????}
  ??????}
  ????})
  ??}復(fù)制代碼

  解析：showModal() 方法用于顯示對(duì)話窗，當(dāng)點(diǎn)擊刪除按鈕時(shí)觸發(fā)，顯示出確認(rèn)清空全部歷史記錄的窗口，并有兩個(gè)點(diǎn)擊按鈕：確認(rèn)和取消；當(dāng)點(diǎn)擊確認(rèn)時(shí)，將history數(shù)組中的內(nèi)容重置為空，即達(dá)到清空搜索歷史中的數(shù)據(jù)的功能；同時(shí)也需要將此時(shí)沒(méi)有數(shù)據(jù)的的搜索歷史進(jìn)行緩存。點(diǎn)擊取消，提示窗消失，界面不會(huì)發(fā)生任何變化。

8.歌曲跳轉(zhuǎn)播放播放

• 傳值跳轉(zhuǎn)播放界面

  //?先來(lái)看看handlePlayAudio綁定的地方
  //?<view wx:for="{{searchResult}}" wx:key="index" class=&#39;search_result_song_item&#39; data-id="{{item.id}}" bindtap=&#39;handlePlayAudio&#39;>
  //?以下為js：
  handlePlayAudio:?function?(e)?{?//event?對(duì)象，自帶，點(diǎn)擊事件后觸發(fā)，event有type,target，timeStamp，currentTarget屬性
  ??//?console.log(e)???//?打印出返回參數(shù)內(nèi)容
  ??const?musicId?=?e.currentTarget.dataset.id;?//獲取到event里面的歌曲id賦值給musicId
  ??wx.navigateTo({???????????????????????//獲取到musicId帶著完整url后跳轉(zhuǎn)到play頁(yè)面
  ????url:?`../play/play?musicId=${musicId}`??//?跳轉(zhuǎn)到已經(jīng)傳值完成的歌曲播放界面
  ??})
  }復(fù)制代碼

  解析：handlePlayAudio綁定在每天搜索結(jié)果上，即點(diǎn)擊搜索建議后完成搜索結(jié)果功能顯示出搜索結(jié)果欄，點(diǎn)擊每一天搜索結(jié)果都可以觸發(fā)handlePlayAudio。前面也講到過(guò)bindtap是帶有參數(shù)返回，攜帶額外信息dataset,event本身會(huì)有一個(gè)currentTarget屬性,data-id="{{item.id}}"的作用跟上面的搜索建議內(nèi)的歌曲點(diǎn)擊事件是同樣的效果，item.id為執(zhí)行搜索結(jié)果時(shí)接口返回給searchResult的數(shù)據(jù)，也就是搜索結(jié)果中每首歌曲各自對(duì)應(yīng)的id。當(dāng)點(diǎn)擊搜索結(jié)果內(nèi)的某一首歌，即將這首歌的id傳給event中的dataset，數(shù)據(jù)名為dataset里的id。此時(shí)我們定義一個(gè)musicId，將event里面的歌曲id賦值給musicId,用 wx.navigateTo跳轉(zhuǎn)到播放界面，同時(shí)將musicId作為播放請(qǐng)求接口需要的傳入數(shù)據(jù)。 查看打印數(shù)據(jù)e:

  

9.search功能源碼分享

wxml

<nav-bar></nav-bar>
<view class="wrapper">
????<!-- 上部整個(gè)搜索框 -->
????<view class="weui-search-bar">
????????<!-- 返回箭頭按鈕 -->
????????<view class="weui-search-bar__cancel-btn" bindtap="back">
????????????<image class="return-pic" src="../../image/search_return.png" bindtap="cancel" />
????????</view>
????????<!-- 搜索欄 -->
????????<view class="weui-search-bar__form">
????????????<view class="weui-search-bar__box">
????????????????<input focus=&#39;true&#39; type="text" class="weui-search-bar__input" placeholder="大家都在搜 " placeholder-style="color:#eaeaea" value=&#39;{{inputValue}}&#39; bindinput="getSearchKey" bindblur="routeSearchResPage" bindconfirm="searchOver" />
????????????</view>
????????????<!-- 點(diǎn)擊×可以清空正在輸入 -->
????????????<view class="clean-bar">
????????????????<image class="{{showClean ? &#39;header_view_hide&#39; : &#39;clean-pic&#39;}}" src="../../image/search_delete.png" bindtap="clearInput" />
????????????</view>
????????</view>
????????<!-- 跳轉(zhuǎn)歌手分類界面 -->
????????<view class="songer">
????????????<image class="songer-pic" src="../../image/search_songner.png" bindtap="singerPage" />
????????</view>
????</view>
????<!-- 搜索建議 -->
????<view class="{{showSongResult ? &#39;search_suggest&#39; : &#39;header_view_hide&#39;}}">
????????<view wx:for="{{searchSuggest}}" wx:key="index" class=&#39;search_result&#39; data-value=&#39;{{item.keyword}} &#39; bindtap=&#39;fill_value&#39;>
????????????<image class="search-pic" src="../../image/search_search.png"></image>
????????????<view class="search_suggest_name">{{item.keyword}}</view>
????????</view>
????</view>
????<!-- 搜索結(jié)果 -->
????<view class="{{showSearchResult ? &#39;header_view_hide&#39; : &#39;search_result_songs&#39;}}">
????????<view class="search-title">
????????????<text class="songTitle">單曲</text>
????????????<view class="openBox">
????????????????<image class="openTap" src="../../image/search_openTap.png" />
????????????????<text class="openDes">播放全部</text>
????????????</view>
????????</view>
????????<view wx:for="{{searchResult}}" wx:key="index" class=&#39;search_result_song_item&#39; data-id="{{item.id}}" bindtap=&#39;handlePlayAudio&#39;>
????????????<view class=&#39;search_result_song_song_name&#39;>{{item.name}}</view>
????????????<view class=&#39;search_result_song_song_art-album&#39;>
????????????????{{item.artists[0].name}}?-?{{item.album.name}}
????????????</view>
????????????<image class="broadcast" src="../../image/search_nav-open.png" />
????????????<image class="navigation" src="../../image/mine_lan.png" />
????????</view>
????</view>
????<!-- 搜索歷史 -->
????<view class="{{showView?&#39;option&#39;:&#39;header_view_hide&#39;}}">
????????<view class="history">
????????????<view class="history-wrapper">
????????????????<text class="history-name">歷史記錄</text>
????????????????<image bindtap="clearHistory" class="history-delete" src="../../image/search_del.png" />
????????????</view>
????????????<view class="allhistory">
????????????????<view class="allhistorybox" wx:for="{{history}}" wx:key="index" data-value=&#39;{{item}}&#39; data-index="{{index}}" bindtap="fill_value">
????????????????????<text class="historyname">{{item}}</text>
????????????????</view>
????????????</view>
????????</view>
????</view>
????<!-- 熱搜榜 -->
????<view class="{{showView?&#39;option&#39;:&#39;header_view_hide&#39;}}">
????????<view class="ranking">
????????????<text class="ranking-name">熱搜榜</text>
????????</view>
????????<view class="rankingList">
????????????<view class="rankingList-box" wx:for="{{hots}}" wx:key="index">
????????????????<view wx:if="{{index <= 2}}">
????????????????????<text class="rankingList-num" style="color:red">{{index+1}}</text>
????????????????????<view class="song">
????????????????????????<text class="rankigList-songname" style="color:black;font-weight:600" data-value="{{item.first}}" bindtap=&#39;fill_value&#39;>
????????????????????????????{{item.first}}
????????????????????????</text>
????????????????????????<block wx:for="{{detail}}" wx:key="index">
????????????????????????????<text class="rankigList-hotsong" style="color:red">{{item.hot}}</text>
????????????????????????</block>
????????????????????</view>
????????????????</view>
????????????????<view wx:if="{{index >?2}}">
????????????????????<text class="rankingList-num">{{index+1}}</text>
????????????????????<view class="othersong">
????????????????????????<text class="rankigList-songname" data-value="{{item.first}}" bindtap=&#39;fill_value&#39;>
????????????????????????????{{item.first}}
????????????????????????</text>
????????????????????</view>
????????????????</view>
????????????</view>
????????</view>
????</view>
</view>復(fù)制代碼

wxss

??/*?pages/search/search.wxss?*/
.weui-search-bar{
????position:relative;
????/*?padding:8px;?*/
????display:flex;
????box-sizing:border-box;
????/*?background-color:#EDEDED;?*/
????-webkit-text-size-adjust:100%;
????align-items:center
}
.weui-icon-search{
????margin-right:8px;font-size:14px;vertical-align:top;margin-top:.64em;
????height:1em;line-height:1em
}
.weui-icon-search_in-box{
????position:absolute;left:12px;top:50%;margin-top:-8px
}
.weui-search-bar__text{
????display:inline-block;font-size:14px;vertical-align:top
}
.weui-search-bar__form{
????position:relative;
????/*?flex:auto;
????border-radius:4px;
????background:#FFFFFF?*/
????border-bottom:?1px?solid?#000;
????margin-left:?30rpx;
????width:?400rpx;
????padding-right:?80rpx;
}
.weui-search-bar__box{
????position:relative;
????padding-right:?80rpx;
????box-sizing:border-box;
????z-index:1;
}
.weui-search-bar__input{
????height:32px;line-height:32px;font-size:14px;caret-color:#07C160
}
.weui-icon-clear{
????position:absolute;top:0;right:0;bottom:0;padding:0?12px;font-size:0
}
.weui-icon-clear:after{
????content:"";height:100%;vertical-align:middle;display:inline-block;width:0;overflow:hidden
}
.weui-search-bar__label{
????position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:4px;
????text-align:center;color:rgba(0,0,0,0.5);background:#FFFFFF;line-height:32px
}
.weui-search-bar__cancel-btn{
????margin-left:8px;line-height:32px;color:#576B95;white-space:nowrap
}
.clean-bar?{
????/*?width:?20rpx;
????height:?20rpx;?*/
}
.clean-pic?{
????width:?20rpx;
????height:?20rpx;
????float:?right;
????position:?absolute;
?????margin-top:?-30rpx;?
?????margin-left:?450rpx;
}
.return-pic?{
????width:?60rpx;
????height:?60rpx;
????margin-left:?20rpx;
}
.songer-pic{
????width:?60rpx;
????height:?60rpx;
????margin-left:?40rpx;
}
.wrapper?{
????width:?100%;
????height:?100%;
????position:?relative;
????z-index:?1;
}
.poster?{
????width:?670rpx;
????height:?100rpx;
????margin-top:?40rpx;
????margin-left:?40rpx;
}
.postername?{
????font-size:?15rpx;
????position:?absolute;
????margin-top:?10rpx;
????margin-left:?10rpx;
}
.poster-outside?{
????border-radius:?10rpx;
????background-color:?slategrey;
}
.poster-pic0?{
????width:?80rpx;
????height:?80rpx;
????margin-top:?10rpx;
}
.test-title?{
????position:?absolute;
????font-size:?30rpx;
????line-height:?100rpx;
????margin-left:?20rpx;
????color:?red;
}
.test-age?{
????position:?absolute;
????font-size:?30rpx;
????line-height:?100rpx;
????margin-left:?80rpx;
}
.test-red?{
????position:?absolute;
????font-size:?30rpx;
????line-height:?100rpx;
????margin-left:?270rpx;
????color:?red;
}
.test-black?{
????position:?absolute;
????font-size:?30rpx;
????line-height:?100rpx;
????margin-left:?400rpx;
}
.poster-pic1?{
????width:?80rpx;
????height:?80rpx;
????margin-left:?510rpx;
}
.history?{
????margin:?50rpx?0?0?40rpx;
}
.history-name?{
????font-size:?28rpx;
????font-weight:?550;
}
.history-delete?{
????width:?50rpx;
????height:?50rpx;
????position:?absolute;
????margin-left:?510rpx;
}
.allhistory?{
????display:?flex;
????flex-wrap:?wrap;
}
.allhistorybox?{
????margin:?30rpx?20rpx?0?0;
????background-color:?dimgray;
????border-radius:?10rpx;
}
.historyname?{
????font-size:?28rpx;
????margin:?20rpx?20rpx?20rpx?20rpx;
}
.ranking?{
????margin-left:?40rpx;
????margin-top:?100rpx;
}
.ranking-name?{
????font-size:?28rpx;
????color:?black;
????font-weight:?550;
}
.rankingList?{
????margin-left:?50rpx;
????margin-top:?30rpx;
}
.rankingList-box?{
????width:?100%;
????height:?80rpx;
????margin:?0?0?30rpx?0;
}
.rankingList-num?{
????line-height:?80rpx;
????align-content:?center;
}
.song?{
????margin:?-100rpx?0?0?30rpx;
????display:?flex;
????flex-wrap:?wrap;
}
.othersong?{
????margin-top:?-100rpx;
????margin-left:?70rpx;
}
.rankigList-songname?{
????font-size:?30rpx;
????margin-left:?40rpx;
}
.rankigList-hotsong?{
????font-size:?25rpx;
????font-weight:?550;
????margin-top:?45rpx;
????margin-left:?20rpx;
}
.rankigList-hotnum?{
????float:?right;
????position:?absolute;
????line-height:?80rpx;
????margin-left:?600rpx;
????font-size:?20rpx;
????color:?darkgrey;
}
.rankingList-songdes?{
????font-size:?22rpx;
????color:?darkgrey;
????position:?absolute;
????margin-left:?60rpx;
????margin-top:?-30rpx;
}
.search_suggest{
????width:570rpx;
????margin-left:?40rpx;
????position:?absolute;
????z-index:?2;
????background:?#fff;
????box-shadow:?1px?1px?5px?#888888;
????margin-top:?20rpx;
}
.header_view_hide{
????display:?none;
??}
.search-pic?{
??????width:?50rpx;
??????height:?50rpx;
?????margin-top:?25rpx;
?????margin-left:?20rpx;
}
.search-title?{
????color:?#000;
????margin-left:?15rpx;
????margin-bottom:?30rpx;
}
.songTitle?{
????font-size:?30rpx;
????font-weight:?700;
}
.openBox?{
????float:?right;
????border-radius:?30rpx;
????margin-right:?30rpx;
????border-radius:?30rpx;
????border-bottom:?1px?solid?#eaeaea;
}
.openTap?{
????width:?30rpx;
????height:?30rpx;
????position:?absolute;
????margin:?6rpx?10rpx?0rpx?20rpx;
}
.openDes?{
????font-size:?25rpx;
????color:?rgba(0,0,0,0.5);
????margin-right:?20rpx;
????margin-left:?58rpx;
}
.broadcast?{
????width:?20px;
????height:?20px;
????display:?inline-block;
????overflow:?hidden;
????float:?right;
????margin-top:?-70rpx;
????margin-left:?-120rpx;
????margin-right:?80rpx;
}
.navigation?{
????width:?20px;
????height:?20px;
????display:?inline-block;
????overflow:?hidden;
????float:?right;
????margin-top:?-70rpx;
????margin-right:?20rpx;
}
??.search_result{
????/*?display:?block;
????font-size:?14px;
????color:?#000000;
????padding:?15rpx;
????margin:?15rpx;?*/
????/*?border-bottom:?1px?solid?#eaeaea;?*/
????/*?float:?right;?*/
????/*?margin-left:?-450rpx;?*/
????width:?570rpx;????
????height:?100rpx;
????border-bottom:?1px?solid?#eaeaea;
??}
??.search_suggest_name?{
????display:?block;
????float:?right;
????position:?absolute;
????margin-left:?85rpx;
????margin-top:?-46rpx;
????font-size:?14px;
????color:?darkgrey;
????/*?padding:?15rpx;
????margin:?15rpx;?*/
??}
??.search_result_songs{
????margin-top:?10rpx;
????width:?100%;
????height:?100%;
????margin-left:?15rpx;
??}
??.search_result_song_item{
?????display:?block;
?????margin:?15rpx;
?????border-bottom:?1px?solid?#EDEEF0;
??}
??.search_result_song_song_name{
????font-size:?15px;
????color:?#000000;
????margin-bottom:?15rpx;
??}
??.search_result_song_song_art-album{
????font-size:?11px;
????color:?#000000;
????font-weight:lighter;
????margin-bottom:?5rpx;
??}復(fù)制代碼

js

//?pages/search/search.js
//?const?API?=?require('../../utils/req')
const?$api?=?require('../../utils/api.js').API;
const?app?=?getApp();
Page({
??data:?{
????inputValue:?null,//輸入框輸入的值
????history:?[],?//搜索歷史存放數(shù)組
????searchSuggest:?[],?//搜索建議
????showView:?true,//組件的顯示與隱藏
????showSongResult:?true,
????searchResult:?[],//搜索結(jié)果
????searchKey:?[],
????showSearchResult:?true,
????showClean:?true,
????hots:?[],?//熱門搜索
????detail:?[
??????{
????????hot:?'HOT'
??????}
????],
??},
??onLoad:?function?(options)?{
????wx.request({
??????url:?'http://neteasecloudmusicapi.zhaoboy.com/search/hot/detail',
??????data:?{
??????},
??????header:?{
????????"Content-Type":?"application/json"
??????},
??????success:?(res)?=>?{
????????//?console.log(res)
????????this.setData({
??????????hots:?res.data.result.hots
????????})
??????}
????})
??},
??//?點(diǎn)x將輸入框的內(nèi)容清空
??clearInput:?function?(e)?{
????//?console.log(e)
????this.setData({
??????inputValue:?'',
??????showSongResult:?false,
??????showClean:?true?//?隱藏清除按鈕
????})
??},
??//實(shí)現(xiàn)直接返回返回上一頁(yè)的功能，退出搜索界面
??back:?function?()?{
????wx:?wx.navigateBack({
??????delta:?0
????});
??},
??//?跳轉(zhuǎn)到歌手排行界面
??singerPage:?function?()?{
????//?console.log('a')
????wx.navigateTo({
??????url:?`../singer/singer`
????})
??},
??//獲取input文本并且實(shí)時(shí)搜索
??getSearchKey:?function?(e)?{
????if(e.detail.cursor?===?0){
??????this.setData({
????????showSongResult:?false
??????})
??????return
????}
????//?console.log(e.detail)?//打印出輸入框的值
????if?(e.detail.cursor?!=?this.data.cursor)?{?//實(shí)時(shí)獲取輸入框的值
??????this.setData({
????????showSongResult:?true,
????????searchKey:?e.detail.value
??????})
??????this.searchSuggest();
????}
????if?(e.detail.value)?{?//?當(dāng)input框有值時(shí)，才顯示清除按鈕'x'
??????this.setData({
????????showClean:?false??//?出現(xiàn)清除按鈕
??????})
????}
??},
??//?搜索建議
??searchSuggest()?{
????$api.?getSearchSuggest({?keywords:?this.data.searchKey,?type:?'mobile'?}).then(res?=>?{
??????//請(qǐng)求成功?
??????//?console.log(res);
??????if(res.statusCode?===?200){
????????this.setData({
??????????searchSuggest:?res.data.result.allMatch?
????????})
???????}
????})
????.catch(err?=>?{
??????//請(qǐng)求失敗
??????console.log('錯(cuò)誤')
????})
??},
??//?搜索結(jié)果
??searchResult:?function?()?{
????//?console.log(this.data.searchKey)
????$api.getSearchResult({?keywords:?this.data.searchKey,?type:?1,?limit:?100,?offset:?2?}).then(res?=>?{
??????//?請(qǐng)求成功
??????if?(res.statusCode?===?200)?{
????????//?console.log(res)
????????this.setData({
??????????searchResult:?res.data.result.songs,
??????????showSearchResult:?false,
??????????showView:?false,
????????});
??????}
????})
????.catch(ree?=>?{
??????//請(qǐng)求失敗
????})
??},
??handlePlayAudio:?function?(e)?{?//event?對(duì)象，自帶，點(diǎn)擊事件后觸發(fā)，event有type,target，timeStamp，currentTarget屬性
????//?console.log(e)
????const?musicId?=?e.currentTarget.dataset.id;?//獲取到event里面的歌曲id賦值給musicId
????wx.navigateTo({?????????????????????????????????//獲取到musicId帶著完整url后跳轉(zhuǎn)到play頁(yè)面
??????url:?`../play/play?musicId=${musicId}`
????})
??},
??//?input失去焦點(diǎn)函數(shù)
??routeSearchResPage:?function?(e)?{
????//?console.log(e)
????//?console.log(e.detail.value)
????//?console.log(this.data.searchKey)
????//?console.log(this.data.searchKey.length)??
????if?(this.data.searchKey.length?>?0)?{??//?當(dāng)搜索框有值的情況下才把搜索值存放到歷史中，避免將空值存入歷史記錄
??????let?history?=?wx.getStorageSync("history")?||?[];
??????//?console.log(history);
??????history?=?history.filter(item?=>?item?!==?this.data.searchKey)??//?歷史去重
??????history.unshift(this.data.searchKey)
??????wx.setStorageSync("history",?history);
????}??
??},
??//?清空page對(duì)象data的history數(shù)組?重置緩存為[]（空）
??clearHistory:?function?()?{
????const?that?=?this;
????wx.showModal({
??????content:?'確認(rèn)清空全部歷史記錄',
??????cancelColor:?'#DE655C',
??????confirmColor:?'#DE655C',
??????success(res)?{
????????if?(res.confirm)?{
??????????that.setData({
????????????history:?[]
??????????})
??????????wx.setStorageSync("history",?[])?//把空數(shù)組給history,即清空歷史記錄
????????}?else?if?(res.cancel)?{
????????}
??????}
????})
??},
????//?搜索結(jié)果完成后(再次點(diǎn)擊輸入框)
??searchOver:?function?()?{
????this.searchSuggest();??//?執(zhí)行搜索結(jié)果
????this.searchResult()
??},
??//?點(diǎn)擊熱門搜索值或搜索歷史，填入搜索框
??fill_value:?function?(e)?{
????console.log(e)
????//?console.log(this.data.history)
????//?console.log(e.currentTarget.dataset.value)
????this.setData({
??????searchKey:?e.currentTarget.dataset.value,//點(diǎn)擊=把值給searchKey,讓他去搜索
??????inputValue:?e.currentTarget.dataset.value,//在輸入框顯示內(nèi)容
??????showSongResult:?false,?//給false值，隱藏搜索建議頁(yè)面
??????showClean:?false?//?顯示?清除按鈕
????})
????this.searchResult();?//執(zhí)行搜索功能
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
???*/
??//每次顯示變動(dòng)就去獲取緩存，給history，并for出來(lái)。
??onShow:?function?()?{
????//?console.log('a')
????this.setData({
??????history:?wx.getStorageSync("history")?||?[]
????})
??},
})復(fù)制代碼

api.js

const?app?=?getApp();
//?method(HTTP?請(qǐng)求方法)，網(wǎng)易云API提供get和post兩種請(qǐng)求方式
const?GET?=?'GET';
const?POST?=?'POST';
//?定義全局常量baseUrl用來(lái)存儲(chǔ)前綴
const?baseURL?=?'http://neteasecloudmusicapi.zhaoboy.com';
function?request(method,?url,?data)?{
??return?new?Promise(function?(resolve,?reject)?{
????let?header?=?{
??????'content-type':?'application/json',
??????'cookie':?app.globalData.login_token
????};
????wx.request({
??????url:?baseURL?+?url,
??????method:?method,
??????data:?method?===?POST???JSON.stringify(data)?:?data,
??????header:?header,
??????success(res)?{
????????//請(qǐng)求成功
????????//判斷狀態(tài)碼---errCode狀態(tài)根據(jù)后端定義來(lái)判斷
????????if?(res.data.code?==?200)?{??//請(qǐng)求成功
??????????resolve(res);
????????}?else?{
??????????//其他異常
??????????reject('運(yùn)行時(shí)錯(cuò)誤,請(qǐng)稍后再試');
????????}
??????},
??????fail(err)?{
????????//請(qǐng)求失敗
????????reject(err)
??????}
????})
??})
}
const?API?=?{
??getSearchSuggest:?(data)?=>?request(GET,?`/search/suggest`,?data),??//?搜索建議接口
??getSearchResult:?(data)?=>?request(GET,?`/search`,?data),??//?搜索結(jié)果接口
};
module.exports?=?{
??API:?API
}復(fù)制代碼

總結(jié)

其實(shí)一點(diǎn)一點(diǎn)的捋清楚會(huì)發(fā)現(xiàn)也不是很難操作，首先思路要清晰，知道每一個(gè)功能是什么作用，同時(shí)在調(diào)試是時(shí)候去發(fā)現(xiàn)一些bug,再去對(duì)代碼進(jìn)行優(yōu)化。關(guān)于搜索這個(gè)功能用處廣泛，希望本次的分享能給大家?guī)?lái)一點(diǎn)用處。

相關(guān)學(xué)習(xí)推薦：微信公眾號(hào)開(kāi)發(fā)教程，javascript視頻教程

The above is the detailed content of In those years, the WeChat applet imitated the real-time search function of NetEase Cloud Music. For more information, please follow other related articles on the PHP Chinese website!