微信小程序> 微信小程序通过api接口将json数据展现到小程序示例

微信小程序通过api接口将json数据展现到小程序示例

浏览量:4389 时间: 来源:Luyifei666
这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上。 

那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上。 

1.用到的知识点

1 wx.request 请求接口资源(微信小程序api中的发起请求部分) 

2swiper 实现轮播图的组件 

3wx:for 循环语句 

4微信小程序的基础知识

2.实现原理

首先,先看一下这个请求函数

123456789101112131415wx.request({ url: '******'//这里填写你的接口路径 header: { //这里写你借口返回的数据是什么类型,这里就体现了微信小程序的强大,直接给你解析数据,再也不用去寻找各种方法去解析json,xml等数据了  'Content-Type''application/json' }, data: {//这里写你要请求的参数  x: '' ,  y: '' },  success: function(res) { //这里就是请求成功后,进行一些函数操作 console.log(res.data) }})

3.代码 

分解图 

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

1234567891011121314151617181920"date":"20161114","stories":[ {  "images":[   "http://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"  ],  "type":0,  "id":8975316,  "ga_prefix":"111422",  "title":"小事 · 我和你们一样" }, {  "images":[   "http://jb51.net/7c908a5940384123fd88287dbc6a2c98.jpg"  ],  "type":0,  "id":8977438,  "ga_prefix":"111421",  "title":"成长嘛,谁说就意味着一定要长大了?" },

2index.js中

1234567891011121314151617181920212223242526272829Page({ data: {  duration: 2000,  indicatorDots: true,  autoplay: true,  interval: 3000,  loading: false,  plain: false小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎