微信小程序如何调用json数据接口并解析
(编辑:jimmy 日期: 2024/11/28 浏览: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"text-align: center">这个时候可以看到,应用程序数据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="/UploadFiles/2021-04-02/{{list.topinfo.MacDetailPicUrl}}">渲染成功,显示如下:
3:循环展示songlist的Array内容(100首歌曲排名的api),这里没写布局页面篇幅不够我只展示了albumname的内容,可以根据实际项目需要展示。
wxml
<view wx:for="{{list.songlist}}" wx:key="index"><!-- 取到songlist里面的内容并且进行循环 --> {{item.data.albumname}} </view>效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:pm2启动ssr失败的解决方法
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。