快捷導(dǎo)航

微信小程序如何調(diào)用json數(shù)據(jù)接口并解析

更新時(shí)間：2019年06月29日 11:22:38 作者：祈澈菇?jīng)?

這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

開(kāi)始寫(xiě)js，用request請(qǐng)求接口url，當(dāng)請(qǐng)求成功的時(shí)候，在控制臺(tái)打印一下返回的res.data數(shù)據(jù)，在控制臺(tái)可以看到打印了接口數(shù)據(jù)了，在請(qǐng)求接口成功之后，用setData接收數(shù)據(jù)，并且需在data中聲明一個(gè)接收數(shù)據(jù)的變量。

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({
     //第一個(gè)data為固定用法
     list: res.data
     
    })
   }
  })
 },
})

這個(gè)時(shí)候可以看到，應(yīng)用程序數(shù)據(jù)AppData里面，整個(gè)json數(shù)據(jù)全部都已經(jīng)放在了list集合里面了。

js寫(xiě)完之后，現(xiàn)在開(kāi)始寫(xiě)wxml里面的內(nèi)容，將數(shù)據(jù)渲染在界面，這個(gè)我想重點(diǎn)的寫(xiě)一下，因?yàn)閷?duì)于json的處理上是很重要的一個(gè)事情，很多人都會(huì)在解析json的時(shí)候出現(xiàn)這樣或者那樣的問(wèn)題，導(dǎo)致頁(yè)面數(shù)據(jù)渲染不出來(lái)，達(dá)不到自己的預(yù)期效果。

1：取到songlist里面指定的值

比如說(shuō)，我現(xiàn)在想把截圖里面紅色框框里面數(shù)據(jù)渲染到前端

在wxml里面寫(xiě)代碼

<view>
{{list.songlist[2].data.albumdesc}}
</view>

這個(gè)時(shí)候，可以看到小程序界面，頁(yè)面已經(jīng)渲染出了自己想要的數(shù)據(jù)了。

2：想要把json里面的巔峰榜，新歌的數(shù)據(jù)和圖片渲染到頁(yè)面，道理其實(shí)是一樣的。

wxml:

<view>
{{list.topinfo.ListName}}
<image src="{{list.topinfo.MacDetailPicUrl}}" class='in-image'>
</image>
</view>

渲染成功，顯示如下：

3：循環(huán)展示songlist的Array內(nèi)容（100首歌曲排名的api），這里沒(méi)寫(xiě)布局頁(yè)面篇幅不夠我只展示了albumname的內(nèi)容，可以根據(jù)實(shí)際項(xiàng)目需要展示。

wxml

<view wx:for="{{list.songlist}}" wx:key="index"><!-- 取到songlist里面的內(nèi)容并且進(jìn)行循環(huán) -->
{{item.data.albumname}}
</view>

效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 版本自動(dòng)生成文章摘要
搜了搜這個(gè)，發(fā)現(xiàn)找不到答案。所以自己寫(xiě)了一個(gè)，很多程序繞過(guò)這個(gè)問(wèn)題，往往人工來(lái)決定在何處截?cái)?，太麻煩了。
2008-07-07
關(guān)于JS數(shù)據(jù)類(lèi)型檢測(cè)的多種方式總結(jié)
Javascript中檢查數(shù)據(jù)類(lèi)型一直是老生常談的問(wèn)題,類(lèi)型判斷在web開(kāi)發(fā)中也有著非常廣泛的應(yīng)用,所以下面這篇文章主要給大家介紹了關(guān)于JS數(shù)據(jù)類(lèi)型檢測(cè)的那些事,需要的朋友可以參考下
2021-09-09
BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio
這篇文章主要介紹了BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio的相關(guān)資料,需要的朋友可以參考下
2017-05-05
yii form 表單提交之前JS在提交按鈕的驗(yàn)證方法
很多時(shí)候，需要對(duì)Yii表單model中的對(duì)象設(shè)置的rules進(jìn)行判斷，但是有的時(shí)候可能需要在提交之前就在客戶(hù)端進(jìn)行驗(yàn)證。怎么處理呢？接下來(lái)通過(guò)本文給大家分享yii form 表單提交之前JS在提交按鈕的驗(yàn)證方法，需要的的朋友參考下
2017-03-03
將json對(duì)象轉(zhuǎn)換為字符串的方法
這篇文章主要介紹了將json對(duì)象轉(zhuǎn)換為字符串的方法,需要的朋友可以參考下
2014-02-02
D3.js進(jìn)階系列之CSV表格文件的讀取詳解
D3.js支持從外部讀取數(shù)據(jù)進(jìn)行圖形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML數(shù)據(jù)結(jié)構(gòu)，下面這篇文章主要給大家介紹了D3.js中CSV表格文件讀取的相關(guān)資料，需要的朋友可以參考下。
2017-06-06
uniapp圖片展示自適應(yīng)等比例縮放方法舉例
這篇文章主要給大家介紹了關(guān)于uniapp圖片展示自適應(yīng)等比例縮放方法的相關(guān)資料,在uniapp頁(yè)面展示中會(huì)遇到圖片展示問(wèn)題,等比縮放或者自適應(yīng)view大小,需要的朋友可以參考下
2023-10-10
基于 webpack2 實(shí)現(xiàn)的多入口項(xiàng)目腳手架詳解
這篇文章主要給大家介紹了基于 webpack2 實(shí)現(xiàn)的多入口項(xiàng)目腳手架的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加，刪除行的方法實(shí)例詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加，刪除行的方法,較為詳細(xì)的分析了javascript操作table表格實(shí)現(xiàn)針對(duì)表格元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2015-07-07
Rxjs?TakeUntil?操作符內(nèi)容梳理總結(jié)
這篇文章主要介紹了Rxjs?TakeUntil操作符內(nèi)容梳理總結(jié)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06