那些年微信小程序模仿网易云音乐关于实时搜索的功能（微信小程序网易云代码）。

前言前段时间小伙伴详细介绍了网易云音乐小程序的音乐播放功能。作为前端小白，他学习了一段时间，最近比较忙。他没有及时把实时搜索的内容写出来分享给大家（其实代码和功能之前都写得差不多了），所以今天我就把他自己在里面的一些细节和优化告诉大家。

搜索功能非常常见，可以在许多地方使用。希望能和大家分享一些有用的东西。同时希望大家指出不足之处，并给出修改建议。小白在这里很感激！

在实时搜索功能中，我们还需要使用API接口，从输入框到搜索建议，再到搜索结果，最后到跳转歌曲播放。连接并不简单，价值传递非常重要。同时，不同功能下不同容器框的隐藏和显示，以及搜索中涉及的一些细节和优化。我们来看看吧！

界面预览头部搜索栏中的界面分析:左侧返回箭头、中间输入框、右侧歌手排行榜页面跳转；至于清除按钮，我们将其隐藏，只有在输入输入值后才会显示。

向下的历史记录（如每次搜索的记录值）以相等的间隔分布在小块中。搜索值有多长，小块就有多长。显示:此处使用flexflex -wrap:wrap；对这种界面风格感兴趣的朋友可以稍后查看所有代码。

接下来，还有一个热搜榜。这里没有太大的压力。只需启动一个请求数据的界面，然后隐藏数据并显示出来。

搜索建议在输入完成后才会出现，并且以非常立体的方式覆盖在整个页面上。Box -shadow: 1px1p5px # 888888用于实现三维效果，z-索引用于覆盖效果。

只有当你点击其中一个搜索建议或点击搜索历史或热搜时，搜索结果才会出现，界面上的所有其他容器很快就会被隐藏。这实际上是容器盒隐藏和外观的一个小细节，我们将在后面的函数中详细讨论。在这里，让我们谈谈如何隐藏和显示组件（容器）以避免在下面的函数中看到这些内容。

接口封装接口封装在上一篇文章中已经讲得很清楚了，我们在这里不再解释。同样，现在使用的功能也不仅仅是从光接口请求数据那么简单。我们需要将值传递给接口，这样接口在收到值后就可以将相应的数据返回给我们。在搜索界面中，我们使用搜索建议和搜索结果的界面。我们暂时只使用最基本的wx.request直接获取数据。

取消搜索并返回上一页

back:function（）{ wx:wx . navigate back（{//关闭当前页面并返回上一页或多级页面delta: 0 //返回的页数，如果delta大于现有页数，则返回第一页}）；}复制代码。这里使用的小程序具有返回页面的功能。当delta值为0时，它将返回到上一页。（请参阅文档了解详细信息）

跳转歌手列表

singer page:function（）{ wx . navigate to（{//保留当前页面并跳转到应用程序中的页面。但是，您不能跳转到tabbar页面的url:`../singer/singer` //跳转到的界面}}。复制代码，可以在微信官方文档中看到navigateTo的功能和属性，这里就不多说了。

5.search suggestion（）{ $ API . getsearch suggestion（{ keywords:this . data . search key，type:‘mobile‘}）。then（RES =》{//请求成功//console . log（RES）；//打印返回的数据以供查看if（RES . status code = = = 200）{ this . setdata（{搜索建议:将返回数据中的歌曲名称res.data.result.allmatch//Pass到搜索建议}）。} }) .catch（err =》{//request failed console . log（‘error‘}）}复制代码分析:一开始，我们封装了接口。在上一篇关于广播的文章中，我的小朋友非常仔细地解释了接口和封装。我们在这里不谈论这个，所以我们将分析我们的接口。作为搜索关键字，searchKey需要传递给接口。在前面的getSearchKey方法中，我们已经说过输入框的内容作为其值传递给SearchKey。所以在这个时候，我们获取有价值的searchKey并将其传递给接口，这样接口就可以返回相关数据。返回数据中的res.data.result.allMatch是从搜索关键字返回的搜索建议中的所有歌曲名称。现在，我们将这些数据放入搜索建议数据源中，这样我们就可以获取wxml中隐藏的空白区域中的数据并显示搜索建议列。

6.搜索结果搜索建议中的歌曲click事件//查看wxml///JS中的click事件显示如下:Fill _ value:function（e）{//单击搜索建议、热门搜索值或搜索历史记录，填写搜索框//console . log（e . current target . dataset . value）//打印` e‘-》中的数据单击this.setdata的值（{ searchkey:e . current target . dataset . value，//单击时将值交给search key进行搜索。输入值:e.currenttarget.dataset.value，//在输入框中显示内容showsongcresult:false，//给一个false值，隐藏搜索建议页面showClean: false //并显示清除按钮（如果不添加此项，会出现输入框点击后有值但不显示清除按钮的bug）}）this . search result（）；//执行搜索功能}，并复制代码分析:首先，单击事件以携带附加信息，如id、数据集、触摸；返回参数event，事件本身会有一个currentTarget属性；在此说明data -value =‘{ { item。keyword}} =》数据是数据集；Item.keyword是搜索建议完成并分配给searchSuggest中的某些数据后返回的数据；当点击搜索建议中的歌曲名称时，此时该歌曲名称为item.keyword，该值存储在click事件的参数事件的数据集中。你也可以打印出来看看结果。currentTarget.dataset.value是我们单击的歌曲的名称。因此，当点击搜索建议或搜索历史中的歌曲名称和热搜榜中的歌曲名称时，click事件生效，并且返回歌曲名称，并且此时将值赋予searchKey和inputValue。此时输入框的值会变成这个值，搜索结果的关键字的值也会变成这个值；同时，this.searchResult（）允许搜索结果函数在此时执行。搜索建议栏也隐藏在这里。添加ShowClean: false是为了解决单击后输入框有值但不显示清除按钮的bug。查看打印数据e:

返回搜索结果:function（）{//console . log（this . data . search key）//打印搜索关键字$ API . getsearch result（{ keywords:this . data . search key，type: 1，limit: 100，Offset: 2 }）。然后（RES =》{//Request succeeded if（RES . status code = = 200）{//console . log（RES）//打印返回的数据this . setdata（{ search result:RES . data . result . songs，//将搜索到的歌曲名称赋予搜索结果showSearchResult: false，//显示搜索结果列showView: false，//隐藏搜索历史记录列和热搜榜列}）；} }) .catch（REE =》{//Request failed }）}，复制代码分析:点击上面的歌名同时触发搜索结果的功能，点击的新关键词传递给搜索结果的接口，接口请求后将数据返回给我们。数据中的Res.data.result.songs是搜索到的歌曲。此时将其分配给searchResult，这样将在搜索结果列中获取数据，showSearchResult: false使搜索结果列显示；这里还做了搜索历史列和热搜列的隐藏功能。注意:搜索结果和搜索建议都需要将搜索关键字传递给接口。不清楚的朋友可以查看界面文档并研究一下:https://binaryify.github.io/NeteaseCloudMusicApi/#/.

搜索完成后的优化search over:function（）{//搜索结果完成后（再次单击输入框）this . setdata（{ showsongcresult:false//搜索提示此容器消失}）this . search result（）；//执行搜索结果}，复制代码分析:前面我们提到过，searchOver是绑定在输入框中的bindconfirm事件，当单击finish按钮时会触发该事件。当我们的搜索完成后，将有一个搜索栏和搜索结果显示在界面上。此时，我们可以通过再次单击输入框来清除文本，并且我们还需要添加一个功能，即在这种情况下，我们可以在单击搜索建议中的歌曲时再次输入并返回搜索建议并再次执行搜索结果功能。

7.搜索历史输入失去焦点:function（e）{//console . log（this . data . search key）//打印此时的搜索关键字//console . log（this . data . search key . length）if（this . data . search key。length》0）{//只有当搜索框有值时，搜索值才会存储在历史中。避免在历史记录中存储空值let history = wx . getstoragesync（“history“）| | 9。搜索功能源代码分享以上就是微信小程序模仿网易云音乐当年实时搜索功能的详细内容。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 小程序中实现搜索功能的方法深度讲解（小程序中实现搜索功能的方法深度讲解是）
• Dedecms为网站增加搜索功能（dedecms使用教程）
• dedecms为网站增加搜索功能(dedecms建站操作)

本文由主机参考刊发，转载请注明：那些年微信小程序模仿网易云音乐关于实时搜索的功能（微信小程序网易云代码）。 https://zhujicankao.com/99625.html