HarmonyOS实战—天气类卡片设计(一)

简介: HarmonyOS实战—天气类卡片设计(一)

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

相关文章
|
23天前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
53 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
23天前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
40 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
29天前
|
IDE 开发工具
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
本文介绍了如何使用 Flutter SDK 3.22.0 搭建鸿蒙开发环境。首先安装 Flutter SDK 3.22.0,并通过 FVM 管理多个版本。接着配置项目,使用 `fvm use custom_3.22.0` 设置自定义 SDK 版本。添加鸿蒙平台支持并进行项目签名,最后通过 `fvm flutter run` 运行项目。详细步骤包括安装、项目配置、签名和运行,确保开发环境顺利搭建。
74 7
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
|
28天前
|
UED
<大厂实战经验> Flutter&鸿蒙next 中使用 initState 和 mounted 处理异步请求的详细解析
在 Flutter 开发中,处理异步请求是常见需求。本文详细介绍了如何在 `initState` 中触发异步请求,并使用 `mounted` 属性确保在适当时机更新 UI。通过示例代码,展示了如何安全地进行异步操作和处理异常,避免在组件卸载后更新 UI 的问题。希望本文能帮助你更好地理解和应用 Flutter 中的异步处理。
64 3
|
28天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
104 1
|
27天前
|
移动开发 资源调度 IDE
鸿蒙Taro实战:01-搭建开发环境
本文介绍了如何使用 Taro 4.x 框架搭建鸿蒙应用开发环境。主要内容包括:下载并配置 DevEco IDE,创建鸿蒙项目,安装 Taro 4.x,初始化 Taro 项目,配置鸿蒙插件和编译配置,修改 `package.json`,运行 Taro 和鸿蒙项目。通过本文,读者可以快速上手鸿蒙应用开发。
|
28天前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
119 0
|
14天前
|
Android开发
鸿蒙开发:自定义一个简单的标题栏
本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。
鸿蒙开发:自定义一个简单的标题栏
|
14天前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求
|
19天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
56 8