Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you how WeChat Mini Programs shows the json data to the relevant knowledge points of Mini Program through the api interface. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. The knowledge points used

Wx.request requests API resources (the initiating request part of WeChat Mini Programs's api)

Realizing the components of Carousel Graph by swiper

Wx:for loop statement

The basic knowledge of WeChat Mini Programs

two。 Realization principle

First, take a look at the request function.

Wx.request ({url:'*', / / fill in your interface path header: {/ / write down the type of data returned under your excuse here, which shows the power of WeChat Mini Programs to parse the data directly for you, and no longer have to find various methods to parse json Xml and other data such as' Content-Type': 'application/json'}, data: {/ / write the parameters you want to request x:'', y:'}, success: function (res) {/ / after the request is successful, perform some function operations console.log (res.data)}})

3. Code

Decomposition graph

First of all, the beginning of the previous paragraph in the json format of the interface data

"date": "20161114", "stories": [{"images": ["http://php.cn/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"]," type ": 0," id ": 8975316," ga_prefix ":" 111422 "," title ":" small things I am just like you "}, {" images ": [" http://php.cn/7c908a5940384123fd88287dbc6a2c98.jpg"], "type": 0 "id": 8977438, "ga_prefix": "111421", "title": "grow Who says it means you have to grow up? " }

In index.js

Page ({data: {duration: 2000, indicatorDots: true, autoplay: true, interval: 3000, loading: false, plain: false}, onLoad: function () {var that = this// Don't miss this sentence It is very important that the json data to be obtained by wx.request ({url: 'http://news-at.zhihu.com/api/4/news/latest', headers: {' Content-Type': 'application/json'}, success: function (res) {/ /) exists that.setData ({zhihu: res.data.stories, / / res represents the event pair of success function in this array called zhihu, data is fixed Stories is the stories in the above json data})}})

In index.wxml

/ / the attributes in this are not important, see below {{item.title}} above is all the content of the article "how does WeChat Mini Programs display json data to Mini Program through api interface". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.