> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿은 API 인터페이스를 통해 애플릿에 json 데이터를 표시합니다.

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

不言
풀어 주다: 2018-06-23 17:30:57
원래의
2662명이 탐색했습니다.

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

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

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

1. 사용된 지식 포인트

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

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

<3>wx:for 루프문

<4>WeChat 애플릿 기본 지식

2. 구현 원리

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

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

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

3. 다이어그램


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

 "date":"20161114",
 "stories":[
  {
   "images":[
    "//m.sbmmt.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"
   ],
   "type":0,
   "id":8975316,
   "ga_prefix":"111422",
   "title":"小事 · 我和你们一样"
  },
  {
   "images":[
    "//m.sbmmt.com/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: &#39;http://news-at.zhihu.com/api/4/news/latest&#39;,
  headers: {
  &#39;Content-Type&#39;: &#39;application/json&#39;
  },
  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 배열을 직접 호출하면 됩니다.

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

관련 권장 사항:

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


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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿