1. 效果

1. 逻辑

1. 界面初始化调接口获取两部分数据：

1. 搜索框默认的搜索placeholder： 下面 自由自在...
2. 热搜榜数据： 前20条热搜数据
3. 获取本地存的历史搜索记录 historyList

2. 搜索框输入文字事件：

1. 调用接口根据关键字搜索音乐
2. 判断搜索记录是否有对应关键字，如果有就将其移到数组前面、否则加到数组第一个
3. 搜索记录存到本地

2. 界面展示

2. 核心知识点

1. 本地数据存储与获取

1. 获取

    let historyList = wx.getStorageSync('searchHistory');
    if(historyList){
      this.setData({
        historyList
      })
    }

2. 存储

wx.setStorageSync('searchHistory', historyList)

2. 搜索框placeholder 文字样式设置

1. wxml 设置placeholder-class
<input type="text" value="{{searchContent}}" placeholder="{{placeholderContent}}" placeholder-class="placeholder" bindinput="handleInputChange"/>
2. wxss 设置样式
.placeholder{
  /*color: #d43c33;*/
  font-size: 28rpx;
}

3. 搜索框内容改变事件

1. wxml 绑定事件
<input type="text" value="{{searchContent}}" placeholder="{{placeholderContent}}" placeholder-class="placeholder" bindinput="handleInputChange"/>
2. js 事件
	  // 表单项内容发生改变的回调
   handleInputChange(event){
    // console.log(event);
    // 更新searchContent的状态数据
    this.setData({
      searchContent: event.detail.value.trim()
    })
     if(isSend){
       return
     }
     isSend = true;
     this.getSearchList();
     // 函数节流
    setTimeout( () => {
      isSend = false;
    }, 300)
    
  },