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数据作为返回值。
