小程序模板網(wǎng)

通過api接口將json數(shù)據(jù)展現(xiàn)到小程序示例

發(fā)布時(shí)間:2018-04-21 09:05 所屬欄目:小程序開發(fā)教程

實(shí)現(xiàn)知乎客戶端的一個(gè)重要知識前提就是,要知道怎么通過知乎新聞的接口,來把數(shù)據(jù)展示到微信小程序端上。

那么我們這一就先學(xué)習(xí)一下,如何將接口獲取到的數(shù)據(jù)展示到微信小程序上。

1.用到的知識點(diǎn)

<1> wx.request 請求接口資源(微信小程序api中的發(fā)起請求部分) 

<2>swiper 實(shí)現(xiàn)輪播圖的組件 

<3>wx:for 循環(huán)語句 

<4>微信小程序的基礎(chǔ)知識

2.實(shí)現(xiàn)原理

首先,先看一下這個(gè)請求函數(shù)

 

				
  1. wx.request({
  2. url: '******', //這里填寫你的接口路徑
  3. header: { //這里寫你借口返回的數(shù)據(jù)是什么類型,這里就體現(xiàn)了微信小程序的強(qiáng)大,直接給你解析數(shù)據(jù),再也不用去尋找各種方法去解析json,xml等數(shù)據(jù)了
  4. 'Content-Type': 'application/json'
  5. },
  6. data: {//這里寫你要請求的參數(shù)
  7. x: '' ,
  8. y: ''
  9. },
  10.  
  11. success: function(res) {
  12. //這里就是請求成功后,進(jìn)行一些函數(shù)操作
  13. console.log(res.data)
  14. }
  15. })

3.代碼

分解圖

<1>首先上一段知乎接口數(shù)據(jù)的json格式中的開頭

 

				
  1. "date":"20161114",
  2. "stories":[
  3. {
  4. "images":[
  5. "http://jb51.net.com/76125c357aa7b0ca6c9cbc41b4a5326d.jpg"
  6. ],
  7. "type":0,
  8. "id":8975316,
  9. "ga_prefix":"111422",
  10. "title":"小事 · 我和你們一樣"
  11. },
  12. {
  13. "images":[
  14. "http://jb51.net/7c908a5940384123fd88287dbc6a2c98.jpg"
  15. ],
  16. "type":0,
  17. "id":8977438,
  18. "ga_prefix":"111421",
  19. "title":"成長嘛,誰說就意味著一定要長大了?"
  20. },

<2>index.js中

 

				
  1. Page({
  2. data: {
  3. duration: 2000,
  4. indicatorDots: true,
  5. autoplay: true,
  6. interval: 3000,
  7. loading: false,
  8. plain: false
  9. },
  10. onLoad: function () {
  11. var that = this//不要漏了這句,很重要
  12. wx.request({
  13. url: 'http://news-at.zhihu.com/api/4/news/latest',
  14. headers: {
  15. 'Content-Type': 'application/json'
  16. },
  17. success: function (res) {
  18. //將獲取到的json數(shù)據(jù),存在名字叫zhihu的這個(gè)數(shù)組中
  19. that.setData({
  20. zhihu: res.data.stories,
  21. //res代表success函數(shù)的事件對,data是固定的,stories是是上面json數(shù)據(jù)中stories
  22.  
  23. })
  24. }
  25. })
  26.  
  27.  
  28. }
  29. })

<3> index.wxml中

 

				
  1. <view >
  2. <swiper indicator-dots="{{indicatorDots}}"
  3. autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">//這里邊的屬性不重要,看下邊
  4. <block wx:for="{{zhihu}}">
  5. <swiper-item class="banner" >
  6. <image src="{{item.image}}" data-id="{{item.b}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
  7. <text class="banner-title">{{item.title}}</text>
  8. </swiper-item>
  9. </block>
  10. </swiper>
  11.  
  12. </view>

看完這個(gè)代碼,你會想,根據(jù)微信小程序的綁定原理,這里邊的代碼哪里調(diào)用了onLoad()這個(gè)函數(shù),不用多想,微信小程序給你省略了這些步驟。直接調(diào)用zhihu這個(gè)數(shù)組就行。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23828.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢