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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

wx.request({

 url: '******', //这里填写你的接口路径

 header: { //这里写你借口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了

  'Content-Type': 'application/json'

 },

 data: {//这里写你要请求的参数

  x: '' ,

  y: ''

 },

 success: function(res) {

 //这里就是请求成功后，进行一些函数操作

 console.log(res.data)

 }

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

"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":"成长嘛，谁说就意味着一定要长大了？"

 },

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

Page({

 data: {

  duration: 2000,

  indicatorDots: true,

  autoplay: true,

  interval: 3000,

  loading: false,

  plain: false

 },

 onLoad: function () {

 var that = this//不要漏了这句，很重要

 wx.request({

  url: 'http://news-at.zhihu.com/api/4/news/latest',

  headers: {

  'Content-Type': 'application/json'

  },

  success: function (res) {

  //将获取到的json数据，存在名字叫zhihu的这个数组中

   that.setData({

   zhihu: res.data.stories,

   //res代表success函数的事件对，data是固定的，stories是是上面json数据中stories

   })

  }

 })

 }

})

1

2

3

4

5

6

7

8

9

10

11

12

<view >

<swiper indicator-dots="{{indicatorDots}}"

 autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">//这里边的属性不重要，看下边

 <block wx:for="{{zhihu}}">

  <swiper-item class="banner" >

   <image src="{{item.image}}" data-id="{{item.b}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>

   <text class="banner-title">{{item.title}}</text>

  </swiper-item>

 </block>

</swiper>

</view>