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

泡泡云音乐

一、样本图

发现歌单

首页

热歌榜

登录注册

歌手信息

歌曲分类

歌曲搜索

播放列表

播放页面

二、api

接口文档：https://binaryify.github.io/NeteaseCloudMusicApi/#/ （只是文档，内容同下面的一样）

注意：由于github被ban了，本地接口文档暂时打不开，在请求的时候baseURL依旧是：

http://localhost:3000

三、轮播图

1、wxml轮播图版块

<!-- swiper的后面可以加属性，设置图片自动轮播等。。。 -->
<swiper autoplay="{{autoplay}}" vertical="{{vertical}}" indicatorDots="{{indicatorDots}}">
  <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
          <!-- 这里插入轮播图图片 -->
          <image src="{{item.imageUrl}}" class="lbt"></image>
              <!-- 这里还可以用mode="widthFix"方法设置图片大小和间距 -->
          </swiper-item>
        </block>
</swiper>

2、js设置逻辑，打开自动播放，这里的图片链接暂时写死，后面改成请求

  data: {
    background: [],
        //这里接收轮播图请求回来的数据
    indicatorDots: true,
    vertical: false,
    autoplay: true,
  },

3、设置轮播图样式

.lbt{
  width: 98%;
  height: 300rpx;
  margin-left: 7rpx;
  margin-top: 7rpx;
}

四、接口部署

1、设置github加速代理

git config --global --unset http.proxy

git config --global --unset https.proxy

2、将接口push到本地：

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

3、打cmd，再打npm install安装依赖

4、node app.js运行接口

后继工作第二点已经说了，不再赘述。

五、请求数据的调用和轮播图渲染

//监听页面加载
  onLoad: function (options) {
      //把请求轮播图的函数搞进去调用它
    this.getLunbotuList()
  },

getLunbotuList(){
    wx.request({
      url: 'http://localhost:3000/banner',
      dataType:'json',
      method:'GET',
      success:(res)=>{
        //console.log(res.data.banners)一直点下去找到图片地址,
        this.setData({
          background:res.data.banners
        })
      }
    })
  },

到这一步它会报错

原因在于拿到的是一个对象，而imgurl是其中的一个属性，所以要将“三.1”代码中的image src=“{{item}}”

改成image src=“{{item.imageUrl}}”

至此轮播图完成