?此文章用于总结自己的知识点。有这个项目有兴趣的伙伴可以点击下方链接购买学习
小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介正在上传…重新上传取消https://ke.qq.com/course/4162214
https://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
?