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

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

相关学习推荐：微信小程序教程

前言

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

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

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

界面预览

界面分析

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

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

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

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

接口封装

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

api.jsconst API = { getSearchSuggest: (data) => request(GET, `/search/suggest`, data), // 搜索建议接口 getSearchResult: (data) => request(GET, `/search`, data), // 搜索结果接口}复制代码-

实时搜索功能：

1.数据源分析

数据源展示data: { inputValue: null,//输入框输入的值 history: [], //搜索历史存放数组 searchSuggest: [], //搜索建议 showView: true,//组件的显示与隐藏 showSongResult: true, searchResult: [],//搜索结果 searchKey: [], showSearchResult: true, showClean: true, hots: [] //热门搜索 }复制代码-

2.获取热搜榜

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

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 }) } }) },复制代码-

3.获取input文本

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

解析：

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

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

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

4.搜索框其他功能

5.搜索建议

searchSuggest() { $api. getSearchSuggest({ keywords: 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('错误') }) }复制代码-解析：开始我们将接口进行了封装，在上一篇讲播放的文章中我的小伙伴已经把接口跟封装讲的很仔细了，这里我们就不在讲这个了，就分析我们的接口。searchKey作为搜索关键词需要传递给接口，在前面的getSearchKey方法中，我们已经讲输入框的内容传给了searchKey作为它的值；所以此时我们拿到有值的searchKey传递给接口，让接口返回相关数据，返回的数据中的res.data.result.allMatch就是从搜索关键词返回的搜索建议里的所有歌名，在将这些数据放到searchSuggest数据源中，这样在wxml埋好的空就能拿到数据，将搜索建议栏显示出。

6.搜索结果

7.搜索历史

8.歌曲跳转播放播放

9.search功能源码分享

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; }复制代码-

api.jsconst app = getApp();// method(HTTP 请求方法)，网易云API提供get和post两种请求方式const GET = 'GET';const POST = 'POST';// 定义全局常量baseUrl用来存储前缀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) { //请求成功 //判断状态码---errCode状态根据后端定义来判断 if (res.data.code == 200) { //请求成功 resolve(res); } else { //其他异常 reject('运行时错误,请稍后再试'); } }, fail(err) { //请求失败 reject(err) } }) })}const API = { getSearchSuggest: (data) => request(GET, `/search/suggest`, data), // 搜索建议接口 getSearchResult: (data) => request(GET, `/search`, data), // 搜索结果接口};module.exports = { API: API}复制代码-

总结

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

相关学习推荐：微信公众号开发教程，javascript视频教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。