博维数孪CreateTwins—案例教程—案例实战(获取天气信息)

获取天气信息

案例展示

点击查看案例

功能列表：

• 选择城市查询当天的天气情况
• 调用第三方API获取天气信息
• 从返回的天气信息数据中提取信息进行显示

本章知识点：

• 获取下拉列表控件的列表值
• 获取下拉列表控件的列表项
• 在字典中查找元素
• 构造http请求
• 将文本转化为字典
• 在事件蓝图中调用其它的事件蓝图
• 使用选择分支
• 替换文本
• 获取当前月份
• 去除字符串中的空格
• 根据关键字分割文本

开始我们的制作吧

准备素材

上传UI素材，点我下载

相关链接：

导入/上传资源

画布设置

相关链接：

场景属性-画布设置

背景图设置

相关链接：

案例教程-3D基础篇-添加背景-设置背景图

创建2D对象

创建相应的UI组件，放置到相应的位置，之后相应的文本，图片会被动态获取的数据替换

设置下拉菜单

最终效果：

制作交互

变量

创建文本类型变量

var_txt_windinfo：用于存放风力信息

var_txt_lowtemp：用于存放最低温度

var_txt_date：用于存放日期

var_txt_hightemp：用于存放最高温度

创建字典类型变量

var_dic_weatherInfo：用于存放从第三方获取的天气信息

var_dic_todayWeatherInfo：用于存放今日的天气信息

相关链接：

蓝图-变量-字典

天气数据分析

以GET方式调用获取简单天气信息API：http://wthrcdn.etouch.cn/weather_mini?city=成都

此接口以json格式返回数据，数据示例如下：

返回的json数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

{     "data": {         "yesterday": {             "date": "17日星期二",             "high": "高温 26℃",             "fx": "北风",             "low": "低温 23℃",             "fl": "<![CDATA[2级]]>",             "type": "大雨"         },         "city": "成都",         "forecast": [             {                 "date": "18日星期三",                 "high": "高温 27℃",                 "fengli": "<![CDATA[2级]]>",                 "low": "低温 23℃",                 "fengxiang": "北风",                 "type": "中雨"             },             {                 "date": "19日星期四",                 "high": "高温 30℃",                 "fengli": "<![CDATA[2级]]>",                 "low": "低温 23℃",                 "fengxiang": "东北风",                 "type": "小雨"             },             {                 "date": "20日星期五",                 "high": "高温 30℃",                 "fengli": "<![CDATA[2级]]>",                 "low": "低温 23℃",                 "fengxiang": "东北风",                 "type": "阵雨"             },             {                 "date": "21日星期六",                 "high": "高温 32℃",                 "fengli": "<![CDATA[1级]]>",                 "low": "低温 23℃",                 "fengxiang": "东北风",                 "type": "小雨"             },             {                 "date": "22日星期天",                 "high": "高温 28℃",                 "fengli": "<![CDATA[3级]]>",                 "low": "低温 21℃",                 "fengxiang": "北风",                 "type": "小雨"             }         ],         "ganmao": "感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。",         "wendu": "24"     },     "status": 1000,     "desc": "OK" }

我们需要提取的数据为"data"中包含的数据

以提取当天的温度为例:

• 从返回数据中，获取关键字为”data“的数据
• 再从”data“中获取关键字为”wendu“的数据
• 获取到对应的值为”24“

以获取当天的日期为例：

• 从”data“数据段下，获取关键字为”forecast“的数据（天气信息）
• 再从”forecast“中获取第一段数据（今天的天气信息）
• 再从今天的天气信息中，获取关键字为”date“的数据
• 获取到对应的值为”18日星期三“

其它数据的获取方式以此类推

蓝图事件

创建事件”getWeatherInfo“，用于获取天气

构造http请求：

• 填写接口地址
• 设置请求方式为GET，参数格式为form-data
• 构造请求参数

数据处理：

• 从返回数据中提取出data（查找字典）
• 将提取结果赋给var_weatherInfo

从下拉菜单中获取列表项：返回{"0":"成都","1":"北京","2":"上海"}

从下拉菜单中获取列表值（假设当前值为成都）：返回“0”

将0作为关键字放到{"0":"成都","1":"北京","2":"上海"}中查找，得到“成都”

将"city"与“成都”构造成键值对，再将构建键值转换成字典，得到{"city":"成都"}，将构建好的字典做为请求参数即可

通过序列模块，将事件的执行过程分解得更清晰，通过执行事件模块，可以调用其它蓝图事件（避免一个蓝图事件里模块过多）

相关链接：

蓝图-变量-字典-查找

蓝图-节点-网络请求

创建事件"fillBasicInfo"，填充温度，调用"getTodayWeatherInfo"

创建事件“getTodayWeatherInfo"，获取今日的天气信息（获取forcast数组中的第一项），并从今日天气中进行风力，温度，日期等信息的处理

相关链接：

蓝图-变量-列表-索引列表

创建事件“procesWindInfo"，处理风力，风向等信息

通过提取后，得到的原始fengli数据为：<![CDATA[2级]]>，我们希望得到的是2级，需要去除多余的字符，使用文本替换模块，将多余的字符替换成空白即可

相关链接：

蓝图-变量-文本-替换文本

创建事件“procesLHTemp"，处理最低，最高温度

提取出的原始文本为："高温 27℃", "低温 23℃"，因为空格不在首或尾，无法通过文本模块中提供的”去除首尾空格“去除

我们希望去除中间的空格，使用文本替换，在”子文本“中输入一个空格，保持”替换文本“为空，将空格去除

创建事件"processTime"，处理日期，时间

提取出的原始日期为：”19日星期四“，我们希望能显示为“8月19日”，并且将“星期四”提取出来，显示在别的位置

• 从“var_dic_todayWeatherInfo”中提取“date”
• 使用时间模块获取当前日期的月（假设返回“8”）
• 拼接文本“8”和“月”，得到“8月”
• 使用文本分割模块，按关键字“日”，对”19日星期四“进行分割，得到列表["19","星期四"]
• 从列表中取出索引为0的值，得到”19“
• 拼接文本”19“和”日”，得到“19日”
• 再将“8月”与“19日”拼接，得到“8月19日”
• 从列表中取出索引为1的值，得到“星期四"

相关链接：

蓝图-变量-日期时间

蓝图-变量-文本-拼接文本

蓝图-变量-文本-分割文本

创建事件”fillTodayWeatherInfo"，填充最低温度，最高温度，日期，风力等级，风向等信息

使用分支来对当前的天气类别做判断，将节点的背景图换成对应的图片

相关链接：

蓝图-节点-流程控制-选择分支