Heim  >  Artikel  >  WeChat-Applet  >  Das WeChat-Applet zeigt dem Applet JSON-Daten über die API-Schnittstelle an

Das WeChat-Applet zeigt dem Applet JSON-Daten über die API-Schnittstelle an

不言
不言Original
2018-06-23 17:30:572608Durchsuche

In diesem Artikel wird hauptsächlich das Beispiel des WeChat-Applets für die Anzeige von JSON-Daten über die API-Schnittstelle vorgestellt. Der Inhalt ist jetzt recht gut und dient als Referenz.

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

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

1. Verwendete Wissenspunkte

f35d6e602fd7d0f0edfa6f7d103c1b57 wx.request-Anfrageschnittstellenressource (der Anfrageinitiierungsteil in der WeChat-Applet-API)

2cc198a1d5eb0d3eb508d858c9f5cbdbSwiper-Komponente zur Implementierung eines Karusselldiagramms

5bdf4c78156c7953567bb5a0aef2fc53wx:for-Schleifenanweisung

23889872c2e8594e0f446a471a78ec4cGrundkenntnisse des WeChat-Applets

2. Implementierungsprinzip

Werfen wir zunächst einen Blick auf diese Anforderungsfunktion

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

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

3. Code

Explosionsansicht

f35d6e602fd7d0f0edfa6f7d103c1b57Zunächst der Anfang des JSON-Formats der vorherigen Zhihu-Schnittstellendaten

 "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

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

in index.wxml Nach dem Lesen dieses Codes werden Sie sich nach dem Bindungsprinzip des WeChat-Applets fragen, wo die Funktion onLoad() aufgerufen wird Code hier? 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie den dreistufigen Verknüpfungsselektor des WeChat-Applets

Java zur Implementierung der WeChat-Applet-Anmeldung Statuspflege

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet zeigt dem Applet JSON-Daten über die API-Schnittstelle an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn