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

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

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

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

1. 사용된 지식 포인트

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

2cc198a1d5eb0d3eb508d858c9f5cbdbswiper는 캐러셀 차트를 구현하는 구성 요소입니다

5bdf4c78156c7953567bb5a0aef2fc53wx:for 루프문

23889872c2e8594e0f446a471a78ec4cWeChat 애플릿 기본 지식

2. 구현 원리

먼저, 요청 함수를 살펴보겠습니다

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

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

3. 다이어그램

f35d6e602fd7d0f0edfa6f7d103c1b57우선 Zhihu 인터페이스 데이터의 json 형식 시작

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

2cc198a1d5eb0d3eb508d858c9f5cbdbindex.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

   })
  }
 })


 }
})

5bdf4c78156c7953567bb5a0aef2fc53index.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 배열을 직접 호출하면 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat 애플릿 3단계 연결 선택기를 사용하는 방법

java를 사용하여 WeChat 애플릿 로그인 상태 유지 관리를 구현하는 방법

위 내용은 WeChat 애플릿은 API 인터페이스를 통해 애플릿에 json 데이터를 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!