Partagez un exemple de didacticiel sur l'affichage des données JSON via l'interface API

Cet article présente principalement l'exemple de l'applet WeChat d'affichage des données json sur l'applet via l'interface API. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Une condition préalable importante pour la mise en œuvre du client Zhihu est de savoir comment afficher les données sur l'applet WeChat via l'interface de Zhihu News.

Apprenons donc d’abord comment afficher les données obtenues par l’interface sur l’applet WeChat.

1. Points de connaissances utilisés

f35d6e602fd7d0f0edfa6f7d103c1b57 ressource d'interface de requête wx.request (la partie d'initiation de la requête dans l'API de l'applet WeChat)

2cc198a1d5eb0d3eb508d858c9f5cbdbcomposant swiper pour implémenter un graphique carrousel

5bdf4c78156c7953567bb5a0aef2fc53wx:for instruction de boucle

23889872c2e8594e0f446a471a78ec4cConnaissance de base de l'applet WeChat

2. Principe de mise en œuvre

Jetons d'abord un coup d'œil à la fonction de requête

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

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

3. Code

Vue éclatée

f35d6e602fd7d0f0edfa6f7d103c1b57 Tout d'abord, le début du format json des données de l'interface Zhihu précédente

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

2cc198a1d5eb0d3eb508d858c9f5cbdbDans 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 Dans 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>

Après avoir lu ce code, vous vous demanderez, selon le principe de liaison de l'applet WeChat, où la fonction onLoad() est appelée dans le code ici. Ne réfléchissez pas trop, l'applet WeChat omet ces étapes pour vous. Appelez simplement le tableau Zhihu directement.

[Recommandations associées]

1.

Trois méthodes d'analyse des données JSON en JavaScript

2

À propos de Dianping.com Partage d'expérience dans. collecte de données pendant le développement du programme

3

Explication détaillée d'exemples de référencement d'autres fichiers js dans le développement WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!