API 인터페이스를 통해 json 데이터를 표시하는 방법에 대한 예제 튜토리얼 공유

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

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

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

1. 사용된 지식 포인트

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

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

<3>wx:for 루프문

<4>WeChat 애플릿 기본 지식

2. 구현 원리

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

rree

3. 코드

분해도

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

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

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

< ;2>index.js

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

<3> index.wxml

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

   })
  }
 })

 }
})

이 코드를 읽고 나면 다음과 같은 생각이 들 것입니다. WeChat 프로그램의 바인딩 원리, 여기 코드의 onLoad() 함수는 어디에서 호출됩니까? 너무 많이 생각하지 마세요. WeChat 애플릿에서는 이러한 단계를 생략합니다. zhihu 배열을 직접 호출하면 됩니다.

[관련 추천]

1. JSON 데이터를 JavaScript로 파싱하는 세 가지 방법

2. Dianping.com 소개 경험 공유 프로그램 개발 중 데이터 수집

3.

WeChat 개발 시 다른 js 파일을 참조하는 예시에 대한 자세한 설명

위 내용은 API 인터페이스를 통해 json 데이터를 표시하는 방법에 대한 예제 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!