鸿蒙HarmonyOS开发:如何灵活运用服务卡片提升用户体验

本文主要是介绍鸿蒙HarmonyOS开发:如何灵活运用服务卡片提升用户体验,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

      • 一、ArkTS卡片相关模块
      • 二、卡片事件能力说明
      • 三、卡片事件的主要使用场景
        • 3.1、使用router事件跳转到指定UIAbility
          • 3.1.1、卡片内按钮跳转到应用的不同页面
          • 3.1.2、服务卡片的点击跳转事件
        • 3.2、通过message事件刷新卡片内容
          • 3.2.1、在卡片页面调用postCardAction接口触发message事件
          • 3.2.2、onFormEvent生命周期中调用updateForm接口刷新卡片
          • 3.2.2、运行效果如下图所示

一、ArkTS卡片相关模块

在这里插入图片描述

ArkTS卡片创建完成后,工程中会新增如下卡片相关文件:卡片生命周期管理文件(EntryFormAbility.ets)、卡片页面文件(WidgetCard.ets)和卡片配置文件(form_config.json)。

在这里插入图片描述

二、卡片事件能力说明

ArkTS卡片中提供了postCardAction接口用于卡片内部和提供方应用间的交互,当前支持router、message和call三种类型的事件,仅在卡片中可以调用。

在这里插入图片描述

三、卡片事件的主要使用场景

  • router事件:可以使用router事件跳转到指定UIAbility,并通过router事件刷新卡片内容。

  • call事件:可以使用call事件拉起指定UIAbility到后台,并通过call事件刷新卡片内容。

  • message事件:可以使用message拉起FormExtensionAbility,并通过FormExtensionAbility刷新卡片内容。

3.1、使用router事件跳转到指定UIAbility

在卡片中使用postCardAction接口的router能力,能够快速拉起卡片提供方应用的指定UIAbility,因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮,实现一键直达的效果。

3.1.1、卡片内按钮跳转到应用的不同页面

在UIAbility中接收router事件并获取参数,根据传递的params不同,选择拉起不同的页面。

// Entryability.ts

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';export default class EntryAbility extends UIAbility {// 服务卡片跳转的页面private selectPage: string = '';//当前windowStageprivate currentWindowStage: window.WindowStage | null = null;// 如果UIAbility第一次启动,在收到Router事件后会触发onCreate生命周期回调onCreate(want, launchParam) {// 获取router事件中传递的targetPage参数if (want.parameters !== undefined && want.parameters.params) {let params = JSON.parse(want.parameters.params)this.selectPage = params.targetPage}}// 如果UIAbility已在后台运行,在收到Router事件后会触发onNewWant生命周期回调onNewWant(want, launchParam) {// 获取router事件中传递的targetPage参数if (want.parameters !== undefined && want.parameters.params) {let params = JSON.parse(want.parameters.params)this.selectPage = params.targetPage}this.onWindowStageCreate(this.currentWindowStage)}// 创建主窗口,为此功能设置主页onWindowStageCreate(windowStage: window.WindowStage) {let targetPage = this.selectPage || "Index"targetPage = "pages/" + targetPage// 为currentWindowStage赋值if (this.currentWindowStage === null) {this.currentWindowStage = windowStage;}windowStage.loadContent(targetPage, (err, data) => {if (err.code) {hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');});}
}
3.1.2、服务卡片的点击跳转事件

在卡片页面中布局两个按钮,点击其中一个按钮时调用postCardAction向指定UIAbility发送router事件,并在事件内定义需要传递的内容。

// WidgetCard.ets

@Entry
@Component
struct WidgetCard {build() {Column(){Button("个人中心").onClick(() => {postCardAction(this, {"action": "router","abilityName": "EntryAbility","params": {"targetPage": "Personals"}});})Button("消息列表").onClick(() => {postCardAction(this, {"action": "router","abilityName": "EntryAbility","params": {"targetPage": "Message"}});})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}
}
3.2、通过message事件刷新卡片内容

在卡片页面中可以通过postCardAction接口触发message事件拉起FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容。

3.2.1、在卡片页面调用postCardAction接口触发message事件

在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用postCardAction接口触发message事件拉起FormExtensionAbility。卡片页面中使用LocalStorageProp装饰需要刷新的卡片数据。

// WidgetCard.ets

let storageUpdateByMsg = new LocalStorage();@Entry(storageUpdateByMsg)
@Component
struct UpdateByMessageCard {@LocalStorageProp('title') title: ResourceStr = 'title';@LocalStorageProp('detail') detail: ResourceStr = 'detail';build() {Column() {Text(this.title)Text(this.detail)Button("刷新数据").onClick(() => {postCardAction(this, {"action": "message","params": {"msgTest": "messageEvent"}});})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}
}
3.2.2、onFormEvent生命周期中调用updateForm接口刷新卡片

在FormExtensionAbility的onFormEvent生命周期中调用updateForm接口刷新卡片。

// EntryFormAbility.ts

import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';export default class EntryFormAbility extends FormExtensionAbility {onAddForm(want) {// Called to return a FormBindingData object.let formData = {};return formBindingData.createFormBindingData(formData);}onFormEvent(formId, message) {class FormDataClass {title: string = 'Title Update.'; // 和卡片布局中对应detail: string = 'Description update success.'; // 和卡片布局中对应}let formData = new FormDataClass();let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);formProvider.updateForm(formId, formInfo).then(() => {}).catch((error) => {})}};
3.2.2、运行效果如下图所示

在这里插入图片描述

这篇关于鸿蒙HarmonyOS开发:如何灵活运用服务卡片提升用户体验的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1112793

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展,越来越多的企业开始将其应用于实际业务中。然而,区块链技术的专业性使得其集成开发成为一项挑战。针对此,广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术,提供一套全面的区块链开发工具和开发环境,支持开发者快速开发和部署区块链应用。此外,该平台还可以提供一套全面的区块链开发教程和文档,帮助开发者快速上手区块链开发。

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧