专栏首页编程微刊微信小程序调用json数据接口并解析

微信小程序调用json数据接口并解析

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

Page({
  data: {
    list: []
  },
  onLoad: function (options) {

    wx.request({
      url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=h5&needNewCode=1&tpl=3&page=detail&type=top&topid=27&_=1519963122923',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
        this.setData({
          //第一个data为固定用法
          list: res.data
          
        })
      }
    })
  },

})

这个时候可以看到,应用程序数据AppData里面,整个json数据全部都已经放在了list集合里面了。

js写完之后,现在开始写wxml里面的内容,将数据渲染在界面,这个我想重点的写一下,因为对于json的处理上是很重要的一个事情,很多人都会在解析json的时候出现这样或者那样的问题,导致页面数据渲染不出来,达不到自己的预期效果。

1:取到songlist里面指定的值 比如说,我现在想把截图里面红色框框里面数据渲染到前端

在wxml里面写代码

<view>
{{list.songlist[2].data.albumdesc}}
</view>

这个时候,可以看到小程序界面,页面已经渲染出了自己想要的数据了。

2:想要把json里面的巅峰榜,新歌的数据和图片渲染到页面,道理其实是一样的。

wxml:

<view>
  {{list.topinfo.ListName}}
  <image src="{{list.topinfo.MacDetailPicUrl}}" class='in-image'>
  </image>
</view>

渲染成功,显示如下:

3:循环展示songlist的Array内容(100首歌曲排名的api),这里没写布局页面篇幅不够我只展示了albumname的内容,可以根据实际项目需要展示。

wxml

<view wx:for="{{list.songlist}}" wx:key="index"><!-- 取到songlist里面的内容并且进行循环 -->
{{item.data.albumname}}
</view>

效果如下:

暂时不写啦,明天继续解析,下班先回家了,办公室的人都已经走光了,在继续写天黑了就不敢一个人回家了。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 21道前端面试题,值得收藏~

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。clientWidth:对象内容的可视区的宽度,不包滚动条等边线,...

    王小婷
  • 小程序调用天气接口并且渲染在页面

    五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu.com/p/09b4515152ff

    王小婷
  • 小程序读取几种不同格式json数据(小程序json解析)

    1:解析这个json:http://www.intmote.com/myproject/test/new_file.json

    王小婷
  • 【java基础】static关键字--静态块

    在说明static关键字的第三个用法时,我们有必要重新梳理一下一个对象的初始化过程。以下面的代码为例: package com.dotgua.study; cl...

    程序员互动联盟
  • 【java基础】static关键字--静态块

    在说明static关键字的第三个用法时,我们有必要重新梳理一下一个对象的初始化过程。以下面的代码为例: package com.dotgua.study; cl...

    程序员互动联盟
  • 这位贾老板登场:波士顿动力的Atlas都是小CASE

    本文经AI新媒体量子位(公众号 ID: QbitAI)授权转载,转载请联系出处 美国的贾老板最近又成了话题人物。 这个贾老板,不是山西那个,是货真价实的美国人。...

    机器人网
  • 好久没更新的我来一发fusion360的小白教程

    整个2月都沉浸毕设的纠结之中在过年的快乐之中,也没有什么新的想法,于是又开始炒冷饭,等这段时间有眉目了分享一波毕设hhh

    UDM Lab
  • 机器学习人工学weekly-2018/8/12

    链接:https://distill.pub/2018/differentiable-parameterizations/#section-aligned-in...

    windmaple
  • Python实现RGB与HSI颜色空间的互换

    这是这学期数字图像处理课的第一份作业好久没懂python手都快生了,调了好久才搞出来。 HSI颜色模型是一个满足计算机数字化颜色管理需要的高度抽象模拟的数学...

    AI那点小事
  • [python3 OpenCV3使用技巧]使用numpy矩阵实现RGB转HSI

    看到网上有很多博客都是通过循环遍历的方式来进行RGB转HSI操作,但是我们知道在python中使用Numpy数组并行操作可以更加简洁,速度也更快。

    小宋是呢

扫码关注云+社区

领取腾讯云代金券