WeChat 애플릿은 API 인터페이스 예를 통해 애플릿에 json 데이터를 표시합니다.

이 글에서는 API 인터페이스를 통해 json 데이터를 애플릿에 표시하는 WeChat 애플릿의 예를 주로 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다.

Zhihu 클라이언트를 구현하기 위한 중요한 지식 전제 조건은 Zhihu News의 인터페이스를 통해 WeChat 애플릿에 데이터를 표시하는 방법을 아는 것입니다.

그러면 먼저 인터페이스에서 얻은 데이터를 WeChat 애플릿에 표시하는 방법을 알아보겠습니다.

1. 사용된 지식 포인트

wx.request 요청 인터페이스 리소스(WeChat 애플릿 API의 요청 시작 부분)

캐러셀 차트 구현을 위한 스와이프 컴포넌트

wx:for 루프문

WeChat 애플릿 기본 지식

2. 구현 원리

먼저 이 요청 기능을 살펴보겠습니다

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

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

3.

분해도

<1>우선 이전 Zhihu 인터페이스 데이터의 json 형식의 시작

 "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数据，存在名字叫zhihu的这个数组中
   that.setData({
   zhihu: res.data.stories,
   //res代表success函数的事件对，data是固定的，stories是是上面json数据中stories

   })
  }
 })


 }
})

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

이 코드를 읽고 나면 WeChat 애플릿의 바인딩 원칙에 따라 여기 코드에서 onLoad() 함수가 어디에 호출되는지 생각할 것입니다. 필요한 경우 WeChat 애플릿을 사용하면 이러한 단계를 줄일 수 있습니다. zhihu 배열을 직접 호출하면 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

API 인터페이스를 통해 json 데이터를 미니 프로그램 예제로 표시하는 더 많은 WeChat 미니 프로그램을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!