铁雪资源网 Design By www.gsvan.com

开始写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"text-align: center">微信小程序如何调用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="/UploadFiles/2021-04-02/{{list.topinfo.MacDetailPicUrl}}">

渲染成功,显示如下:

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

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

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

wxml

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

效果如下:

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

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

标签:
微信小程序,调用json数据接口,解析

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

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

暂无微信小程序如何调用json数据接口并解析的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。