当时微信小程序模仿了网易云音乐的实时搜索功能（微信小程序歌曲播放列表）。

简介

前段时间，有朋友详细介绍了网易云音乐小程序的音乐播放功能。 作为一个前端新手，我已经学习了一段时间了。 最近比较忙，没能及时更新实时搜索内容。 这是我写的和大家分享的（其实大部分代码和函数都是之前写的）。 今天，我想分享一下我们所做的一些细节和优化。

搜索功能非常常见，可以在很多地方使用。 我希望我能和你分享一些有用的东西。 同时，如果您发现任何不足之处，请您指出并提出修改建议，我们将不胜感激。 感谢小白！

实时搜索功能也是使用API​​接口，从在输入框中输入值，到跳转到搜索建议、搜索结果，最后播放歌曲。有需要。 。 它不再只是接收价值。 关键在于不同功能中不同容器盒的隐藏和显示，以及与搜索相关的细节和优化。 我们来看看吧！

界面预览界面分析

头部搜索栏：左侧有后退箭头，中间有输入框，右侧有歌手排行榜页面跳转。 至于清除按钮，它会被隐藏，只有输入输入值后才会出现。 出现。

在遍历历史记录时，这里的每个搜索记录值都是等距分布的一小部分，使得搜索值与这小部分的长度相同。 这里使用的是display:flex。 ;flex-wrap:wrap;. 对这种界面风格感兴趣的朋友可以稍后看一下整个代码。

接下来就是热搜榜了。 这里其实并没有强调。 只需启动一个请求数据的界面，嵌入并显示它。

输入完成后，搜索建议将会出现，并且非常 3D 并覆盖整个页面。 box-shadow: 1px 1px 5px #888888 用于创建三维效果，z-索引具有覆盖效果。

点击搜索建议、搜索历史或热搜之一即可查看搜索结果。 同时，界面上的所有其他容器都将被隐藏。 其实，这就是集装箱盒隐藏的样子。 稍后将在该函数中更详细地解释更精细的细节。 首先，我们将解释如何隐藏和显示组件（容器）。显示这些项目以避免在下一个功能中看到它们时造成混淆。

接口封装

接口封装在上一篇文章中已经有朋友解释得很清楚了，这里不再赘述。 同样，今天使用的功能并不像调整接口来请求数据那么简单。 您需要向接口传递一个值，并确保接口收到该值后返回相应的数据。 搜索界面使用搜索建议和搜索结果界面。 对于热搜榜，我们只使用最基本的wx.request来直接检索数据。

取消搜索并返回上一页。

back: function () { wx: wx.navigateBack( { // 关闭当前页面，返回上一页或多级页面。 delta: 0 // 返回的页面数，如果存在 delta } ); }复制代码

这里使用的小程序中返回页面的功能是如果delta值为0则返回上一页。 （详情见文档）

跳转到歌手排行榜

singerPage: function () { wx.navigateTo({ // 保持当前页面并跳转到该页面，但不能跳转到标签栏页面的URL：`../singer /singer` //想要跳转的界面 }) }，复制代码

微信官方文档中的navigateTo函数可以看到。属性，但这里没有太多解释。

5. 搜索建议 searchSuggest() { $api.getSearchSuggest({ Keyword: this.data.searchKey, type: 'mobile' }).then(res => { //请求成功 // console .log ( res); // 打印 检索返回的数据用于显示 if(res.statusCode === 200){ this.setData({ searchSuggest: res.data.result.allMatch // 将返回数据中的歌曲名称传递给搜索建议 }) } }) .catch(err => { // 请求失败 console.log( 'error') } ) } 复制代码

分析：首先我们封装了接口。 在上一篇关于重放的文章中，我的朋友已经非常仔细地谈论了接口和封装。 我们在这里不讨论这个。 分析接口。 searchKey 必须作为搜索关键字传递到接口。 在前面的getSearchKey方法中，我们将输入框的内容作为值传递给searchKey。 此时，我们检索出有价值的searchKey，并将其传递给接口，以便其返回相关数据。 返回的数据res.data.result.allMatch是搜索关键字返回的搜索建议中所有歌曲的标题。 将这些数据放入 searchSuggest 数据源中，我们可以从 wxml 中嵌入的空白空间中检索数据并显示搜索建议栏。

6.搜索结果歌曲点击事件搜索建议 // 我们看一下wxml中的点击事件显示 // // js如下： fill_value: function (e) { // 点击搜索建议,来自热门搜索或搜索历史的值，在搜索框中输入 // console.log(e.currentTarget.dataset.value) // `e`-> Value clicked 输出 this.setData({ searchKey: e.currentTarget.dataset. value, // 如果点击，则将值传递给searchKey进行搜索 inputValue: e.currentTarget.dataset.value, // 输入框 sh 中显示内容owSongResult: false, //指定 false 值隐藏搜索建议页面。 showClean: false //显示清除按钮（如果没有这个选项，会出现即使输入框有值也不显示清除按钮的bug） }) this.searchResult( ); // 运行搜索功能 } ，复制代码

分析：首先，点击事件应该传递额外的信息，如ID、数据集、触摸等，可以。 对于返回参数事件，事件本身具有 currentTarget 属性。 如此处所述 data-value='{{item.keyword}}=>data 是数据集。 item.keyword是搜索建议完成后返回的数据，分配给searchSuggest中的具体数据。 当单击建议的歌曲时，一旦命名，歌曲名称现在为 item.keyword，其值存储在单击事件的事件参数的数据集中。 您还可以打印并检查结果。 currentTarget.dataset.value 是您单击的歌曲的名称。 所以当你点击搜索建议中的歌曲标题，或者搜索历史或热搜列表中的歌曲标题时，会激活点击事件并返回歌曲名称，如下所示，此时 searchKey 和 inputValue 的值为： 给出。 。 这时输入框的值就会是这个值，搜索结果中关键字的值也会是这个值。 同时，this.searchResult()允许我们此时执行搜索结果函数。 showSongResult: false 这也将隐藏搜索建议栏。 添加 showClean: false 是为了解决输入框有值但单击时未显示清除按钮的错误。 显示打印数据 e:

返回搜索结果 searchResult: function () { // console.log(this.data.searchKey) // 此时输出搜索关键字$api.getSearchResult({ keywords: this.data.searchKey, type: 1, limit: 100, offset: 2 }).then(res => { // 请求成功 if (res.statusCode === 200) { / / console.log(res) // 输出返回的数据 this.setData({ searchResult: res.data.result.songs, // 将搜索到的歌曲名称添加到搜索结果中 showSearchResult: false, // 显示搜索结果栏 showView : false, //隐藏搜索历史栏和热搜列表栏 res.data 中请求数据后，点击后的新关键词会传递到搜索结果界面，此时如果给 searchResult ，则搜索到的歌曲。将在搜索结果栏中检索数据，并且搜索结果将显示为 showSearchResult:false。 这里是搜索历史栏和热搜索栏。 注意：如果您需要搜索，则需要搜索搜索结果和搜索建议。不确定，请查看接口文档：https://binaryify.github.io/NeteaseCloudMusicApi/#/

搜索完成后的优化 searchOver: function () { // 搜索结果完成（再次点击输入框）这个.setData({ showSongResult: false // 搜索建议容器消失 }) this.searchResult(); // 运行搜索结果 }, 复制代码

分析：如上所述，searchOver 已经绑定到输入框了。 当单击完成按钮时，将触发bindconfirm 事件。 搜索完成后，界面仍然显示搜索栏和搜索结果。 此时，再次单击输入框即可清除文本。 同时，我们还需要添加功能。 所以在这种情况下，如果您点击搜索建议中的歌曲，也可以再次按 Enter 键返回搜索建议并再次运行搜索结果功能。

7. 搜索历史输入失去焦点。 routeSearchResPage: function (e) { // console.log(this.data.searchKey) // 输出当前搜索关键字。 // console.log(this.data.searchKey) .length) if (this.data.searchKey.length > 0) { // 确保搜索框有值，避免历史记录中存储空值 保存搜索历史上的价值只有当。 让 History = wx.getStorageSync("history") || []; // 同步从本地缓存中取出指定key对应的内容，并指定key为History。 // console.log(history); History = History.filter(item => item !== this .data.searchKey) // 历史去重 History.unshift(this.data.searchKey) // 对接收到的内容进行排序 Change wx .setStorageSync("history",history); } } 复制代码

分析：前面说过，routeSearchResPage事件是放在输入框上的，这个事件在输入框失去焦点时触发，即点击输入框以外的地方时触发当你输入完后，点击特定日期查看搜索建议，搜索建议事件后输入框就失去焦点。此时的搜索关键词就变成了搜索关键词。搜索建议。此时的搜索关键词就是输入框中输入的文字内容，所以此时的搜索关键词就变成了搜索历史。 注：关于搜索历史，我们这里添加一个判断，如果搜索关键词不是。如果选择 ，则搜索关键字将被检索并添加到搜索历史记录中，而无需在框外输入任何值并每次单击 Enter ，都会将空值传递到搜索历史记录中。需要解决的问题是，代码进一步优化，达到了使用过滤器去重的效果：判断新检索的搜索关键词是否与已有搜索历史中的搜索关键词相同，并过滤掉之前的关键词。 . 并使用unshift将其添加到数组的开头作为新的历史记录

Cache onShow: function () { // 每次显示变化时获取缓存，将其传递给历史记录，并打印它。 . // console.log('a') this.setData({ History: wx .getStorageSync("history") || [] })} 复制代码

分析：上一步检索到的搜索记录是数据已存储在搜索历史中，但尚未显示，以便检索数据源。onShow 是监控页面和搜索结果栏的显示，一旦显示，每次点击歌曲都会触发。 title，此时上一步检索到的历史记录将使用 getStorageSync 缓存在本地，并且可以刷新或跳转到。您的搜索历史记录在传输过程中不会丢失，并且将始终保存。

删除历史记录clearHistory: function () { // 清除页面对象数据的历史记录数组将缓存重置为[]（空） const that = this; ',confirmColor: '#DE655C', success(res) { // 点击确认 setData({history: [] } ) wx.setStorageSync("history", [ ]) // 向历史记录传递一个空数组，即清除历史记录 else if (res.cancel) 会出现一个窗口，要求您确认清除所有历史记录。有两个点击按钮：确认和取消，点击确认会将历史数组的内容重置为空，这意味着。同时实现了清除搜索历史数据的功能，如果点击取消，提示窗口消失，界面保持不变。

8. at 绑定的handlePlayAudio。 // // 下面带有js：handlePlayAudio: function (e) { //event 对象，在click 事件、timeStamp 和currentTarget 属性之后触发。//console.log(e) //输出返回参数的内容 const musicId = e.currentTarget.dataset.id; //获取事件中的歌曲ID，并赋值给musicId。 wx.navigateTo({ URL url: `../play/play?musicId=${musicId}` // 进入歌曲播放界面后跳转到播放页面 })} code Copy

分析：handlePlayAudio绑定日常搜索结果。 换句话说，当您点击搜索建议时，搜索结果功能就完成了，并显示搜索结果栏。 点击每日搜索结果会触发handlePlayAudio。 前面提到，bindtap 返回参数并携带附加信息数据集。 事件本身有一个 currentTarget 属性。 data-id="{{item.id}}" 的功能与上面的搜索建议歌曲相同。 点击事件也有同样的效果。 item.id是执行搜索结果时接口向searchResult返回的数据，是搜索结果中每首歌曲对应的ID。 当您点击搜索结果中的一首歌曲时，该歌曲的 ID 会传递到事件中的数据集，并且数据名称将成为数据集中的 ID。 此时定义musicId，将事件中的歌曲ID赋值给musicId，使用wx.navigateTo跳转到播放界面，将musicId作为播放请求界面所需的传入数据。 显示打印数据 e:

9. 分享搜索功能源码下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：当时微信小程序模仿了网易云音乐的实时搜索功能（微信小程序歌曲播放列表）。 https://zhujicankao.com/123146.html