那些年，微信小程序仿网易云音乐有关实时搜索功能

前言

前段时间我的小伙伴已经将网易云音乐小程序的音乐播放功能详细的介绍出来了，作为前端小白学习了一段时间，最近也比较忙，没有及时将实时搜索这块内容及时写出来跟大家分享（其实代码和功能之前就写的差不多了），那么今天就给大家讲一讲个人在里面的一些细节和优化吧。

搜索功能很常见，很多地方都能用到，希望能够给大家分享到有用的东西，同时，有不足的地方，也希望各位大佬指出，给出一些修改的意见，小白在此感谢了！

实时搜索功能里面我们也需要用到API接口，从input框输入值到搜索建议，再到搜索结果，最后到跳转歌曲播放，不再只是接那么简单，传值很关键，同时不同功能下不同容器框的隐藏与显示，还有一些搜索当中涉及的细节内容和优化。让我们一起来看看吧！

界面预览

界面分析

头部搜索栏中：左边返回箭头，中间输入框，右边歌手排行榜页面跳转;至于清除按钮呢我们隐藏了起来，只有在输入输入值之后才会出现。

往下时历史记录，像每个搜搜的记录值这里都是一小块一小块等隔距离分布，搜索值有多长，这小块就有多长，这里用到的是display: flex;flex-wrap: wrap;，对这个界面样式感兴趣的小伙伴可以待会看看全部代码。

接下来是热搜榜，这里没有太多讲究，就是发起接口请求数据，把数据埋进去显示出来就行了。

搜索建议会在输入结束后才会出现，并且是很立体的一块覆盖在整个页面上，用box-shadow: 1px 1px 5px #888888达到立体效果，z-index起到覆盖的效果。

搜索结果会在点击搜索建议中的某一条或者点击搜索历史或者热搜才出现，同时界面上其他所有的容器快都会隐藏起来，这里其实就是一个容器框的隐藏与出现的小细节了，待会在功能中我们会详细讲到。这里我们先讲一下组件(容器)如何进行隐藏与显示，以免下面的功能中看到这几项内容蒙圈

接口封装

接口封装在上一篇我的小伙伴已经讲的十分清晰了，我们这里不再多去讲解了，同样现在用到的功能也不只是光调接口请求数据那么简单了，我们需要传值给接口，让接口收到值后再给我们返回相应的数据;在搜索界面我们用到的是搜索建议以及搜索结果的接口。热搜榜我们暂时只使用最基础的wx.request直接获取数据

实时搜索功能：

1.数据源分析

一个搜索功能我们设计到的数据会有很多，可以细列一下：输入的值inputValue,在输入时获取；热搜榜数据hots,热搜接口获取；搜索关键词searchKey，本身就是输入框的值，用来传递给搜索建议作为搜索关键词；searchSuggest，搜索建议接口拿到搜索关键词后返回的的数据(搜索建议)；搜索结果searchResult，当点击搜索建议中的某一条，该值将填入搜索框，此时搜索关键词searchKey将变为该值又传递给搜索结果接口，并返回数据放入searchResult；最后是搜索历史history,每当进行一次搜索，将原本输入框的值放到history数据源中。关于其他数据源涉及到组件隐藏与展示，即每一块的容器框在何种情况下隐藏，何种情况下显示。

2.获取热搜榜

这里我们直接在页面的初始数据中调用接口，直接获取到数据使用

3.获取input文本

前面已将讲过，搜索建议和结果的接口并没有直接的获取方式，需要我们进行传值，所以首先我们需要获取到输入框的值

解析：

疑惑的小伙伴可以将代码运行，打印出以上设计的几个数据进行分析

①当此时输入框的值和bindinput返回的输入框的值时一样的，就将输入框的值赋给搜索关键词searchKey，此时显示搜索建议栏(showSongResult写在wxml当中，用来控制该容器是否展示，可以看到最后面发的整个界面的wxml中的详情)；同时searchSuggest事件(方法)生效。

②当输入框没值时，清除按钮x是不会显示的，只有当输入框有值是才会出现清除按钮x

③当输入框没有值时，隐藏搜索建议栏，其实本身我们最开始进入这个页面时，输入框是没值的，搜索建议栏也是不展示的，为没进行输入就没有数据；但是当我们输入内容后，出现搜索建议，此时我们点击清除按钮，输入框的内容没了，但是搜索建议还停留在之前的状态，所以这里我们优化一下，让showSongResult为false,即一清空输入框内容，隐藏掉搜索建议栏。另外我们为什么要return呢？这里还有一个bug,当清除输入框内容后，再输入发现已经不再具备搜索功能了，所以需要return回到初始的状态，就能重新进行输入并且搜索。同时当输入框为空时进行搜索功能还会报错，这也是一个bug,所以有了return即使空值搜索也会立马回到初始状态，解决了空值搜索报错的bug。

4.搜索框其他功能

• 清空输入框内容

• 取消搜索返回上页

• 跳转歌手排行榜

5.搜索建议

6.搜索结果

• 搜索建议内的歌曲点击事件
• 返回搜索结果
• 搜索完成后的优化

7.搜索历史

• input失去焦点
• 历史缓存
• 删除历史

8.歌曲跳转播放播放

• 传值跳转播放界面

9.search功能源码分享

总结

其实一点一点的捋清楚会发现也不是很难操作，首先思路要清晰，知道每一个功能是什么作用，同时在调试是时候去发现一些bug,再去对代码进行优化。关于搜索这个功能用处广泛，希望本次的分享能给大家带来一点用处。

以上就是那些年，微信小程序仿网易云音乐有关实时搜索功能的详细内容，更多请关注靠谱客其它相关文章！

最后

以上就是含糊冬瓜为你收集整理的那些年，微信小程序仿网易云音乐有关实时搜索功能的全部内容，希望文章能够帮你解决那些年，微信小程序仿网易云音乐有关实时搜索功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。