微信音乐小程序实站(二)：为歌曲推荐页面加入真实的数据

本文主要是介绍微信音乐小程序实站(二)：为歌曲推荐页面加入真实的数据，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在上一篇文章中，我们已经完成了歌曲推荐页面的静态搭建，接下来我们就要完成数据的请求和展示

由于网易云音乐获取推荐歌曲接口要求用户要先登录，而这次教程不包含登录，于是我在网络上找到了一个歌手榜单（热歌榜）接口：http://www.hjmin.com/top/list?idx=1；虽然和我得到的数据不是很一样，但对于我们的学习来说影响不大，那咱们就通过请求这个接口来获得数据吧

现在我们要操作的是recommendSong.js文件，在里面实现我们数据的请求

得到歌曲数据并展示

在data中新建变量recommendList

  data: {
    recommendList: [],
  },

在生命周期函数onload中请求歌曲数据，并存到变量recommendList中

 /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    let _this = this;
    wx.request({
      url: 'http://www.hjmin.com/top/list?idx=1',

      success: (res) => {
        _this.setData({
          recommendList: res.data
        })
      }
    })
  },

点击保存后，我们会发现控制台有类似如下有关域名的报错

它告诉我们域名不合法，那我们可以打开不校验合法域名：点击右上角的详情，然后再点击本地设置，勾上下图圈起来的选项

我们会发现勾上后，报错就没有了

现在我们点击下方控制台的AppData,来看看我们是不是真的得到并保存了相应的数据

我们成功拿到了数据，不过我们发现，我们想要的数据实际都在playlist的tracks中，所以我们给recommendList赋值的时候，可以直接将playlist的tracks赋值给它，所以代码修改如下：

保存后，我们再来看看AppData里的数据，发现现在已经很符合我们的需求了；接下来就是将数据显示在页面上

在recommendSong.wxml进行数据的展示

这是其中一条数据，我们根据这些命名来将静态页面修改为动态的

1 {"name":"还是会想你","id":1827600686,"pst":0,"t":0,"ar":[{"id":15199791,"name":"林达浪","tns":[],"alias":[]},{"id":12631485,"name":"h3R3","tns":[],"alias":[]}],"alia":[],"pop":100,"st":0,"rt":"","fee":8,"v":6,"crbt":null,"cf":"","al":{"id":124309279,"name":"还是会想你","picUrl":"http://p4.music.126.net/9FhSEQtMhP-JP3_U84YfWQ==/109951165798773745.jpg","tns":[],"pic_str":"109951165798773745","pic":109951165798773740},"dt":190063,"h":{"br":320002,"fid":0,"size":7605165,"vd":-65927},"m":{"br":192002,"fid":0,"size":4563117,"vd":-63374},"l":{"br":128002,"fid":0,"size":3042093,"vd":-61772},"a":null,"cd":"01","no":0,"rtUrl":null,"ftype":0,"rtUrls":[],"djId":0,"copyright":0,"s_id":0,"mark":0,"originCoverType":1,"originSongSimpleData":null,"single":0,"noCopyrightRcmd":null,"rtype":0,"rurl":null,"mst":9,"cp":0,"mv":0,"publishTime":0}

1. 删除多余静态代码，只留下一条可供循环的数据

在我们的recommendSong.wxml中，我们可以只留下一个scrollItem,删除其他静态数据

删除后，

2. 利用wx:for进行数据展示

 <view class="scrollItem" wx:for="{{recommendList}}" wx:key="index">
                <image src="{{item.al.picUrl}}"></image>
                <view class="music">
                    <view class="musicName">
                        <text class="name">{{item.name}}</text>
                        <!-- <text class="alias" wx:if="{{item.alias.length!==0}}">(《明天》的主题曲)</text> -->
                    </view>
                    <view class="musicInfo">
<!--                        <text class="tags">独家</text>-->
                        <text class="composer" wx:for="{{item.ar}}"  wx:key="id" wx:for-item="artist">{{index===0?'':' / '}}{{artist.name}}</text>
                        <!-- <text class="connect">-</text> -->
                        <!-- <text class="album">牛奶咖啡</text> -->
                    </view>
                </view>
                <view class="opration">
                    <text class="iconfont icon-shipin movie"></text>
                    <text class="iconfont icon-gengduo more"></text>
                </view>

            </view>

（由于这次接口请求数据和我自己写的不太一样，所以我注释掉了一些内容；不过展示数据的方法都大同小异，注释掉一些完全不会影响我们的学习滴）

a. 现在再看我们的小程序，已经注入了许多鲜活的数据啦

b. 现在我们再改一下封面图片

再看回我们最开始请求的数据

发现里面的coverImgUrl正是我们想要的，所以我们在data中新建一个变量coverImg,来存放我们的图片（具体步骤和上述差不多，就只贴出代码了）

再修改一下recommendSong.wxml的代码

这时候我们已经基本完成数据的获取啦，现在就差拿到今天的日期并显示了

动态获取今天的日期并展示

在封面图上有今天的日期，我们需要算出今天的日期并且显示

1. 首先在data中定义两个变量day和month

 day: '', // 天
 month: '', // 月

2. 在生命周期函数onload中计算出day和month的值

 // 更新日期的状态
     let day = new Date().getDate();
     let month = new Date().getMonth() + 1;
     if (day/10 < 1){
       day = "0" + day;
     }
     if (month/10 < 1){
       month = "0" + month;
     }
     this.setData({
       day,
       month
     })

3. 修改recommendSong.wxml

这样小程序显示的就是当天的日期啦

这一次我们已经完成了歌曲推荐页面，通过这一篇的学习，我相信你们已经熟悉怎样请求和展示数据；不过这里我要提醒的是，代码最好不要直接copy,而是要思考一下，当然，这些主要是对于初学者，如果这些对你来说太简单的话，可以选择性地编写

下一篇文章，我们开始逐渐进入我们的重点内容之一，歌曲详情页的静态页面编写（包括图片的旋转，背景的设计等前端设计的讲解）

这篇关于微信音乐小程序实站(二)：为歌曲推荐页面加入真实的数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！