微信小程序如何调用json数据接口并解析
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
开始写js,用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量。
Page({ data: { list: [] }, onLoad: function (options) { wx.request({ url: 'https://c.y.qq./v8/fcg-bin/fcg_v8_list_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=&id=27&_=1519963122923', header: { 'content-type': 'application/json' }, suess: 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.info.ListName}} <image src="{{list.info.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>
效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:微信小程序如何调用图片接口API并居中显示
下一篇:pm2启动ssr失败的解决方法
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指