微信小程序如何调用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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
jQuery中extend函数详解
Feb 13 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
Vue渲染函数详解
Sep 15 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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
PHP的ASP防火墙
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
为什么python比较流行
2020/06/19 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python如何快速拼接字符串
2020/10/28 Python
美国智能家居专家:tink
2019/06/04 全球购物
益模软件Java笔试题
2012/03/27 面试题
Java程序员常见面试题
2015/07/16 面试题
本科生自荐信
2014/06/18 职场文书
入股合作协议书
2014/10/12 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书