（干货）微信小程序项目——泡泡云音乐day2

六、获取渲染热门歌手数据

wxml:

<!-- 热门歌手 -->
<view class="title">热门歌手</view>
<view class="hotSinger">
  <block wx:for="{{singer}}" wx:key="*this" wx:for-index="{{in}}">
    <view class="item">
      <image src="{{item.picUrl}}"></image>
      <text>{{item.name}}</text>
    </view>
  </block>
</view>

js:

  getHotSingerList(){
    wx.request({
      url: 'http://localhost:3000/top/artists',
      dataType:'json',
      method:'GET',
      success:(res)=>{
        // console.log(res.data.artists)
        this.setData({
          singer:res.data.artists
        })
      }
    })
  },

七、获取渲染热歌推荐数据

wxml:

<view class="title">热歌推荐</view>
<view class="hotSong">
  <block wx:for="{{song}}" wx:key="*this">
    <view class="item">
      <image src="{{item.picUrl}}"></image>
      <text>{{item.name}}</text>
    </view>
  </block>
</view>

js:

  getHotSongList(){
    wx.request({
      url: 'http://localhost:3000/personalized?limit=8',
      dataType:'json',
      method:'GET',
      success:(res)=>{
        // console.log(res.data.result)
        this.setData({
          song:res.data.result
        })
      }
    })
  },

八、获取渲染最新音乐数据

wxml:

<view class="new-music">
  <block wx:for="{{newMusic}}">
    <view class="item">
      <view class="textBox">
        <text class="name1">{{item.name}}</text>
        <!-- artists是数组，必须加id，如果有两个歌手加两个索引，中间用空格隔开 -->
        <text class="name2">{{item.song.artists[0].name}}  {{item.song.artists[1].name}}</text>
      </view>
      <image src="../../images/play.png" class="bf"></image>
    </view>
  </block>
</view>

js:

  getNewMusic(){
    wx.request({
      url: 'http://localhost:3000/personalized/newsong',
      dataType:"json",
      method:'GET',
      success:(res)=>{
        console.log(res.data.result);
        this.setData({
          newMusic:res.data.result
        })
      }
    })
  },

九、在数据层data中设置对象接收数据

名称要和block wx:for="{{}}"里面填的名称一致

以上方法和轮播图一样，不再赘述

  data: {
    // 轮播图
    background:{},
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    // 热门歌手
    singer:{},
    // 热歌推荐
    song:{},
    // 最新音乐
    newMusic:{}
  },

十、设置样式

/* 热门歌手 */
.hotSinger{
  width: 100%;
  height: 300rpx;
  /* background-color: #999; */
  /* 利用自动超出隐藏的原理实现弹性盒子的横向滚动 */
  display: flex;
  overflow: auto;
}
.hotSinger image{
  width: 210rpx;
  height: 210rpx;
  border-radius: 10px;
}
.hotSinger .item{
  width: 210rpx;
  text-align: center;
  /* 间距 */
  margin-left: 10rpx;
}
.hotSinger text{
  font-size: 27rpx;
  color: #444;
}

/* 热歌推荐 */
.hotSong{
  width: 100%;
  height: 300rpx;
  /* background-color: #999; */
  /* 利用自动超出隐藏的原理实现弹性盒子的横向滚动 */
  display: flex;
  overflow: auto;
}
.hotSong image{
  width: 210rpx;
  height: 210rpx;
  border-radius: 10px;
}
.hotSong .item{
  width: 210rpx;
  text-align: center;
  /* 间距 */
  margin-left: 10rpx;
}
.hotSong text{
  font-size: 27rpx;
  color: #444;
}

/* 最新音乐 */
.new-music .bf{
  width: 60rpx;
  height: 60rpx;
}
.new-music .item{
  display: flex;
  /* background-color: sandybrown; */
  padding: 10rpx 18rpx 10rpx 12rpx;
  /* 两端对齐（常用） */
  justify-content: space-between;
  border-bottom: 1rpx solid #bbb;
}
.textBox{
  display: flex;
  flex-direction: column;
}
.new-music .item .bf{
  float: right;
}
.name1{
  color: #000;
  font-size: 32rpx;
  overflow: hidden;
  /* 一定要限制宽度，以防止歌名过长影响右边的播放按钮 */
  width: 600rpx;
}
.name2{
  color: #777;
  font-size: 24rpx;
}

至此主页完成