专栏首页编程微刊小程序调用新闻接口实现列表循环

小程序调用新闻接口实现列表循环

今天我又来调接口了,调用天气接口,音乐接口,新闻接口,图片接口,调完之后瞬间又觉得自己心情美美哒了,哈哈哈。

找到了一个比较好用的新闻接口 https://www.apiopen.top/journalismApi

1:首先写js,老样子 用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量。

Page({
  data: {
   // 3:需在data中声明一个接收数据的变量。
    list: []
  },
  onLoad: function (options) {
    wx.request({
      url: 'https://www.apiopen.top/journalismApi',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        //1:在控制台打印一下返回的res.data数据
        console.log(res.data)
        //2:在请求接口成功之后,用setData接收数据
        this.setData({
           //第一个data为固定用法,第二个data是json中的data
          list: res.data.data
        })
      }
    })
  },
})

我在 this.setData里面写的, list: res.data.data, 第一个data为固定用法,第二个data是json中的data,因为新闻列表里面的所有的json数据都是放在data里面了。

2:css我就不多说了

.item {
  width: 100%;
  height: 186rpx;
  position: relative;
  display: flex;
  margin: 10rpx 10rpx;
  border-bottom: 1px solid rgb(197, 199, 199);
}

.item .number-wrapper {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item .img {
  width: 150rpx;
  height: 150rpx;
  padding: 20rpx;
}

.number-wrapper .name {
  margin: 10rpx 40rpx 20rpx 10rpx;
  font-size: 35rpx;
  overflow: hidden;
}

.count {
  font-size: 34rpx;
}

3:然后最重要的就是数据渲染,在wxml里面进行操作,首先是循环列表,那就要写一个wx:for列表渲染,然后在取出自己想要的数据,这里想要取出图片,标题和时间,根据json的数据结构来解析即可。

<view wx:for="{{list.auto}}" wx:key="index">
  <view class="item">
    <image class="img" src="{{item.picInfo[0].url}}" mode="scaleToFill"></image>
    <view class="number-wrapper">
      <text class="name">{{item.title}}</text>
      <view class="count-wrapper">
        <text class="count">{{item.ptime}}</text>
      </view>
    </view>
  </view>
</view>

最重要的是图片的解析,完成之后,可以看到,接口数据已经渲染在前端界面了,这个时候已经完成了小程序调用新闻列表实现列表循环这个需求啦。

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。 欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Highcharts使用的一些总结

    Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提...

    王小婷
  • hcharts实现堆叠柱形图

    王小婷
  • Vue移动端框架Mint UI教程-数据渲染到页面(六)

    拿到res.data之后,要赋值给page实例里面的data 所以在data里面设置一个默认的空数组

    王小婷
  • 大数据价值49式

    2012年3月19日,奥巴马政府宣布美国投资2亿美元启动“大数据研究与开发计划,以帮助解决国家在科学与工程、国家安全、社会治理中最紧迫的诸多挑战...

    小莹莹
  • 栈和队列的相关问题

     队列可能稍微有点复杂,定义队列的时候需要定义三个变量,分别是end,start,size,先说说他们分别的作用,每次用户拿队中的元素,都从start下标位置取...

    mathor
  • 2017年,机器学习在Quora的五大应用场景

    作者|Nikhil Dandekar 翻译|薛命灯 2015 年,Quora 的工程主席 Xavier Amatriain 非常精彩地回答了 Quora 上的一...

    IT派
  • 院士李德毅:云计算再认识(56PPT+演讲全文)

    大数据文摘
  • CVPR 2019 | 爆款论文作者现场解读:视觉语言导航、运动视频深度预测、6D姿态估计

    本文来自:Robin.ly ,AI研习社 经授权转载,请勿二次转载。Robin.ly 是立足硅谷的视频内容平台,服务全球工程师和研究人员,通过与知名人工智能科学...

    AI研习社
  • codeforces 1203D2(贪心)

    dejavu1zz
  • 聚类(三):KNN算法(R语言)

    k最临近(KNN)算法是最简单的分类算法之一,属于有监督的机器学习算法。 算法流程 KNN的核心思想是:找出特征空间中距离待分类点最近的k个点,如果这k个点大多...

    三猫

扫码关注云+社区

领取腾讯云代金券