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

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

先上效果

開始寫代碼：

1：找打一個免費(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代碼,寫一個request請求，把準(zhǔn)備好的天氣接口放在url里面羡洁，當(dāng)請求成功的時候玷过，在控制臺打印一下返回的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)
       
      }
    })

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

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

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

在使用組件的時候，需要在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({
          //第一個data為固定用法贞间，第二個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.reibang.com/u/05f416aefbe1
90后前端妹子，愛編程雹仿，愛運(yùn)營增热，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚胧辽。
歡迎關(guān)注【編程微刊】公眾號钓葫，回復(fù)【領(lǐng)取資源】,500G編程學(xué)習(xí)資源干貨免費(fèi)送。