NetEase cloud music development -- search module basic function realization (except history record module)

search header build

Build a search search page in the same way

 There is another piece that has not been implemented, which is to change the color of the default text in the input box

 WeChat Mini Program: Modification of the placeholder style of the input input box_WeChat Mini Program placeholder style_Cool Iao's Blog-CSDN Blog

 Baidu searched and found the solution of this big guy. very nice

<view class="searchContainer">
    <view class="header">
        <view class="searchInput">
            <text class="iconfont icon-search1 searchIcon"></text>
            <input type="text" placeholder="搜索歌曲" placeholder-class="placeholder-style"/>
        </view>
        <text class="cancel">取消</text>
    </view>
</view>

/* pages/search/search.wxss */
.header{
    display: flex;
    height: 60rpx;
    line-height: 60rpx;
    padding: 10rpx;
}
.searchInput{
    position: relative;
    flex: 1;
    background: rgba(237, 237, 237, 0.3);
    border-radius: 30rpx;
}
.cancel{
    width: 100rpx;
    text-align: center;
}
.searchIcon{
    position: absolute;
    left: 15rpx;
}
.searchInput input{
    margin-left: 50rpx;
    height: 60rpx;
}
.placeholder-style{
    /* color: #d43c33; */
    font-size: 30rpx;
}

Static construction of hot search list

.hotContainer .title{
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1rpx solid #eee;
}
.hotList{
    display: flex;
    flex-wrap: wrap;
}
.hotItem{
    width: 50%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
}
.hotItem .order{
    margin: 0 10rpx;
}

<view class="hotContainer">
        <view class="title">热搜榜</view>
        <!-- 热搜列表 -->
        <view class="hotList">
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>
            <view class="hotItem">
                <text class="order">1</text>
                <text >偏爱</text>
            </view>



        </view>
    </view>

Hot search list, dynamic display of placeholder data

view document

NetEase Cloud Music NodeJS API (binaryify.github.io) 

 The returned data is like this

Write methods that return search data

 has become dynamic data

onLoad(options) {
        // 初始化数据
        this.getInfoData()
    },
    async getInfoData(){
        let placeholderData=await request('/search/default')
        this.setData({
            placeholderContent:placeholderData.data.showKeyword
        })
    },

 Hot search list dynamic data

 same as before

let hotListData=await request('/search/hot/detail')



hotList:hotListData.data

 Then go to add icon

 <image class="iconImg" wx:if="{
   
   {item.iconUrl}}" src="{
   
   {item.iconUrl}}" mode=""/>

If wx:if is not added, it will take up space

Keyword fuzzy matching search data

Here are the two data of the expression item

input-->real-time monitor change-->make it focus

First, we need to get the data of the form item, and then call the interface to get the data

 

In this way, the content of the form item can be obtained, but it is an object.

There is a doubt here? Why we don't have value={ {searchList}} but can be rendered dynamically?

 Because this bindinput event returns the value of value by default

For performance optimization, we use throttling

handleInputChange(event){
        this.setData({
            searchContent:event.detail.value.trim()
        })
        // 函数节流
        if(isSend){
            return
        }
        isSend=true
        this.getSearchList()
        setTimeout(()=>{
            // 发请求获取关键字模糊匹配数据
             isSend=false
        },300)
    },
    //获取搜索数据的功能函数
    async getSearchList(){
        let searchListData=await request('/search',{keywords:this.data.searchContent,limit:10})
            this.setData({
                searchList:searchListData.result.songs
            })
    },

Dynamic display of search list

Based on this piece, we first build an interface, and then dynamically render the returned data to the page, that’s it.

 The style is written, but there is another bug

 When we delete this letter, it is an empty string, and then send a request to the server, an error will be reported

 If we input an empty string, just return it out

Looking at this page is still very messy, the search content display and hot search list should be a mutually exclusive effect

 We achieve this through this wx:if, if the array has data, then it will be displayed, otherwise it will not be displayed