微信小程序开发三：简单获取api数据

继上一节的，着节主要讲怎样获取api的值，以及轮播图的设置。

1.网上申请api

因为接着上一节的nba球员数据，这一节获取nba新闻，而发现网上正好有这个api，所以顺手就拿来用了：

https://www.tianapi.com/apiview/8

 

2.获取api数据

其实获取api数据方法和第一节的类似：

onLoad: function (options) {
    wx.request({
      url: 'http://api.tianapi.com/nba/index?key=。。。。&num=50',
      header: {'content-type':'text/plain;charset=utf-8'},
      success: (data) =>{
        console.log("成功")
        this.setData({
          content:data.data.newslist,
        })
      }
    })

  },

3.显示数据

wxml

  
  
  
  
    
      {{item.title}}
      {{item.ctime}}
    
  
  

wxss

/*======列表======== */
.contents{
  margin-top: 30rpx;
}
.content{
  height: 250rpx;
  width: 720rpx;
  margin-left: 30rpx;
  display: flex;
}
.content image{
  height: 200rpx;
  width: 300rpx;
}
.contexts{
  margin-left: 30rpx;
}
.content-name{
  font-size: 30rpx;
  margin-bottom: 10rpx;
  font-weight: bolder;
}
.content-ctime{
  font-size: 25rpx;
  margin-top: 80rpx;
  margin-left: 150rpx;
}

.divLine{
  background: #E0E3DA;
  width: 100%;
  height: 2rpx;
} 

.divLine2{
  background: #E0E3DA;
  width: 2rpx;
  height: 50rpx;
  margin-top: 25rpx;
} 
/*======列表======== */

4.轮播图的设置

一个主页一般都有一个轮播图，其实很简单，官方文档就很详细

    imagewidth:wx.getSystemInfoSync().windowWidth, 
    indicatorDots: true,    
    autoplay: true,    
    interval: 3000,    
    duration: 1000,

 

5.效果展示：