如今衣食住行娱乐影音等App占据了大多数人的手机,一部手机可以满足日常大多需求,但对需要经常查看或进行简单操作的场景来说,总需要用户点开App操作未免过于繁琐。

针对该问题, HarmonyOS SDK为用户提供了Form Kit(卡片开发服务),您可以将应用的重要信息或操作前置到卡片,以达到服务直达、减少体验层级的目的,用户无需打开App,根据引导将卡片添加到桌面,即可随时随地查看服务的重要信息和动态变化。

面对需要实时更新信息的App卡片,Push Kit(推送服务)向开发者提供了卡片刷新服务。应用通过集成Push Kit后获取Push Token,基于Push Kit的系统级通道,便可以在合适场景向用户即时推送卡片内容,从而提升用户的感知度和活跃度。

能力优势

可靠、稳定

应用无论是否在后台运行,通过Push Kit都能即时刷新服务内容。通过华为终端设备的长连接,充分保障刷新内容送达;系统级通道最高可提供每秒千万级的推送速度。

实时、灵活

由开发者在合适场景即时推送卡片封面内容,实时更新;支持图片、文本等多种格式刷新;并及时返回送达回执。

开发步骤

为方便App开发者接入,仅需五步即可完成卡片刷新功能的开发及卡片内容刷新。

1.参见创建一个ArkTS卡片,完成本地服务卡片的创建。

2.在项目模块级别下的src/main/resources/base/profile/form_config.json中配置dataProxyEnabled字段为true,开启卡片代理刷新功能。

{
"forms": [
{
"name": "WidgetCard",
"src": "./ets/widget/pages/WidgetCard.ets",
"uiSyntax": "arkts",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDefault": true,
"updateEnabled": true,
"updateDuration": 1,
"scheduledUpdateTime": "10:30",
"defaultDimension": "2*2",
"supportDimensions": ["2*2"],
"dataProxyEnabled": true
}
]
}

3.在卡片生命周期管理文件(下以EntryFormAbility为例)的onAddForm()回调中获取formId,定义需要在卡片页面文件(下以WidgetCard为例)中和通过Push Kit要刷新的字段,如下以text_key和image_key为例。

import { formBindingData, formInfo, FormExtensionAbility } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit'; export default class EntryFormAbility extends FormExtensionAbility {
onAddForm(want: Want): formBindingData.FormBindingData {
// 获取formId
const formId = want.parameters![formInfo.FormParam.IDENTITY_KEY] as string; // 定义需要在WidgetCard中刷新的字段
class CreateFormData {
formId: string = '';
text_key: string = '';
image_key: string = '';
} const obj: CreateFormData = {
formId: formId,
text_key: '默认文本',
image_key: '',
}
const bindingData: formBindingData.FormBindingData = formBindingData.createFormBindingData(obj); // 定义需要通过Push Kit代理刷新的字段,每个key均需要在上面bindingData中定义
const text_key: formBindingData.ProxyData = {
key: 'text_key',
subscriberId: formId,
};
const image_key: formBindingData.ProxyData = {
key: 'image_key',
subscriberId: formId,
};
bindingData.proxies = [text_key, image_key];
return bindingData;
}
}

4.卡片页面文件( src/main/ets/widget/pages/WidgetCard.ets为例)中,创建LocalStorage变量并与@Entry装饰器绑定,使用@LocalStorageProp装饰器创建key-value的变量。

本文创建了formId、text和image三个变量,对应的key为formId、text_key和image_key,需要注意的是卡片页面布局中image对应的组件是Image图片组件,图片组件传递的变量必须以 memory:// 开头。

// 定义页面级的UI状态存储LocalStorage
const storage = new LocalStorage(); // 绑定
@Entry(storage)
@Component
struct WidgetCard {
@LocalStorageProp('formId') formId: string = '';
@LocalStorageProp('text_key') text: string = '';
@LocalStorageProp('image_key') image: string = ''; build() {
Flex({ direction: FlexDirection.Column }) {
Row() {
Text() {
// Span是Text组件的子组件,用于显示行内文本
Span('formID:')
Span(this.formId)
}
.fontSize(10)
} Row() {
Text() {
Span('文本:')
Span(this.text)
}
.fontSize(10)
} Row() {
if (this.image) {
Image('memory://' + this.image).height(80)
}
}
}
.padding(10)
}
}

5.建议您将formId、pushToken等信息上报到应用服务端,用于向应用发送卡片刷新消息。请参见指导获取Push Token

// 以下为伪代码
import { Want } from '@kit.AbilityKit';
import { pushService } from '@kit.PushKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { formInfo } from '@kit.FormKit'; async function saveFormInfo(want: Want): Promise<void> {
try {
const formId = want.parameters![formInfo.FormParam.IDENTITY_KEY] as string;
const moduleName = want.moduleName;
const abilityName = want.abilityName;
const formName = want.parameters![formInfo.FormParam.NAME_KEY] as string;
const pushToken: string = await pushService.getToken(); // 将formId, moduleName, abilityName, formName, pushToken 上报到应用服务端
} catch (err) {
let e: BusinessError = err as BusinessError;
hilog.error(0x0000, 'testTag', 'Save form info failed: %{public}s', e.message);
}
}

6.应用服务端调用REST API推送卡片刷新消息,消息详情可参见场景化消息API接口功能介绍,请求示例如下:

// Request URL
POST https://push-api.cloud.huawei.com/v3/[projectId]/messages:send // Request Header
Content-Type: application/json
Authorization: Bearer eyJr*****OiIx---****.eyJh*****iJodHR--***.QRod*****4Gp---****
push-type: 1 // Request Body
{
"payload": {
"moduleName": "entry",
"abilityName": "EntryFormAbility",
"formName": "widget",
"formId": 423434262,
"version": 123456,
"formData": {
"text_key": "刷新文本内容"
},
"images": [
{
"keyName": "image_key",
"url": "***",
"require": 1
}
]
},
"target": {
"token": [
"IQAAAAC*************************dRH7_bPbfMrVfsYw"
]
},
"pushOptions": {
"testMessage": true
}
}

了解更多详情>>

获取卡片开发服务开发指导文档

获取推送卡片刷新消息开发指导文档

获取推送服务开发指导文档

HarmonyOS卡片刷新服务,信息实时更新一目了然的更多相关文章

  1. 携程开源分布式配置系统Apollo服务端是如何实时更新配置的?

    引言 前面有写过一篇<分布式配置中心apollo是如何实时感知配置被修改>,也就是客户端client是如何知道配置被修改了,有不少读者私信我你既然说了client端是如何感知的,那服务端又 ...

  2. 实时更新数据,无需刷新:a,如何使用Turbolinks clearCache(), b Action Cable

    视频: https://gorails.com/episodes/how-to-use-turbolinks-clearCache?autoplay=1 用途: 更方便的实时从服务器更新局部网页,在这 ...

  3. IDEA 修改JSP和后端数据后,页面刷新可以实时更新

    情况:刚开始使用IDEA进行开发时,发现修改JSP页面或者后端数据后,再刷新浏览器页面,发现没有变化,页面无更新. 这样就导致不得不频繁重启tomcat服务器.非常麻烦 解决方法: 步骤1. 先设置t ...

  4. MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新

    MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...

  5. 解决 三星Note3 桌面小部件不实时更新/不刷新 的问题

    机型及问题描述:我的是三星note3 (国行 SM-N9008V),已ROOT,安装了LBE安全大师.在桌面小部件中,有些不会实时更新.比如有 滴答清单(办过的事项无法勾选),百度云音乐(歌曲播放更新 ...

  6. 【用户交互】APP没有退出前台但改变系统属性如何实时更新UI?监听系统广播,让用户交互更舒心~

    前日,一小伙伴问我一个问题,说它解决了半天都没解决这个问题,截图如下: 大概楼主理解如下: 如果在应用中有一个判断wifi的开关和一个当前音量大小的seekbar以及一个获取当前电量多少的按钮,想知道 ...

  7. facebook充值实时更新接口文档翻译 希望对做facebook充值的小伙伴有帮助

    Realtime Updates for Payments are an essential method by which you are informed of changes to orders ...

  8. flex 实时更新的一些方法总结

    诚为大家所知,Flash之所以优秀,就是它可以带来良好的用户体验和交互特性.既然涉及到交互性,开发人员在开发过程中必然会遇到实时更新的问题,那么,当后台数据发现变化的时候,如何让Flash端实时刷新显 ...

  9. 基于server broker 的数据实时更新

    Service Broker介绍:SQL Server Service Broker 为消息和队列应用程序提供 SQL Server 数据库引擎本机支持.这使开发人员可以轻松地创建使用数据库引擎组件在 ...

  10. web页面实时更新页面的原理--WebSocket

    原文:https://www.jianshu.com/p/8f956cd4d42b angular-cli启动的项目也可以自动刷新,底下应该也是应用的websocket的原理. ----------- ...

随机推荐

  1. 【LeetCode栈与队列#06】前K个高频元素(TopK问题),以及pair、priority_queue的使用

    前 K 个高频元素 力扣题目链接(opens new window) 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = ...

  2. Vue3基础知识提炼

    1.{{}} data2.""等同{{}},数据单向绑定v-bind: 简化 :3.v-if v-else4.v-for="(i, index) in array&quo ...

  3. Java 类的结构之三 :构造器(或构造方法,constructor)的使用

    1 /* 2 * 类的结构之三 :构造器(或构造方法,constructor)的使用 3 * construct:建设 建造 4 * 5 * 一.构造器的作用: 6 * 创建对象 7 * 初始化对象的 ...

  4. 按值传递,引用传递 浅析java String ,对象与对象引用的区别

    目录 一.前言 二.何谓对象? 三.何谓对象引用? 四.创建对象 Vehicle veh1 = new Vehicle(); 五.参数传值 六.Java Sting 最后!有错误的地方欢迎指正 一.前 ...

  5. linux下查看端口对应的进程号

    在部署服务的时候,会指定对应的端口号,如果想kill 对应的端口,就要找到对应的进程,查看端口对应的进程号,有两种方法: 1.lsof命令,查看系统打开的文件(在linux中,所有的都是文件),需要管 ...

  6. C++红黑树的实现

    最近闲来无事,一直没有研究过红黑树,B树,B+树之类的,打算自己用C语言实现一下它们. 红黑树的性质定义: 节点只能是黑色或者红色. 根节点必须是黑色. 每个叶子节点是黑色节点(称之为NIL节点,又被 ...

  7. day07-IO流应用02

    Java坦克大战07 8.IO流应用02 8.3记录退出游戏时敌人坦克坐标/方向,存盘退出 8.3.1思路分析 在Recorder类中,增加一个Vector集合,用来接收从MyPanel类中传入的en ...

  8. eclipse插件FindBugs使用笔记

    FindBugs是一个静态分析工具,它检查类或者JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.Findbugs自带检测器,其中有60余种Bad practice,80余种Correct ...

  9. Java线上诊断神器Arthas:常用命令详解!

    有关Arthas基本介绍.安装部署.arthas idea插件在上篇文章已经介绍过,这里就不在重述. 文章地址:Java诊断工具Arthas:开篇之watch实战 上篇重点讲了 watch 命令.这篇 ...

  10. verilog勘误系列之-->设计行为仿真和时序仿真不一致分析

    描述 最近在vivado中设计一个计算器: 28bit有符号加减法,结果出现行为仿真和时序仿真不一致情况 原因 本篇是由于组合逻辑部分敏感信号使用错误导致 代码 r_a, r_b : 对计算数据a, ...