此文章用于总结自己的知识点。有这个项目有兴趣的伙伴可以点击下方链接购买学习
小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介正在上传…重新上传取消https://ke.qq.com/course/4162214https://ke.qq.com/course/4162214
一、点击搜索框进入搜索页面的开发
点击跳转到搜索页面
detail-search页面使用van-search组件和area-header组件
index.json
1.1热门搜索模块
获取热门搜索的数据
1.2建议搜索模块
当搜索内容一改变就去发送请求获取建议搜索数据
当搜索值长度为0,要把建议搜索的内容也清空,这样搜索内容为空的时候才会自动隐藏建议搜索的内容
建议搜索的css样式
1.3对搜索获取搜索内容进行防抖操作
我们在搜索框中每输入一个字符就会对服务器请求一次数据,当用户一次性输入多条内容时也意味着向服务器获取多次数据,这样对服务器的压力太大。
所以对获取搜索内容进行一个防抖,有了防抖,当快速输入内容时可以大大减少向服务器发送请求的频率
对数据请求进行防抖操作
1.4对建议查询的结果进行特殊样式展示
封装stringToNodes方法,这是小程序提供的富文本
index.js
重新渲染建议搜索的数据
二、获取搜索值并对想要搜索的值发起数据请求
根据keywords发起数据请求
在搜索框中bind:search是搜索框点击确定搜索,在小程序中是按下enter键
保存searchValue并发起数据请求将结果保存到resultSongs中
将搜索结果渲染出来,因为某yun的服务器返回数据有一些字段名不一样.所以要重新优化一下
相同的数据,字段名不一致
点击热门搜索的tag标签也会将值赋予给keywords
根据赋值后的keywords重新发送网络请求
三、点击song-item-v1和v2跳转到播放页面
创建新的页面
绑定点击事件,一旦点击进行页面跳转并将id传送过去
item-v1
item-v2