Teilen Sie ein Beispiel-Tutorial zum Anzeigen von JSON-Daten über die API-Schnittstelle

In diesem Artikel wird hauptsächlich das Beispiel des WeChat-Applets vorgestellt, bei dem JSON-Daten über die API-Schnittstelle im Applet angezeigt werden. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Eine wichtige Wissensvoraussetzung für die Implementierung des Zhihu-Clients besteht darin, zu wissen, wie man Daten im WeChat-Applet über die Schnittstelle von Zhihu News anzeigt.

Also lernen wir zunächst, wie man die von der Schnittstelle erhaltenen Daten im WeChat-Applet anzeigt.

1. Verwendete Wissenspunkte

<1> wx.request-Anfrageschnittstellenressource (der Anfrageinitiierungsteil in der WeChat-Applet-API)

<2>Swiper-Komponente zur Implementierung eines Karusselldiagramms

<3>wx:for-Schleifenanweisung

<4>Grundkenntnisse des WeChat-Applets

2. Implementierungsprinzip

Werfen wir zunächst einen Blick auf die Anforderungsfunktion

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

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

3. Code

Explosionsansicht

<1> Zuerst der Beginn des JSON-Formats der vorherigen Zhihu-Schnittstellendaten

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

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

   })
  }
 })

 }
})

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

Nachdem Sie diesen Code gelesen haben, Sie werden sich nach dem Bindungsprinzip des WeChat-Applets fragen, wo die Funktion onLoad() hier im Code aufgerufen wird. Denken Sie nicht zu viel nach, das WeChat-Applet lässt diese Schritte für Sie weg. Rufen Sie einfach das Zhihu-Array direkt auf.

[Verwandte Empfehlungen]

1. Drei Methoden zum Parsen von JSON-Daten in JavaScript

2. Über Dianping.com Erfahrungsaustausch in Datenerfassung während der Programmentwicklung

3. Detaillierte Erläuterung von Beispielen für die Referenzierung anderer js-Dateien in der WeChat-Entwicklung

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel-Tutorial zum Anzeigen von JSON-Daten über die API-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!