快速实现天气应用（iVX中API的使用）

迷南。 2022-10-05 00:56 185阅读 0赞

# 一、前言 #

在上一篇，我们完成了一个新闻应用，但是数据是自己手动添加的。这样比较麻烦，在本文我们将使用iVX的API功能，直接获取网络数据。

上一篇的链接如下：[iVx实现页面简易新闻应用][iVx]，如果没看过上一篇内容也不影响本篇内容的观看。

可能有些读者对iVx还不了解，这里简单说一下。iVx是一款强大、效、易学的零代码开发语言& 全生命周期一站式云原生应用开发工具。

iVX开发出来的应用，既可以在云端自动部署（自动支持微服务+Serverless模式），又可以导出后部署到自己的私有云。

使用iVx可以极大减少开发的周期，方便个人和企业。

如果对iVX不了解，可以访问官网：[https://www.ivx.cn/][https_www.ivx.cn]。

# 二、api介绍 #

api其实就是一个提供数据的url，我们给这个url提供参数，然后这个url给我们返回我们想要的数据。比如下面这个url：[http://wthrcdn.etouch.cn/weather\_mini?citykey=101010100][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中使用了。

我们在[后台][Link 1]创建一个应用：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center]  
这一步相信不需要多说了。

下面我们来添加页面，并添加API：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 1]  
API的位置在左上角。我们点击API看看有什么东西需要设置：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 2]  
我们从上到下依次看下去。第一个是我们API的url，也就是前面提到的：[http://wthrcdn.etouch.cn/weather\_mini][http_wthrcdn.etouch.cn_weather_mini]。这里需要注意，我们把问号后面的内容去除了，这是因为问号后面的是参数部分，这里可以不填写。

第二个是请求方式，请求方式最常用的两种是GET和POST。像上面用问号拼接参数的方式就是GET请求。

第三个就是我们的请求参数，这个API只有一个参数，我们填写就好了。填写完成后点击调试就能看到返回的数据。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 3]  
在下面有一个保存结果结构的按钮，这相当于帮我们把结构转换成一个对象，在后面会方便我们使用。也正是因为这个原因，我们不需要很熟练json数据的格式也能使用。

# 四、调用API #

调用API很简单，我们今天来实现一个天气应用，因此我们先写好布局。这部分内容就不详细说了，大家可以自行设计。布局大致如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 4]  
接下来就是请求我们的API并绑定数据了。我们给页面添加事件，当页面显示时调用API，然后我们可以在回调函数种进行数据的绑定。这里需要注意，我们调用API是可以传递参数的，但是这里展示我们先不传。默认情况是请求北京的天气：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 5]  
接下来绑定数据。我们让城市文本框绑定我们的城市数据，我们观察json数据的一部分：

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

可以看到，我们返回数据的data属性的city属性是我们的城市信息，我们可以手动绑定，如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 6]  
然后我们观察json数据，可以看到当天天气在forecast数组的第一个，因此我们需要选择如下内容如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 7]  
其余大部分是一样的，这里就不详细说了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 8]  
效果如图。但是现在我们未来天气数据还没有绑定。下面我们来看看未来数据怎么绑定。

因为未来数据是重复的，因此我们可以考虑用循环容器。这里我们先添加一个对象数组，结构如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 9]

这里结构的字段正好和单日天气的字段对应。然后我们在页面显示事件种添加一些内容：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 10]

这里我们把forecast的值赋值给了对象数组，现在对象数组有了值，要使用循环容器就简单多了。

我们将循环容器和对象数组进行绑定：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 11]  
然后再绑定各个文本框，最终实现效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 12]  
可以看到未来天气正常显示了。接下来我们还可以美化一下我们的应用：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 13]  
这里我们添加了一个条件，当当天天气为多云时我们给页面换成相应的背景。这里只设置了一个，效果图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 14]  
另外我们还可以添加一个选择城市的功能，大家可以自行研究一下。

[iVx]: https://blog.csdn.net/ZackSock/article/details/117401347?spm=1001.2014.3001.5501
[https_www.ivx.cn]: https://www.ivx.cn/
[http_wthrcdn.etouch.cn_weather_mini_citykey_101010100]: http://wthrcdn.etouch.cn/weather_mini?citykey=101010100
[Link 1]: https://www.ivx.cn/workbench?type=workbench
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/f55cf44e682c403ea69ac52d76addb88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/cc7e8701464a4b828b7a1fa544572e6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/b2f8714044d04a8e8bc6e101e5b9056a.png
[http_wthrcdn.etouch.cn_weather_mini]: http://wthrcdn.etouch.cn/weather_mini
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/12e10b17fa0a459b890573a8f3996796.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/e71df187c5b64d94a017af3854be5f86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221005/f5c644b926b74baba86c41c9c4af9714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221005/71098e5258a94faabca922f73f6b7cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221005/9bc7305d48974135987377ab08a31c3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221005/d49425022e3a4f51aed7467c2694e720.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221005/0913b1ab0ebb4c0793578c20fb9a1eb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 10]: https://img-blog.csdnimg.cn/2021060613493452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 11]: https://img-blog.csdnimg.cn/20210606135055417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 12]: https://img-blog.csdnimg.cn/2021060613540374.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/20210606141207195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 14]: https://img-blog.csdnimg.cn/20210606141334503.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr,size_16,color_FFFFFF,t_70#pic_center