成人免费视频一区二区三区,第四色777米奇影院,99国产精品99久久久久久

前言

界面預(yù)覽

界面分析

接口封裝

實(shí)時(shí)搜索功能：

1.數(shù)據(jù)源分析

2.獲取熱搜榜

3.獲取input文本

4.搜索框其他功能

5.搜索建議

6.搜索結(jié)果

7.搜索歷史

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

9.search功能源碼分享

總結(jié)

首頁(yè)

微信小程序

小程序開(kāi)發(fā)

那些年，微信小程序仿網(wǎng)易云音樂(lè)有關(guān)實(shí)時(shí)搜索功能

coldplay.xixi

Sep 14, 2020 pm 01:18 PM

微信小程序搜索功能

相關(guān)學(xué)習(xí)推薦：微信小程序教程

前言

前段時(shí)間我的小伙伴已經(jīng)將網(wǎng)易云音樂(lè)小程序的音樂(lè)播放功能詳細(xì)的介紹出來(lái)了，作為前端小白學(xué)習(xí)了一段時(shí)間，最近也比較忙，沒(méi)有及時(shí)將實(shí)時(shí)搜索這塊內(nèi)容及時(shí)寫出來(lái)跟大家分享（其實(shí)代碼和功能之前就寫的差不多了），那么今天就給大家講一講個(gè)人在里面的一些細(xì)節(jié)和優(yōu)化吧。

搜索功能很常見(jiàn)，很多地方都能用到，希望能夠給大家分享到有用的東西，同時(shí)，有不足的地方，也希望各位大佬指出，給出一些修改的意見(jiàn)，小白在此感謝了！

實(shí)時(shí)搜索功能里面我們也需要用到API接口，從input框輸入值到搜索建議，再到搜索結(jié)果，最后到跳轉(zhuǎn)歌曲播放，不再只是接那么簡(jiǎn)單，傳值很關(guān)鍵，同時(shí)不同功能下不同容器框的隱藏與顯示，還有一些搜索當(dāng)中涉及的細(xì)節(jié)內(nèi)容和優(yōu)化。讓我們一起來(lái)看看吧！

界面預(yù)覽

那些年，微信小程序仿網(wǎng)易云音樂(lè)有關(guān)實(shí)時(shí)搜索功能

界面分析

頭部搜索欄中：左邊返回箭頭，中間輸入框，右邊歌手排行榜頁(yè)面跳轉(zhuǎn);至于清除按鈕呢我們隱藏了起來(lái)，只有在輸入輸入值之后才會(huì)出現(xiàn)。

往下時(shí)歷史記錄，像每個(gè)搜搜的記錄值這里都是一小塊一小塊等隔距離分布，搜索值有多長(zhǎng)，這小塊就有多長(zhǎng)，這里用到的是display: flex;flex-wrap: wrap;，對(duì)這個(gè)界面樣式感興趣的小伙伴可以待會(huì)看看全部代碼。

接下來(lái)是熱搜榜，這里沒(méi)有太多講究，就是發(fā)起接口請(qǐng)求數(shù)據(jù)，把數(shù)據(jù)埋進(jìn)去顯示出來(lái)就行了。

搜索建議會(huì)在輸入結(jié)束后才會(huì)出現(xiàn)，并且是很立體的一塊覆蓋在整個(gè)頁(yè)面上，用box-shadow: 1px 1px 5px #888888達(dá)到立體效果，z-index起到覆蓋的效果。

搜索結(jié)果會(huì)在點(diǎn)擊搜索建議中的某一條或者點(diǎn)擊搜索歷史或者熱搜才出現(xiàn)，同時(shí)界面上其他所有的容器快都會(huì)隱藏起來(lái)，這里其實(shí)就是一個(gè)容器框的隱藏與出現(xiàn)的小細(xì)節(jié)了，待會(huì)在功能中我們會(huì)詳細(xì)講到。這里我們先講一下組件(容器)如何進(jìn)行隱藏與顯示，以免下面的功能中看到這幾項(xiàng)內(nèi)容蒙圈

幾個(gè)容器的頭部展示

<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ù)制代碼

<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ù)制代碼
解析：這里只放了這幾塊容器的頭部的內(nèi)容，在data數(shù)據(jù)源中分別放了showClean,showSongResult,showSearchResult,showView, 為true 則這幾塊容器默認(rèn)為:(冒號(hào))前面的樣式,為false則默認(rèn)為:(冒號(hào))后面的樣式；header_view_hide樣式設(shè)置為display: none;,即隱藏不顯示；所以當(dāng)在某一個(gè)方法中可以去改變showClean,showSongResult,showSearchResult,showView為true還是false可以讓這幾塊容器分別為顯示或是隱藏。

接口封裝

接口封裝在上一篇我的小伙伴已經(jīng)講的十分清晰了，我們這里不再多去講解了，同樣現(xiàn)在用到的功能也不只是光調(diào)接口請(qǐng)求數(shù)據(jù)那么簡(jiǎn)單了，我們需要傳值給接口，讓接口收到值后再給我們返回相應(yīng)的數(shù)據(jù);在搜索界面我們用到的是搜索建議以及搜索結(jié)果的接口。熱搜榜我們暫時(shí)只使用最基礎(chǔ)的wx.request直接獲取數(shù)據(jù)

api.js

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

實(shí)時(shí)搜索功能：

1.數(shù)據(jù)源分析

一個(gè)搜索功能我們?cè)O(shè)計(jì)到的數(shù)據(jù)會(huì)有很多，可以細(xì)列一下：輸入的值inputValue,在輸入時(shí)獲取；熱搜榜數(shù)據(jù)hots,熱搜接口獲取；搜索關(guān)鍵詞searchKey，本身就是輸入框的值，用來(lái)傳遞給搜索建議作為搜索關(guān)鍵詞；searchSuggest，搜索建議接口拿到搜索關(guān)鍵詞后返回的的數(shù)據(jù)(搜索建議)；搜索結(jié)果searchResult，當(dāng)點(diǎn)擊搜索建議中的某一條，該值將填入搜索框，此時(shí)搜索關(guān)鍵詞searchKey將變?yōu)樵撝涤謧鬟f給搜索結(jié)果接口，并返回?cái)?shù)據(jù)放入searchResult；最后是搜索歷史history,每當(dāng)進(jìn)行一次搜索，將原本輸入框的值放到history數(shù)據(jù)源中。關(guān)于其他數(shù)據(jù)源涉及到組件隱藏與展示，即每一塊的容器框在何種情況下隱藏，何種情況下顯示。

數(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的功能及其屬性，這里不多講。