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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序如何调用json数据接口并解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1669字，纯文字阅读大概需要3分钟。

内容图文

开始写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>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的微信小程序如何调用json数据接口并解析全部内容，希望文章能够帮你解决微信小程序如何调用json数据接口并解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---