The WeChat applet presents json data to the applet example through the api interface, apijson

The applet uses the api to display json data to the applet example, apijson

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

<View> <swiper indicator-dots = "{indicatorDots}" autoplay = "{autoplay}" class = "banners" interval = "{interval}" duration = "{duration }}"> // The attribute here is not important, see <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>

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 be helpful for your learning and support for helping customers.