【OpenHarmony 北向应用开发】Arkts服务卡片数据每秒刷新的实现_arkts难点

鸿蒙开发者社区

简介:

参考以下官方文档

1. 通过UIAbility刷新卡片内容 (openharmony.cn)
2. 通过FormExtensionAbility刷新卡片内容 (openharmony.cn)
3. 定时刷新和定点刷新 (openharmony.cn)

其中，通过router或call事件刷新卡片内容, 通过message事件刷新卡片内容，都是用户执行某个操作触发相应的回调，定时刷新和定点刷新通过配置了updateDuration（定时刷新) 或调用setFormNextRefreshTime()接口来实现，但最短刷新时间都以分钟为单位，那么如何实现像计步器卡片（JS） (huawei.com)，这种类型的每隔几秒刷新呢?

实现原理:

通过设置定时函数每秒调用formProvider的updateForm方法实现卡片更新

实现难点:

难点一: Arkts卡片如何接收要刷新的数据

通过 LocalStorage：页面级UI状态存储 (openharmony.cn)

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp("message") message: string = "hello world";
  ...
}
1
2
3
4
5
6
7

难点二: updateForm只能更新指定卡片，如何获取卡片的唯一标识

在卡片FormExtensionAbility生命周期接口，创建卡片时可以通过want参数获取卡片的唯一表示formId，为了在其他地方调用或者卡片不止一个为方便管理建议使用关系形数据库存储 保存应用数据 关系型数据库的使用

// 使用方创建卡片时触发，提供方需要返回卡片数据绑定类
onAddForm(want) {
    // 在入参want中可以取出卡片的唯一标识：formId
    let formId: string = want.parameters[formInfo.FormParam.IDENTITY_KEY];
    // 在这里存储formId
    	...
    let obj = {"message": "hello world"};
    let formData = formBindingData.createFormBindingData(obj);
    return formData;
  }
1
2
3
4
5
6
7
8
9
10

难点三: 定时函数写在哪里

可以写在主页面的生命周期回调函数aboutToAppear 中，然后再aboutToDisappear 中进行销毁

@State message: string = "hello";
  private intervalId: number = 0;
  aboutToAppear(){
    // 设置定时函数，执行间隔为1000ms
    this.intervalId = setInterval(()=>{
        // 从数据库中拿到存储的formId
        let formId: string = ...
        // 要更新给卡片的数据
        let obj = {"message": this.message};
        let formInfo = formBindingData.createFormBindingData(obj)
        formProvider.updateForm(formId, formInfo);
    }, 1000)
  }
  aboutToDisappear(){
    clearInterval(this.intervalId)
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参考资料:

1. 卡片生命周期管理

卡片生命周期管理 (openharmony.cn)

2. LocalStorage：页面级UI状态存储

LocalStorage：页面级UI状态存储 (openharmony.cn)

3. 关系型数据库

第五章-保存应用数据 _关系型数据库的使用_哔哩哔哩_bilibili

4. 卡片数据绑定类和FormProvider模块

@ohos.app.form.formBindingData (卡片数据绑定类) (openharmony.cn)

@ohos.app.form.formProvider (FormProvider) (openharmony.cn)

import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
1
2

5. 页面和自定义组件生命周期

页面和自定义组件生命周期 (openharmony.cn)

6. 实战项目

计步器卡片（JS） (huawei.com)