HarmonyOS实战
前言
对于日常的天气类App来说,我们用户应该很少与其进行交互,毕竟都是一些简单的数据,偶尔用到查看即可。
但是,查看7日天气必须打开App非常不方便,如果开发中能够提供一个7日天气卡片到桌面,肯定能获得用户的好感。
所以,今天的内容就是实现一个7日天气的原子化服务。
7日天气的布局
首先,我们肯定需要完善7日天气的布局。
众所周知,7日的天气往往都比较长,那么2*2的卡片肯定是无法满足的。这时候,选择长卡片来实现7日天气往往效果更好。
这里,我们选择2*4的卡片,其index.hml布局代码如下所示:
<div class="card_root_layout"> <image src="common/refresh.png" class="refresh_image" onclick="refresh"/> <list class="weather_list"> <list-item for="{{weatherList}}" class="list_item"> <div class="list_div" onclick="routerEvent"> <text class="list_text">{{$item.wea_day}}</text> <image class="list_image" src="{{$item.image}}"/> <text class="list_text">{{$item.week}}</text> </div> </list-item> </list> </div>
从上面的布局,我们很容易分析出布局的样式,肯定有一个横向的List,以及一个主动提供给用户的天气刷新按钮。
卡片的事件定义
除此之外,还有2个点击事件,一个是当用户点击卡片刷新按钮时,会调用refresh方法。当用户点击每天天气时,会直接跳转到应用。
具体的方法定义如下所示(index.json):
{ "data": { "weatherList":"" }, "actions": { "refresh": { "action": "message", "params": { "mAction": "refresh" } }, "routerEvent": { "action": "router", "bundleName": "com.liyuanjinglyj.jsweather", "abilityName": "com.liyuanjinglyj.jsweather.MainAbility", "params": { "message": "router" } } } }
其中,action取值为message表示是一个消息事件,取值为router表示为一个路由跳转事件。至于params是参数,用于在Java中区分事件类别与跳转到哪个路由。
获取基础的天气数据
这里,我们是通过天气API网站的接口进行天气的Json数据获取,具体的网址为:https://yiketianqi.com/,注册之后,每个用户有2000次免费的天气获取次数。
其中接口如下所示:
https://yiketianqi.com/api?version=v9&appid=&appsecret=&city=
这里,appid与appsecret在注册之后,网站会提供给用户,至于city表示城市。比如获取北京市天气,这里只需要city=北京即可。
特别注意,这里city的赋值,必须去掉城市最后一个市,洲,县等。比如你输入宜昌市,那么默认都会返回北京的天气,而输入宜昌才能返回宜昌的天气。
返回的Json数据如下图所示:
如上图所示,这里data之上的数据城市以及天气获取时间的基本信息,而data之内数组才是每日的天气,返回的7日天气。
解析Json数据
既然,我们已经知道了json的接口,那么通过程序进行网络请求之后,我们需要解析我们的Json数据为应用所用。
而鸿蒙给我们提供了ZSONObject以及ZSONArray进行Json数据的解析,具体的代码如下所示(WidgetImpl):
public class WidgetImpl extends FormController { private String url="https://yiketianqi.com/api?version=v9&appid=(你的appid)&appsecret=(appsecret)&city="; private ZSONArray getData(String cityStr){ LYJUtils http = new LYJUtils(); String response = http.doGet(url+cityStr); ZSONObject res = ZSONObject.stringToZSON(response); ZSONArray data = res.getZSONArray("data"); WeatherImageMap weatherImageMap=new WeatherImageMap(); Map<String,String> map= weatherImageMap.getMap(); ZSONArray weatherList=new ZSONArray(); for(int i=0;i<data.size();i++){ ZSONObject zsonObject = (ZSONObject)data.get(i); zsonObject.put("image",map.get(zsonObject.getString("wea_day"))); weatherList.add(zsonObject); } ZSONObject list_data = (ZSONObject)data.get(0); String content=list_data.getString("date"); return weatherList; } }
如上面代码所示,因为默认天气数据没有提供对应的天气图片,所以这里我们通过WeatherImageMap指定了指定了天气对应图片地址的键值对。
然后,将ZSONArray的7日天气json数据作为返回值。