微信小程序QQ音乐搜索框事件

以你之姓@ 2023-10-11 12:51 18阅读 0赞

app.json

{
      "pages": [
        "pages/index/main",
        "pages/logs/main",
        "pages/counter/main",
        "pages/songlist/main"
         
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#30c27c",
        "navigationBarTitleText": "QQ音乐",
        "navigationBarTextStyle": "black"
        
      },
      "tabBar": {
        "position":"top",
        "selectedColor": "#30c27c",
        "color": "#333",
        "backgroundColor": "white",
        "borderStyle": "white",
        
    
        "list": [{
          "text": "推荐",
          "pagePath": "pages/index/main"
        
        },{
          "text": "排行榜",
          "pagePath": "pages/counter/main"
          
        },{
          "text": "搜索",
          "pagePath": "pages/logs/main"
        
        }]
      },
      "requiredBackgroundModes": [
        "audio"
      ]
    }

index.vue

<template>
      <div>
        
        <view class="mod_search_bar">
          
              <input class="mod_ipt"   placeholder="搜索歌词、歌单、专辑" confirm-type='search'
     @focus="inputfocus"  @input="inputInput"  @confirm="confirm" :value="searchKeyWords" />
    
           
             <icon type="clear" size="16" class="hidclear"  :hidden="hiddenClear"   @click="clear"></icon>
            
             
             <text class="mod_search_bar_text" :hidden="hiddenCancel" @click="cancel">取消</text>
        </view>
    
    <view class='main'>
       <view class='search_result_list' :hidden="hiddenResult">
        <view class='item' v-for="(item,index) of searchResult" @click="play(item.mid,item.name)" :key="index">
           
            <view class='icon'>
              <image src="../../static/images/search_sprite.png"></image>
            </view>
            <view class='song'>
              <view class='song_name'>{
       {item.name}}</view>
              <view class='song_author'>{
       {item.singer}}</view>
            </view>
        </view>
      </view>
    </view>
        
        <view :hidden="hiddenHistory">
            <view class="mod_search_record" v-for="(item,index) of history" :key="index">
              
                  <image class="recordImg" src='../../static/images/clock_ic.png'></image>
                  <text class="record_con">{
       {item}}</text>
                  <text class="icon_close"  @click="deleteHistory" :data-index="index">X</text>
            </view>
            <view class="record_handle" @click="removeHistory">清除搜索记录</view>
        </view>
    
        
        <view class="mod_search_result"  :hidden="hiddenHot" >
              <view class="headline">热门搜索</view>
              <view class="headline_content" v-for='(items,indexs) in arr' :key='indexs'>{
       {items}} </view>
        </view>
          
         <view class="location">
            <button type="primary" class="btn">安装QQ音乐 发现更多精彩</button>
        </view>
      </div>
    </template>
    
    <script>
    export default {
      data () {
         return{
            songlist:[],
           // adHidden:false,    //默认不隐藏
           // flag:false ,       //开关  x开关
           // hidden:'',
            arr:['乐队的夏天','只要你还需要我 ','多年以后 ','TONIGHT,I FEEL CLOSE TO YOU '
            ,'邓紫棋 ','RED VELVET ','APOLOGIZE ','爱丫爱丫 '
            ],
            searchKeyWords:'',  //input的value
            searchResult:[],//搜索结果
            history:[],//搜索历史为空   
            hiddenHistory:true,//历史记录藏起来
            hiddenClear:true,//x默认消失
            hiddenCancel:true,//取消两个字 默认隐藏
            hiddenResult:true,//默认的搜索结果   隐藏
            hiddenHot:false,//热门所搜
          
         }
      },
      methods: {
        clear(){   //清除图标
          this.searchKeyWords = " "; //图标消失
          this.hiddenClear = true;
          this.searchKeyWords = "";
        },
        cancel(){  //取消字  隐藏
          this.searchKeyWords = " ";   //恢复到初始状态
          this.hiddenClear = true;   //清除消失
          this.hiddenCancel = true;   //取消消失
          this.hiddenHistory = true;   //搜索历史消失
          console.log(this.hiddenHistory);
          this.hiddenHot = false;  //热门出现
          this.hiddenResult = true;   //搜索结果消失
          this.searchKeyWords = "";  //关键字消失
        },
          deleteHistory(e){  
          //历史记录的值
          let history =  this.history
          console.log(e.currentTarget.dataset.index);
          history.splice(e.currentTarget.dataset.index,1)
          //设置缓存
          wx.setStorageSync('history',history)
          this.history = history
          //历史记录没有了  隐藏掉
          if(this.history.length <=0){
            this.hiddenHistory = true
          }
        },
        removeHistory(){
          //清空
          wx.removeStorageSync("history");
          this.history = []
          //隐藏
          this.hiddenHistory = true
        },
        inputfocus(){   //聚焦
          console.log('聚焦')
          this.hiddenCancel = false;
           if(this.history.length  >0){
              this.hiddenHistory = false
          }
          this.searchResult = []
          this.hiddenHot = true  //热门搜索藏起来
        },
        inputInput(e){  //输入事件
          console.log(e,'输入事件');
          let value  = e.target.value;
           //出现了了一个xx
          //如果输入的内容为空
          //如果为空的隐藏 xx
          if(value==""){
            this.hiddenClear = true
          }else{
            this.hiddenClear = false
          }
        },
        confirm(e){  //输入回车键
             let value = e.target.value;
             if(value == ''){
               wx.showToast({
                title: '请输入关键字', //提示的内容,
                recordImg: 'none', //图标,
            });
                //如果为空  停止
                return
             }
         wx.request({
         url: 'https://c.y.qq.com/splcloud/fcgi-bin/smartbox_new.fcg', //开发者服务器接口地址",
          data:{
            is_xml: 0,
            format: 'jsonp',
            key: value,
            g_tk: 5381,
            jsonpCallback: 'callback',
            loginUin: 0,
            hostUin: 0,
            format: 'jsonp',
            inCharset: 'utf-8',
            outCharset: 'utf-8',
            notice: 0,
            platform: 'yqq',
            needNewCode: 0
          },
          success: (res) => {
            
          //搜索结果  出现
            this.hiddenResult = false
            let history = this.history //查找历史记录中是否有此关键字
            let hinx = history.indexOf(value)//查找value是否在历史记录容器中
            if(hinx==-1){
              //将value的值  放入到 history这个容器中
              history.unshift(value)
            }
            wx.setStorageSync('history',history)    
             this.history = history           //把缓存中的数据存起来
            let res1 = res.data.replace("callback(","")
            let  res2 = JSON.parse(res1.substr(0,res1.length-1))
            console.log(res2)
            this.searchResult = res2.data.song.itemlist
            this.hiddenHistory = true    //搜索历史 藏起来
           }
         })
        },
        play:(so,sn)=>{
          console.log(so,sn)
          let songmid = so;
          let songname = sn;
           //请求歌的接口地址
                wx.request({                
                url: 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg',
              data: {
                g_tk: 5381,
                inCharset: 'utf-8',
                outCharset: 'utf-8',
                notice: 0,
                format: 'jsonp',
                hostUin: 0,
                loginUin: 0,
                platform: 'yqq',
                needNewCode: 0,
                cid: 205361747,
                uin: 0,
                filename: `C400${songmid}.m4a`,
                guid: 3913883408,
                songmid: songmid,
                callback: 'callback',
              },
              success:(res)=>{
                var res1 = res.data.replace("callback(", "")
                var res2 = JSON.parse(res1.substring(0, res1.length - 1))
                console.log(res2)
                 let playAddress = `https://dl.stream.qqmusic.qq.com/${res2.data.items[0].filename}?vkey=${res2.data.items[0].vkey}&guid=3913883408&uin=0&fromtag=66`;
                wx.playBackgroundAudio({
                dataUrl:playAddress,
                title:songname,
                // coverImgUrl:
                })
              }
            })
         }
    
      }
    };
    </script>
    
    <style>
    .mod_search_bar{
        background: #f4f4f4;
        padding: 10px;
       
    }
    .mod_ipt{
      background: #fff;
      height: 60rpx;
      padding: 8rpx 12rpx 8rpx 35rpx;
      width: 100%;
      border-radius: 5rpx;
    }
    
    .mod_search_result {
        background: #fff;
        padding: 15rpx 15rpx 10rpx 15rpx;
    }
    .headline{
      color: rgba(0,0,0,.6);
      margin-bottom: 8rpx;
    }
    .headline_content{
        font-size: 35rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #000;
        border: 1px solid rgba(0,0,0,.6);
        border-radius: 99rpx;
        margin-right:  14rpx;
        margin-bottom: 30rpx;
        float: left;
        padding: 0 14rpx;
    }
    .hidclear{
      position: absolute;
      top: 42rpx;
      right: 132rpx;
      z-index: 10;
    }
    .mod_search_bar_text{
      position: absolute;
      top: 21rpx;
      right: 0;
      height: 80rpx;
      width: 100rpx;
      line-height: 80rpx;
      text-align: center;
      background-color:#f4f4f4; 
      z-index: 10;
    }
    /* 历史记录 */
    .mod_search_record{
       position: relative;
       top: 0;
       left: 0;
      border-top: 1px solid #f4f4f4;
        padding: 0 15rpx;
         height: 110rpx;
      
    }
    .recordImg{
       
        position: absolute;
        left: 40rpx;
        top: 30rpx;
        width: 40rpx;
        height: 40rpx;
    }
    .record_con{
      position: absolute;
        left: 120rpx;
        top: 30rpx;
        display: block;
        height: 44rpx;
        line-height: 44rpx;
        color: #000;
        font-size: 35rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .icon_close{
        position: absolute;
        right: 20rpx;
        top: 35rpx;
        width: 50rpx;
        height: 50rpx;
    }
    .record_handle{
      text-align: center;
        height: 44rpx;
        line-height: 44rpx;
        color: #47c88a;
    }
    /* 搜索结果图标 */
    .main .search_result_list .item{
      display: flex;
      align-items: center;
      border-top: 1px solid #e5e5e5;
    }
    .main .search_result_list .item .icon{
      width: 22px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 22px 30px;
      margin: 0 18px;
      flex-shrink: 0;
    }
    .main .search_result_list .item .icon image{
      width: 100%;
      height: 100%;
    
    }
    .main .search_result_list .item .song{
      height: 55px;
      overflow: hidden;
      padding: 0 5px;
    }
    .main .search_result_list .item .song .song_name{
      margin: 10px 0 2px;
      line-height: 18px;
      font-size: 16px;
      font-weight: normal;
      color: #000;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .main .search_result_list .item .song .song_author{
      color: #808080;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    
    .main .search_history .search_history_list .item{
      border-top: 1px solid #ededed;
      padding: 0 15px;
      display: flex;
      align-items: center;
    }
    .main .search_history .search_history_list .item .icon{
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    .main .search_history .search_history_list .item image{
      width: 100%;
      height: 100%;
    
    }
    .main .search_history .search_history_list .item .keywords{
      flex-grow: 1;
      height: 44px;
      line-height: 44px;
      color: #000;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0 20px;
    }
    .main .search_history .search_history_list .item .close_icon{
      color: #aaa;
      padding: 0 6px;
    }
    .main .search_history .history_clear{
      line-height: 44px;
      color: #47c88a;
      text-align: center;
      font-size: 12px;
    }
    
    /* 底部 */
    .location{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 15px 0;
      background-color: rgba(253, 250, 250, 0.8);
    }
    .btn{
      background-color: #30c27c;
        color: #fff;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        text-align: center;
        width: 70%;
        border-radius: 35rpx;
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019092320280117.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923202809588.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70