五分鐘上手-微信小程序組件庫 iView Weapp
http://www.itdecent.cn/p/09b4515152ff

前兩天寫了關(guān)于組件庫 iView Weapp的教程，其實(shí)也就是把文檔上的例子拿出來體驗(yàn)了一遍，今天寫一個(gè)具體的例子，調(diào)用一個(gè)免費(fèi)的天氣接口的api，并且把所獲取的內(nèi)容展示在前端的界面，前端界面與 iView Weapp結(jié)合，展示的一個(gè)小的demo.

先上效果

開始寫代碼：

1：找打一個(gè)免費(fèi)的天氣接口

免費(fèi)接口api：https://www.apiopen.top/api.html#top
https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7

2：寫js代碼,寫一個(gè)request請求，把準(zhǔn)備好的天氣接口放在url里面，當(dāng)請求成功的時(shí)候，在控制臺(tái)打印一下返回的res.data數(shù)據(jù)

 wx.request({
      url: 'https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
       
      }
    })

這個(gè)時(shí)候可以看到控制臺(tái)已經(jīng)有打印了接口數(shù)據(jù)了

3：接收到了數(shù)據(jù)之后，是對數(shù)據(jù)進(jìn)行處理
在請求接口成功之后，用setData接收數(shù)據(jù)，并且需在data中聲明一個(gè)接收數(shù)據(jù)的變量。

4：js寫完之后，現(xiàn)在開始寫wxml里面的內(nèi)容，將數(shù)據(jù)渲染在界面，前面說用的是組件庫 iView Weapp，樣式可以自己選擇，我這里選了一個(gè)卡片。

在使用組件的時(shí)候，需要在json里面引入一下：

<view class='list-li mflex' wx:for="{{list.forecast}}" wx:key="index">
  <i-card title="{{list.city}}天氣" extra="{{list.city}}" thumb="https://i.loli.net/2017/08/21/599a521472424.jpg">
    <view slot="content">
    {{item.date}} 
    {{item.high}} 
    {{item.low}} 
    </view>
    <view slot="footer">{{list.ganmao}}</view>
  </i-card>
</view>

ok，到這里就完成了。

5：貼一下完整的代碼：
json

{
"usingComponents": {
  "i-card": "../../dist/card/index"
}
}

js:

Page({
  data: {
    list: []
  },

  onLoad: function (options) {

    wx.request({
      url: 'https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        console.log(res.data)
        this.setData({
          //第一個(gè)data為固定用法，第二個(gè)data是json中的data
          list: res.data.data
        })
      }
    })
  },

})

wxml

<view class='list-li mflex' wx:for="{{list.forecast}}" wx:key="index">
  <i-card title="{{list.city}}天氣" extra="{{list.city}}" thumb="https://i.loli.net/2017/08/21/599a521472424.jpg">
    <view slot="content">
    {{item.date}} 
    {{item.high}} 
    {{item.low}} 
    </view>
    <view slot="footer">{{list.ganmao}}</view>
  </i-card>
</view>

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運(yùn)營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
歡迎關(guān)注【編程微刊】公眾號，回復(fù)【領(lǐng)取資源】,500G編程學(xué)習(xí)資源干貨免費(fèi)送。