分享一个通过api接口展示json数据的示例教程(如何通过api接口直接调用数据)

本文主要介绍微信小程序通过api接口向小程序展示json数据的例子。小编感觉挺好的。现在就分享给大家，给大家一个参考。和小编一起来看看吧

实现知乎客户端的一个重要知识前提是知道如何通过知乎新闻的界面将数据展示给微信小程序。

那么我们首先来学习如何将接口获取的数据显示到微信小程序中。

1.使用的知识点

Wx.request请求接口资源（微信小程序api中的发起请求部分）

Swiper实现了轮播图的组件。

Wx:for循环语句

微信小程序基础知识

2.实现原则

首先，让我们看看这个请求函数。

wx . request（{ URL:& amp；#39;* * * * * & amp#39;，//在这里填写你的接口路径头:{//在这里写上你某个借口下返回的是什么类型的数据，可见微信小程序的强大，直接为你解析数据，不用再找各种方法解析json、xml等数据&；#39;内容-类型&amp。#39;:& amp#39;应用/JSON & amp；#39;}，data: {//在这里写你要请求的参数x:&；#39;& amp#39;y:& amp；#39;& amp#39;}，success:function（RES）{//这里是控制台。log（RES . data）}）3。代码。

分解图

首先是上一段中知乎接口数据的json格式开头。

"日期& quot:& quot20161114 & quot，& quot故事& quot:【{ & quot图像& quot:【& quothttp://jb51 . net . com/76125 c 357 aa 7 b 0 ca 6 c 9 CBC 41 B4 a 5326d . jpg & quot；】，& quot键入& quot:0 & quot；id & quot:8975316ga _前缀& quot:& quot111422 & quot，& quot标题& quot:& quot小事，我和你一样“}，{ & quot图像& quot:【& quothttp://jb51.net/7c908a5940384123fd88287dbc6a2c98.jpg"】，& quot键入& quot:0 & quot；id & quot:8977438ga _前缀& quot:& quot111421 & quot，& quot标题& quot:& quot长大，谁说是长大的意思？"}，index.js

page（{ data:{ duration:2000，indicator dots: true，autoplay: true，interval: 3000，loading: false，plain: false}，onload:function（）{ var that = this//不要错过这句话，非常重要wx . request（{ URL:）。#39;http://news -at . zhi Hu . com/API/4/news/latest & amp；#39;，标题:{ & amp#39;内容-类型&amp。#39;:& amp#39;应用/JSON & amp；#39;}，success:function（RES）{//要获取的json数据存储在那个。setdata（{胡志:res.data.stories，//res表示success函数的事件对，数据是固定的，stories是上面json数据中的故事}}}）索引中。

& lt视图& gt& ltswiper指示器-dots = & quot；{ { indicatorDots } } & quot自动播放= & quot{ {自动播放} } & quotclass = & quot横幅& quot间隔= & quot{ { interval } } & quot持续时间= & quot{ {持续时间} } & quot& gt//这里边的属性不重要。看看底部

【相关建议】

1.JavaScript中解析JSON数据的三种方法。

2.大众点评点餐小程序开发过程中数据收集的经验分享。

3.微信开发中引用其他js文件的详细说明。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：分享一个通过api接口展示json数据的示例教程(如何通过api接口直接调用数据) https://zhujicankao.com/113375.html