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

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

composant swiper pour implémenter un graphique carrousel

wx:for instruction de boucle

Connaissance de base de l'applet WeChat

2. Principe de mise en ?uvre

Tout d'abord, jetons un coup d'?il à cette fonction de requête

wx.request({
 url: '******', //這里填寫你的接口路徑
 header: { //這里寫你借口返回的數(shù)據(jù)是什么類型，這里就體現(xiàn)了微信小程序的強(qiáng)大，直接給你解析數(shù)據(jù)，再也不用去尋找各種方法去解析json，xml等數(shù)據(jù)了
  'Content-Type': 'application/json'
 },
 data: {//這里寫你要請求的參數(shù)
  x: '' ,
  y: ''
 },

 success: function(res) {
 //這里就是請求成功后，進(jìn)行一些函數(shù)操作
 console.log(res.data)
 }
})

3. ??>

Vue éclatée

<1>Tout d'abord, le début du format json des données de l'interface Zhihu dans le précédent paragraphe

 "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>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數(shù)據(jù)，存在名字叫zhihu的這個(gè)數(shù)組中
   that.setData({
   zhihu: res.data.stories,
   //res代表success函數(shù)的事件對，data是固定的，stories是是上面json數(shù)據(jù)中stories

   })
  }
 })


 }
})

<3> ;

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

dans index.wxml Après avoir lu ce code, vous réfléchirez, selon le principe de liaison de l'applet WeChat, où appeler le code ici ? Vous n'avez pas à trop penser à la fonction onLoad(). L'applet WeChat omet ces étapes pour vous. Appelez simplement le tableau Zhihu directement.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus de mini-programmes WeChat qui affichent des données json dans des exemples de mini-programmes via l'interface API, veuillez faire attention au site Web PHP chinois pour les articles connexes?!