The WeChat applet presents json data to the applet example through the api

Source: Internet
Author: User
This article mainly introduces how small programs use api interfaces to display json data to small program examples. I think this is a good example. I will share it with you and give you a reference. Let's take a look at this article with a look at the small program through the api interface to show json data to the small program example. The small editor thinks it is quite good. now I will share it with you, I would also like to give you a reference. Let's take a look at it with Xiaobian.

An important prerequisite for implementing Zhihu client is to know how to display data to the applet through Zhihu news interface.

First, let's learn how to display the data obtained by the interface to a applet.

1. knowledge points used

<1> wx. request api resource (initiate request in applet api)

<2> swiper implements the carousel chart component

<3> wx: for loop statement

<4> basic knowledge of applets

2. implementation principle

First, let's take a look at this request function.

Wx. request ({url: '*******', // enter your interface Path header here: {// enter the data type you want to return on the pretext, this shows the power of small programs. it directly parses data for you, and you no longer need to look for various methods to parse json, xml, and other data 'content-type ': 'application/json'}, data: {// here write the parameter x: '', y:''}, success: function (res) you want to request) {// here, some function operations are performed on the console after the request is successful. log (res. data )}})

3. code

Breakdown Chart

<1> first, the beginning of the preceding section in json format of Zhihu interface data

"Date": "20161114", "stories": [{"images": ["http://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"], "type": 0, "id": 8975316, "ga_prefix ": "111422", "title": "Things I'm just like you"}, {"images": ["http://jb51.net/7c908a5940384123fd88287dbc6a2c98.jpg"], "type": 0, "id ": 8977438, "ga_prefix": "111421", "title": "growing up. who said it means it must grow up? "},

<2> index. js

Page ({data: {duration: 2000, indicatorDots: true, autoplay: true, interval: 3000, loading: false, plain: false}, onLoad: function () {var that = this // do not miss this sentence. it is important that wx. request ({url: 'http: // news-at.zhihu.com/api/4/news/latest', headers: {'content-type': 'application/json'}, success: function (res) {// The obtained json data is included in the array named zhihu. setData ({zhihu: res. data. stories, // res indicates the success function event pair, data is fixed, and stories is the stories in the preceding json data })}})}})

<3> index. wxml

 
  
   
// The attributes here are not important.
     
       
        
     
      
{Item. title }}
       
     
   
  
 

After reading this code, you will think about where the code here calls the onLoad () function based on the binding principle of the applet. you don't need to think about it. the applet will omit these steps for you. Call the zhihu array directly.

The above is all the content of this article. I hope it will help you learn and support PHP.

More small programs use api interfaces to display json data to small program examples. For more information, see PHP!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.