Quickly implement weather applications (use of API in iVX)

I. Introduction

In the previous article, we completed a news application, but the data was manually added by ourselves. This is more troublesome. In this article, we will use the iVX API function to directly obtain network data.

The link to the previous article is as follows: iVx implements a simple news application on the page . If you have not read the previous article, it will not affect the viewing of this article.

Some readers may not know iVx yet, here is a brief introduction. iVx is a powerful, effective, and easy-to-learn zero-code development language & one-stop cloud native application development tool for the full life cycle.

Applications developed by iVX can be automatically deployed in the cloud (automatically supporting microservices + serverless mode), or exported and deployed to your own private cloud.

Using iVx can greatly reduce the development cycle, which is convenient for individuals and enterprises.

If you are not familiar with iVX, you can visit the official website: https://www.ivx.cn/ .

Two, api introduction

API is actually a url that provides data. We provide parameters to this url, and then this url returns us the data we want. For example, the following url: http://wthrcdn.etouch.cn/weather_mini?citykey=101010100 . Here we pass a citykey parameter, visit this url to see the following content:

{
    "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"
}

This data format is called json data, let's briefly talk about it here.

Where {} represents an object, which is very similar to an object in our programming language. [] means an array, we can get the content through the subscript. The "key": value represents the attribute.

More content about json data is not detailed here, interested readers can refer to related content. In fact, we don't need to have a deep understanding of json data to use iVx. We will see later.

Three, use API in iVx

After we adjust the API, it can be used in iVx.

We create an application in the background :

Insert picture description here


I believe this step need not be said more.

Let's add a page and add an API:

Insert picture description here


The location of the API is in the upper left corner. We click on API to see what needs to be set:

Insert picture description here


Let's look at it from top to bottom. The first is the url of our API, which is mentioned earlier: http://wthrcdn.etouch.cn/weather_mini . It should be noted here that we have removed the content after the question mark. This is because the part after the question mark is the parameter part, which can be omitted here.

The second is the request method. The two most commonly used request methods are GET and POST. The way to splice parameters with question marks above is a GET request.

The third is our request parameter. This API has only one parameter, so we just fill it in. After filling in, click Debug to see the returned data.

Insert picture description here


Below there is a button to save the result structure, which is equivalent to helping us convert the structure into an object, which will be convenient for us to use later. It is for this reason that we do not need to be very familiar with the format of json data to be able to use it.

Four, call the API

Calling the API is very simple. Let's implement a weather application today, so let's write the layout first. This part of the content will not be explained in detail, you can design by yourself. The layout is roughly as follows:

Insert picture description here


The next step is to request our API and bind the data. We add events to the page, call the API when the page is displayed, and then we can bind the data in the callback function. It should be noted here that we can pass parameters when we call the API, but we will not pass them first to show here. The default is to request the weather in Beijing:

Insert picture description here


Next, bind the data. We let the city text box bind our city data, and we observe part of the json data:

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

As you can see, the city attribute of the data attribute we return to the data is our city information, and we can bind it manually, as shown in the figure:

Insert picture description here


Then we observe the json data, we can see that the weather of the day is the first in the forecast array, so we need to select the following content as follows:

Insert picture description here


Most of the rest are the same, so I won't go into details here.

Insert picture description here


The effect is shown in the figure. But now our future weather data has not yet been bound. Let's take a look at how to bind future data.

Because future data will be repeated, we can consider using circular containers. Here we first add an array of objects, the structure is as follows:

Insert picture description here

The field of the structure here corresponds to the field of the single-day weather. Then we add some content to the page display event:

Insert picture description here

Here we assign the value of forecast to the object array. Now that the object array has a value, it is much easier to use a loop container.

We bind the loop container and the object array:

Insert picture description here


Then bind each text box, and the final effect is as follows:

Insert picture description here


You can see that the weather will be displayed normally in the future. Next, we can also beautify our application:

Insert picture description here


here we add a condition, when the weather is cloudy that day, we change the page to the corresponding background. Only one is set here, and the renderings are as follows:

Insert picture description here


In addition, we can also add a function to select a city, you can study it yourself.