How to display json data in Mini Program through api interface
Today, the editor will share with you the relevant knowledge points about how to show json data to 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.
How to display the data obtained by the interface to WeChat Mini Programs.
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://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"]," type ": 0," id ": 8975316," ga_prefix ":" 111422 "," title ":" small things I am just like you "}, {" images ": [" http://jb51.net/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 to 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.
