一、前言

在上一篇，我們完成了一個新聞應用，但是資料是自己手動添加的，這樣比較麻煩，在本文我們將使用iVX的API功能，直接獲取網路資料，

上一篇的鏈接如下：iVx實作頁面簡易新聞應用，如果沒看過上一篇內容也不影響本篇內容的觀看，

可能有些讀者對iVx還不了解，這里簡單說一下，iVx是一款強大、效、易學的零代碼開發語言& 全生命周期一站式云原生應用開發工具，

iVX開發出來的應用，既可以在云端自動部署（自動支持微服務+Serverless模式），又可以匯出后部署到自己的私有云，

使用iVx可以極大減少開發的周期，方便個人和企業，

如果對iVX不了解，可以訪問官網：https://www.ivx.cn/，

二、api介紹

api其實就是一個提供資料的url，我們給這個url提供引數，然后這個url給我們回傳我們想要的資料，比如下面這個url：http://wthrcdn.etouch.cn/weather_mini?citykey=101010100，這里我們傳遞了一個citykey引數，訪問這個url可以看到下面的內容：

{
    "data": {
        "yesterday": {
            "date": "5日星期六",
            "high": "高溫 34℃",
            "fx": "西北風",
            "low": "低溫 18℃",
            "fl": "<![CDATA[2級]]>",
            "type": "多云"
        },
        "city": "北京",
        "forecast": [
            {
                "date": "6日星期天",
                "high": "高溫 33℃",
                "fengli": "<![CDATA[2級]]>",
                "low": "低溫 20℃",
                "fengxiang": "東風",
                "type": "多云"
            },
            {
                "date": "7日星期一",
                "high": "高溫 28℃",
                "fengli": "<![CDATA[3級]]>",
                "low": "低溫 19℃",
                "fengxiang": "東風",
                "type": "陰"
            },
            {
                "date": "8日星期二",
                "high": "高溫 31℃",
                "fengli": "<![CDATA[2級]]>",
                "low": "低溫 21℃",
                "fengxiang": "東北風",
                "type": "陰"
            },
            {
                "date": "9日星期三",
                "high": "高溫 29℃",
                "fengli": "<![CDATA[2級]]>",
                "low": "低溫 19℃",
                "fengxiang": "北風",
                "type": "小雨"
            },
            {
                "date": "10日星期四",
                "high": "高溫 31℃",
                "fengli": "<![CDATA[2級]]>",
                "low": "低溫 20℃",
                "fengxiang": "東風",
                "type": "陰"
            }
        ],
        "ganmao": "感冒易發期，外出請適當調整衣物，注意補充水分，",
        "wendu": "32"
    },
    "status": 1000,
    "desc": "OK"
}

這種資料格式叫做json資料，這里我們簡單說一下，

其中{}表示物件，這個和我們編程語言中的物件很相似，[]表示的是陣列，我們可以通過下標獲取內容，而"key":value表示的是屬性，

關于json資料更多的內容這里不詳細說了，感興趣的讀者可以查閱相關內容，其實使用iVx我們也不需要對json資料有很深入的了解，后面我們會看到，

三、在iVx中使用API

當我們調好API后，就可以在iVx中使用了，

我們在后臺創建一個應用：

在這里插入圖片描述
這一步相信不需要多說了，

下面我們來添加頁面，并添加API：

在這里插入圖片描述
API的位置在左上角，我們點擊API看看有什么東西需要設定：

在這里插入圖片描述
我們從上到下依次看下去，第一個是我們API的url，也就是前面提到的：http://wthrcdn.etouch.cn/weather_mini，這里需要注意，我們把問號后面的內容去除了，這是因為問號后面的是引數部分，這里可以不填寫，

第二個是請求方式，請求方式最常用的兩種是GET和POST，像上面用問號拼接引數的方式就是GET請求，

第三個就是我們的請求引數，這個API只有一個引數，我們填寫就好了，填寫完成后點擊除錯就能看到回傳的資料，

在這里插入圖片描述
在下面有一個保存結果結構的按鈕，這相當于幫我們把結構轉換成一個物件，在后面會方便我們使用，也正是因為這個原因，我們不需要很熟練json資料的格式也能使用，

四、呼叫API

呼叫API很簡單，我們今天來實作一個天氣應用，因此我們先寫好布局，這部分內容就不詳細說了，大家可以自行設計，布局大致如下：

在這里插入圖片描述
接下來就是請求我們的API并系結資料了，我們給頁面添加事件，當頁面顯示時呼叫API，然后我們可以在回呼函式種進行資料的系結，這里需要注意，我們呼叫API是可以傳遞引數的，但是這里展示我們先不傳，默認情況是請求北京的天氣：

在這里插入圖片描述
接下來系結資料，我們讓城市文本框系結我們的城市資料，我們觀察json資料的一部分：

{
    "data": {
        "yesterday": {
            "date": "5日星期六",
            "high": "高溫 34℃",
            "fx": "西北風",
            "low": "低溫 18℃",
            "fl": "<![CDATA[2級]]>",
            "type": "多云"
        },
        "city": "北京",
        "forecast": [