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


Posted in Javascript onJune 29, 2019

开始写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
     
    })
   }
  })
 },
})

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

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

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

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

1:取到songlist里面指定的值

比如说,我现在想把截图里面红色框框里面数据渲染到前端

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

在wxml里面写代码

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

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

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

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

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

wxml:

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

渲染成功,显示如下:

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

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

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

wxml

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

效果如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
妙用Jquery的val()方法
Jun 27 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
javascript常用的设计模式
Feb 09 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
pm2启动ssr失败的解决方法
Jun 29 #Javascript
localstorage实现带过期时间的缓存功能
Jun 28 #Javascript
vue分页器组件编写方法详解
Jun 28 #Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
js实现简单分页导航栏效果
Jun 28 #Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP学习之PHP变量
2006/10/09 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php数组总结篇(一)
2008/09/30 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
JS 时间显示效果代码
2009/08/23 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python中functools模块的常用函数解析
2016/06/30 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
基于python plotly交互式图表大全
2019/12/07 Python
如何理解python中数字列表
2020/05/29 Python
浅析Python 多行匹配模式
2020/07/24 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
影视艺术学院毕业生自荐信
2013/11/13 职场文书
火车的故事教学反思
2014/02/11 职场文书
护士先进个人总结
2015/02/13 职场文书
《确定位置》教学反思
2016/02/18 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL