NetEase cloud music development --recommendSong construction

Static construction of recommendSong page header

First create a new recommendSong

Modify the nav part above

 Write the style above. We now write a date in this box

It is to center the text vertically and horizontally based on the parent element 

 style done 

recommendSong date dynamic display

Before we made the recommendSong static header, now we need to dynamically display the hard-coded recommendSong date

We first define two variables in data and dynamically render them on the page. This time we use the date function packaged by the WeChat applet

 I learned it again today. You can use this built-in date function directly in the applet to get the date

 day:new Date().getDate(),
            month:new Date().getMonth()+1

Static construction of recommendSong content area

After the header is built, let's build the list area

The list area is divided into two parts, one for navigation and the other for the real list area

navigation

 list area

Here we consider a problem, like some English songs are very long. If left unchecked, then it will go to the downside. unsightly

 Single-line text is replaced with ellipsis

 Here we use dead data instead.

Note that there must be a space after calc vh, otherwise it will fail

The content area of ​​recommendSong is displayed dynamically

watch document

 Because we saved the cookie value locally before, then we read it directly. If there is no cookie value, it means that there is no login, and we will jump to the login interface again.

Get daily recommended data if you can go on

 Here we want to use async and await so we can encapsulate a successful method to use

 Take a look at the structure and render the data relative to

<scroll-view scroll-y class="listScroll">
            <view class="srcollItem" wx:for="{
   
   {recommendList}}" wx:key="id">
                <image src="{
   
   {item.al.picUrl}}" mode=""/>
                <view class="musicInfo">
                    <text class="musicName">{
   
   {item.name}}</text>
                    <text class="musicName">{
   
   {item.ar[0].name}}</text>
                </view>
                <text class="iconfont icon-gengduo"></text>
            </view>
        </scroll-view>

Done, this new interface. We're going to modify some code

async getRecommendList(){
        let recommendListData=await request('/recommend/songs')
        console.log('获取每日推荐的数据',recommendListData);
        this.setData({
            recommendList:recommendListData.data.dailySongs
        })
    },