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

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

卡片初始化


对于创建的Js卡片,其卡片初始化的一些数据是在Java类中进行的,这里是在WidgetImpl.java类中,对应的初始化方法为bindFormData()方法。


代码如下:

public class WidgetImpl extends FormController {
  //卡片初始化时方法
    @Override
    public ProviderFormInfo bindFormData() {
        HiLog.info(TAG, "开始");
        ZSONObject object = new ZSONObject();
        object.put("weatherList", getData("北京"));
        FormBindingData bindingData = new FormBindingData(object);
        ProviderFormInfo formInfo = new ProviderFormInfo();
        formInfo.setJsBindingData(bindingData);
        return formInfo;
    }
}


如上面代码所示,我们这里将刚才获取的7日json数据设置到ZSONObject中,并指定其在js的变量名为weatherList,对应index.json文件中data中的数据。


刷新天气功能实现


其次,我们不仅需要展示天气数据,而且需要提供给用户一个自己手动更新天气的按钮进行交互。


交互的功能也在WidgetImpl类中,由onTriggerFormEvent()方法进行处理。代码如下所示:

public class WidgetImpl extends FormController {
// 卡片消息事件时方法
    @Override
    public void onTriggerFormEvent(long formId, String message) {
        ZSONObject zsonObject = ZSONObject.stringToZSON(message);
        HiLog.info(TAG, "onTriggerFormEvent");
        ZSONObject result = new ZSONObject();
        switch (zsonObject.getString("mAction")) {
            case "refresh":
                result.put("weatherList",getData("宜昌"));
                break;
            default:
                break;
        }
        // Update js card
        try {
            if (mContext instanceof Ability) {
                ((Ability) mContext).updateForm(formId, new FormBindingData(result));
            }
        } catch (FormException e) {
            HiLog.error(TAG, e.getMessage());
        }
    }
}


如上面代码所示,这里通过mAction机型判断,需要处理的是哪个时间。当然,这里的天气卡片,我们只提供了一个刷新功能,所以只有一个事件。


但在实际的项目中,卡片的交互功能往往很多,比如说音乐类App提供一个卡片进行音乐的播放交互,那么就会提供播放,暂停,下一首,上一首等很多功能。


那么就可以直接通过swicth进行事件字符串的判断,区分其进行的处理方式。


这里,为了用户能看到真正的交互效果,我们将城市进行了切换,毕竟7日天气同一城市,短时间是没有任何变化的。


到这里,基本的交互功能以及界面就全部完成了,实现的效果如首图所示。


卡片界面的样式


在前面我们只介绍了卡片的布局index.hml,以及卡片的交互基本数据的定义index.json。但之所以卡片的界面如首图一样显示,是因为样式index.css:

.card_root_layout {
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-image: url("common/cardbg.jpg");
}
.refresh_image {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-top: 10px;
    object-fit: contain;
}
.weather_list{
    margin-top: 2px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    flex-direction: row;
    height: 100%;
    width: 100%;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.list_item{
    margin-right: 10px;
}
.list_div{
    flex-direction: column;
    align-items: center;
}
.list_text{
    font-size: 15px;
    margin-top: 15px;
}
.list_image{
    height: 30px;
    object-fit: contain;
    margin-top: 20px;
}


网络请求


在上面,我们是通过自己定义的网络请求,获取json数据字符串的。这里,博主直接给出定义的网络请求类(LYJUtils.java)的代码:

public class LYJUtils {
    public static String doGet(String httpUrl) {
        HttpsURLConnection connection = null;
        InputStream is = null;
        BufferedReader br = null;
        String result = null;// 返回结果字符串
        try {
            // 创建远程url连接对象
            URL url = new URL(httpUrl);
            // 通过远程url连接对象打开一个连接,强转成httpURLConnection类
            connection = (HttpsURLConnection) url.openConnection();
            // 设置连接方式:get
            connection.setRequestMethod("GET");
            // 设置连接主机服务器的超时时间:15000毫秒
            connection.setConnectTimeout(15000);
            // 设置读取远程返回的数据时间:60000毫秒
            connection.setReadTimeout(60000);
            // 发送请求
            connection.connect();
            // 通过connection连接,获取输入流
            if (connection.getResponseCode() == 200) {
                is = connection.getInputStream();
                // 封装输入流is,并指定字符集
                br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
                // 存放数据
                StringBuffer sbf = new StringBuffer();
                String temp = null;
                while ((temp = br.readLine()) != null) {
                    sbf.append(temp);
                    sbf.append("\r\n");
                }
                result = sbf.toString();
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 关闭资源
            if (null != br) {
                try {
                    br.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (null != is) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            connection.disconnect();// 关闭远程连接
        }
        return result;
    }
}


定义权限


这里,因为我们获取了网络数据。所以,我们需要赋予应用网络权限,具体权限的定义在config.json文件中,代码如下所示:

"module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "package": "com.liyuanjinglyj.jsweather",


源代码下载地址:https://gitee.com/liyuanjinglyj/JsWeather

相关文章
|
22天前
|
存储 调度 数据安全/隐私保护
鸿蒙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)。
52 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` 运行项目。详细步骤包括安装、项目配置、签名和运行,确保开发环境顺利搭建。
73 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
|
26天前
|
移动开发 资源调度 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 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
118 0
|
14天前
|
Android开发
鸿蒙开发:自定义一个简单的标题栏
本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。
鸿蒙开发:自定义一个简单的标题栏
|
14天前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求
|
19天前
|
UED
鸿蒙next版开发:相机开发-适配不同折叠状态的摄像头变更(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了强大的相机开发能力,特别是针对折叠屏设备的摄像头适配。本文详细介绍了如何在ArkTS中检测和适配不同折叠状态下的摄像头变更,确保相机应用在不同设备状态下的稳定性和用户体验。通过代码示例展示了具体的实现步骤。
55 8