The WeChat applet displays json data to the applet through the API interface

This article mainly introduces the WeChat applet’s example of displaying json data to the applet through the API interface. The content is quite good. I will share it with you now and give it as a reference.

An important knowledge prerequisite for implementing the Zhihu client is to know how to display data on the WeChat applet through the Zhihu News interface.

So let’s first learn how to display the data obtained by the interface on the WeChat applet.

1. Knowledge points used

f35d6e602fd7d0f0edfa6f7d103c1b57 wx.request request interface resource (the request initiation part in the WeChat applet API)

2cc198a1d5eb0d3eb508d858c9f5cbdbswiper component to implement carousel chart

5bdf4c78156c7953567bb5a0aef2fc53wx:for loop statement

23889872c2e8594e0f446a471a78ec4cBasic knowledge of WeChat applet

2. Implementation principle

First, let’s take a look at the request function

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

 success: function(res) {
 //这里就是请求成功后，进行一些函数操作
 console.log(res.data)
 }
})

3. Code

Explosion diagram

f35d6e602fd7d0f0edfa6f7d103c1b57First of all, the beginning of the json format of the previous Zhihu interface data

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

2cc198a1d5eb0d3eb508d858c9f5cbdbIn index.js

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

   })
  }
 })


 }
})

5bdf4c78156c7953567bb5a0aef2fc53 index.wxml

<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>

After reading this code, you will wonder, according to the binding principle of WeChat applet, where does the onLoad() function be called in the code here? , don’t think too much, the WeChat applet omits these steps for you. Just call the zhihu array directly.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use the three-level linkage selector of WeChat applet

Java implements WeChat applet login Status maintenance

The above is the detailed content of The WeChat applet displays json data to the applet through the API interface. For more information, please follow other related articles on the PHP Chinese website!