鸿蒙HarmonyOS实战-Stage模型(卡片数据交互)

harmonyos,stage · 浏览次数 : 0

小编点评

**代码结构** * **EntryFormAbility** 类扩展 FormExtensionAbility * **onAddForm** 方法处理添加时卡片状态的持久化 * **onRemoveForm** 方法处理删除时卡片状态的持久化 * **onCastToNormalForm** 方法用于在添加时将临时卡片转换为常态卡片时进行持久化 * **onUpdateForm** 方法处理更新时卡片状态的更新 * **onFormEvent** 方法处理来自组件的表单事件,更新卡片状态 **方法** * **createFormBindingData** 创建表单绑定数据 * **updateForm** 更新表单绑定数据 * **requestForm** 发起表单请求 * **flushSync** 从本地存储中读取并写入所有表单数据 **使用** 1. 获取卡片的 **formId** 2. 使用 **formHost** 的 **requestForm** 方法请求卡片更新请求 3. 响应请求成功时,打印日志信息 **其他** * **formId** 是一个用于标识表单的字符串。 * **formHost** 是一个 FormManager 的实例。 * **onFormEvent** 方法中包含组件事件的监听。 * **console.info** 用于打印日志信息。

正文

🚀一、卡片数据交互

HarmonyOS卡片数据交互是指在基于鸿蒙操作系统的设备上,卡片界面之间进行数据的传输和交互。

HarmonyOS的卡片是一种轻量级的应用界面,可以在设备的屏幕上显示信息和提供操作功能。卡片可以包含各种类型的内容,如文本、图片、按钮、输入框等,并可以根据用户的操作进行相应的响应。卡片可以在设备的主屏幕、通知栏、应用中心等位置显示,用户可以通过滑动、点击等操作与卡片进行交互。

在HarmonyOS中,卡片之间可以通过数据交互来实现信息的共享和传递。例如,一个音乐播放器的卡片可以将当前播放的歌曲和进度信息共享给其他卡片,实现多个卡片之间的同步。另外,卡片还可以通过数据交互来获取其他卡片的信息,从而实现卡片之间的互动和联动。

HarmonyOS提供了一套丰富的API和框架来支持卡片之间的数据交互,开发者可以使用这些工具来实现卡片之间的数据共享和交互功能。通过卡片数据交互,用户可以方便地在各个卡片之间切换和操作,提升了用户体验和设备的智能化程度。

🔎1.卡片数据交互说明

ArkTS卡片框架提供了updateForm()接口和requestForm()接口来主动触发卡片的页面刷新。

updateForm()接口用于更新卡片的表单数据,当卡片的某些数据发生变化时,可以调用该接口将最新的数据传递给卡片,从而更新卡片的显示内容。

requestForm()接口用于请求重新加载卡片的表单数据,当需要更新卡片的显示内容时,可以调用该接口触发卡片重新加载数据并刷新页面。

这两个接口可以根据业务需求灵活使用,使得卡片能够根据最新的数据进行动态更新,提供更好的用户体验。

🔎2.定时刷新和定点刷新

HarmonyOS卡片框架提供了定时刷新和定点刷新的功能,以便实现动态更新卡片的显示内容。

定时刷新是指卡片可以按照预设的时间间隔进行自动刷新。这样可以保持卡片的显示内容与后台数据的同步,实现实时的数据展示。开发者可以使用定时器或者系统提供的定时任务功能来实现定时刷新。

定点刷新是指卡片可以根据特定的事件或者条件触发刷新。例如,当某个操作完成时,可以触发卡片刷新以显示最新的结果。开发者可以在相应的事件或条件触发时,调用卡片框架提供的刷新接口,来实现定点刷新。

通过定时刷新和定点刷新,开发者可以根据实际需求来控制卡片的刷新频率和时机,从而提供更好的用户体验。

🦋2.1 定时刷新

{
  "forms": [
    {
      "name": "widget",
      "description": "This is a service widget.",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true, // 使能刷新功能
      "scheduledUpdateTime": "10:30",                               
      "updateDuration": 2, // 设置卡片定时刷新的更新周期(单位为30分钟,取值为自然数)
      "defaultDimension": "2*2",
      "supportDimensions": ["2*2"]
    }
  ]
}

image

🦋2.2 定点刷新

{
  "forms": [
    {
      "name": "widget",
      "description": "This is a service widget.",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true, // 使能刷新功能
      "scheduledUpdateTime": "10:30", // 设置卡片的定点刷新的时刻
      "updateDuration": 0,
      "defaultDimension": "2*2",
      "supportDimensions": ["2*2"]
    }
  ]
}

image

🦋2.3 下次刷新

import formProvider from '@ohos.app.form.formProvider';

let formId = '123456789'; // 实际业务场景需要使用正确的formId
try {
  // 设置过5分钟后更新卡片内容
  formProvider.setFormNextRefreshTime(formId, 5, (err, data) => {
    if (err) {
      console.error(`Failed to setFormNextRefreshTime. Code: ${err.code}, message: ${err.message}`);
      return;
    } else {
      console.info('Succeeded in setFormNextRefreshTimeing.');
    }
  });
} catch (err) {
  console.error(`Failed to setFormNextRefreshTime. Code: ${err.code}, message: ${err.message}`);
}

具体刷新可参考上篇文章

🔎3.刷新本地图片和网络图片

在HarmonyOS卡片开发中,可以通过请求本地图片和网络图片来实现对图片的显示。

请求本地图片可以使用HarmonyOS提供的资源管理器来获取本地图片的资源,然后将其显示在卡片上。

先需要打开这个权限:

ohos.permission.INTERNET

🦋3.1 发送本地图片

import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import request from '@ohos.request';
import fs from '@ohos.file.fs';

export default class EntryFormAbility extends FormExtensionAbility {
  ...
  // 在添加卡片时,打开一个本地图片并将图片内容传递给卡片页面显示
  onAddForm(want) {
    // 假设在当前卡片应用的tmp目录下有一个本地图片:head.PNG
    let tempDir = this.context.getApplicationContext().tempDir;
    // 打开本地图片并获取其打开后的fd
    let file;
    try {
      file = fs.openSync(tempDir + '/' + 'head.PNG');
    } catch (e) {
      console.error(`openSync failed: ${JSON.stringify(e)}`);
    }
    let formData = {
      'text': 'Image: Bear',
      'imgName': 'imgBear',
      'formImages': {
        'imgBear': file.fd
      },
      'loaded': true
    }
    // 将fd封装在formData中并返回至卡片页面
    return formBindingData.createFormBindingData(formData);
  }

  ...
}

🦋3.2 发送网络片

import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import request from '@ohos.request';
import fs from '@ohos.file.fs';

export default class EntryFormAbility extends FormExtensionAbility {
  // 在卡片页面触发message事件时,下载一个网络图片,并将网络图片内容传递给卡片页面显示
  onFormEvent(formId, message) {
    let formInfo = formBindingData.createFormBindingData({
      'text': '刷新中...'
    })
    formProvider.updateForm(formId, formInfo)
    // 注意:FormExtensionAbility在触发生命周期回调时被拉起,仅能在后台存在5秒
    // 建议下载能快速下载完成的小文件,如在5秒内未下载完成,则此次网络图片无法刷新至卡片页面上
    let netFile = 'https://xxxx/xxxx.png'; // 需要在此处使用真实的网络图片下载链接
    let tempDir = this.context.getApplicationContext().tempDir;
    let tmpFile = tempDir + '/file' + Date.now();
    request.downloadFile(this.context, {
      url: netFile, filePath: tmpFile
    }).then((task) => {
      task.on('complete', function callback() {
        console.info('ArkTSCard download complete:' + tmpFile);
        let file;
        try {
          file = fs.openSync(tmpFile);
        } catch (e) {
          console.error(`openSync failed: ${JSON.stringify(e)}`);
        }
        let formData = {
          'text': 'Image: Https',
          'imgName': 'imgHttps',
          'formImages': {
            'imgHttps': file.fd
          },
          'loaded': true
        }
        let formInfo = formBindingData.createFormBindingData(formData)
        formProvider.updateForm(formId, formInfo).then((data) => {
          console.info('FormAbility updateForm success.' + JSON.stringify(data));
        }).catch((error) => {
          console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
        })
      })
      task.on('fail', function callBack(err) {
        console.info('ArkTSCard download task failed. Cause:' + err);
        let formInfo = formBindingData.createFormBindingData({
          'text': '刷新失败'
        })
        formProvider.updateForm(formId, formInfo)
      });
    }).catch((err) => {
      console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
    });
  }

  ...
};

🦋3.3 卡片UI接收数据

let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('text') text: string = '加载中...';
  @LocalStorageProp('loaded') loaded: boolean = false;
  @LocalStorageProp('imgName') imgName: string = 'name';

  build() {
    Column() {
      Text(this.text)
        .fontSize('12vp')
        .textAlign(TextAlign.Center)
        .width('100%')
        .height('15%')

      Row() {
        if (this.loaded) {
          Image('memory://' + this.imgName)
            .width('50%')
            .height('50%')
            .margin('5%')
        } else {
          Image('common/start.PNG')
            .width('50%')
            .height('50%')
            .margin('5%')
        }
      }.alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Button('刷新')
        .height('15%')
        .onClick(() => {
          postCardAction(this, {
            'action': 'message',
            'params': {
              'info': 'refreshImage'
            }
          });
        })
    }
    .width('100%').height('100%')
    .alignItems(HorizontalAlign.Center)
    .padding('5%')
  }
}

🔎4.根据卡片状态刷新不同内容

我们可以添加两张桌面卡片,一张显示杭州的天气,另一张显示北京的天气。这些卡片可以在每天早上7点触发定时刷新。卡片需要能够感知当前的配置是杭州还是北京,并根据情况选择相应城市的天气信息进行刷新。以下示例展示了如何根据卡片的状态动态选择需要刷新的内容。

1、配置定时刷新

{
  "forms": [
    {
      "name": "widget",
      "description": "This is a service widget.",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": "07:00",
      "updateDuration": 0,
      "defaultDimension": "2*2",
      "supportDimensions": ["2*2"]
    }
  ]
}

2、选择状态

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('textA') textA: string = '待刷新...';
  @LocalStorageProp('textB') textB: string = '待刷新...';
  @State selectA: boolean = false;
  @State selectB: boolean = false;

  build() {
    Column() {
      Row() {
        Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
          .select(false)
          .onChange((value: boolean) => {
            this.selectA = value;
            postCardAction(this, {
              'action': 'message',
              'params': {
                'selectA': JSON.stringify(value)
              }
            });
          })
        Text('状态A')
      }

      Row() {
        Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
          .select(false)
          .onChange((value: boolean) => {
            this.selectB = value;
            postCardAction(this, {
              'action': 'message',
              'params': {
                'selectB': JSON.stringify(value)
              }
            });
          })
        Text('状态B')
      }

      Row() { // 选中状态A才会进行刷新的内容
        Text('状态A: ')
        Text(this.textA)
      }

      Row() { // 选中状态B才会进行刷新的内容
        Text('状态B: ')
        Text(this.textB)
      }
    }.padding('10%')
  }
}

3、根据状态刷新内容

import formInfo from '@ohos.app.form.formInfo'
import formProvider from '@ohos.app.form.formProvider';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import dataStorage from '@ohos.data.storage'

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want) {
    let formId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
    let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY];
    if (isTempCard === false) { // 如果为常态卡片,直接进行信息持久化
      console.info('Not temp card, init db for:' + formId);
      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
      storeDB.putSync('A' + formId, 'false');
      storeDB.putSync('B' + formId, 'false');
      storeDB.flushSync();
    }
    let formData = {};
    return formBindingData.createFormBindingData(formData);
  }

  onRemoveForm(formId) {
    console.info('onRemoveForm, formId:' + formId);
    let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    storeDB.deleteSync('A' + formId);
    storeDB.deleteSync('B' + formId);
  }

  // 如果在添加时为临时卡片,则建议转为常态卡片时进行信息持久化
  onCastToNormalForm(formId) {
    console.info('onCastToNormalForm, formId:' + formId);
    let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    storeDB.putSync('A' + formId, 'false');
    storeDB.putSync('B' + formId, 'false');
    storeDB.flushSync();
  }

  onUpdateForm(formId) {
    let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    let stateA = storeDB.getSync('A' + formId, 'false').toString()
    let stateB = storeDB.getSync('B' + formId, 'false').toString()
    // A状态选中则更新textA
    if (stateA === 'true') {
      let formInfo = formBindingData.createFormBindingData({
        'textA': 'AAA'
      })
      formProvider.updateForm(formId, formInfo)
    }
    // B状态选中则更新textB
    if (stateB === 'true') {
      let formInfo = formBindingData.createFormBindingData({
        'textB': 'BBB'
      })
      formProvider.updateForm(formId, formInfo)
    }
  }

  onFormEvent(formId, message) {
    // 存放卡片状态
    console.info('onFormEvent formId:' + formId + 'msg:' + message);
    let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
    let msg = JSON.parse(message)
    if (msg.selectA != undefined) {
      console.info('onFormEvent selectA info:' + msg.selectA);
      storeDB.putSync('A' + formId, msg.selectA);
    }
    if (msg.selectB != undefined) {
      console.info('onFormEvent selectB info:' + msg.selectB);
      storeDB.putSync('B' + formId, msg.selectB);
    }
    storeDB.flushSync();
  }
};

🔎5.使用方刷新卡片内容(仅对系统应用开放)

在HarmonyOS中,要根据formId刷新卡片内容,可以通过以下步骤实现:

首先,在需要刷新卡片内容的地方,获得当前的formId。

使用FormManager类的refreshForm方法刷新卡片内容。该方法接受两个参数,第一个参数为要刷新的卡片的formId,第二个参数为待刷新的数据。

在refreshForm方法中,可以更新卡片的内容,例如更新文本、图片或其他UI元素。可以通过调用卡片所使用的组件的相应方法,将新数据应用到卡片中。

import formHost from '@ohos.app.form.formHost';

@Entry()
@Component
struct WidgetCard {
  formId = ...; // 卡片ID

  build() {
    Button(`刷新卡片`)
      .type(ButtonType.Capsule)
      .width('50%')
      .height(50)
      .onClick(() => {
        console.info('FormAbility update form click');
        // formId需要为实际需要刷新的卡片ID
        formHost.requestForm(this.formId.toString()).then(() => {
          console.info('Succeeded in requestForming.');
        });
      })

    ...
  }
}

🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

image

与鸿蒙HarmonyOS实战-Stage模型(卡片数据交互)相似的内容:

鸿蒙HarmonyOS实战-Stage模型(卡片数据交互)

一、卡片数据交互 HarmonyOS卡片数据交互是指在基于鸿蒙操作系统的设备上,卡片界面之间进行数据的传输和交互。 HarmonyOS的卡片是一种轻量级的应用界面,可以在设备的屏幕上显示信息和提供操作功能。卡片可以包含各种类型的内容,如文本、图片、按钮、输入框等,并可以根据用户的操作进行相应的响

鸿蒙HarmonyOS实战-Stage模型(开发卡片事件)

一、开发卡片事件 HarmonyOS元服务卡片页面(Metaservice Card Page)是指在HarmonyOS系统中,用于展示元服务的页面界面。元服务是指一组提供特定功能或服务的组件,例如天气服务、音乐播放服务等。元服务卡片页面可以显示元服务的相关信息和操作选项,用户可以通过点击卡片页

鸿蒙HarmonyOS实战-Stage模型(开发卡片页面)

一、开发卡片页面 HarmonyOS元服务卡片页面(Metaservice Card Page)是指在HarmonyOS系统中,用于展示元服务的页面界面。元服务是指一组提供特定功能或服务的组件,例如天气服务、音乐播放服务等。元服务卡片页面可以显示元服务的相关信息和操作选项,用户可以通过点击卡片页

鸿蒙HarmonyOS实战-Stage模型(服务卡片的模块和创建)

一、服务卡片的模块和创建 在HarmonyOS中,服务卡片是一种提供即时信息和快速操作的小组件,类似于Android中的通知栏。服务卡片可以显示各种类型的信息,包括通知、天气、日历事件、音乐播放器、快捷方式等。用户可以根据自己的需求配置服务卡片,并通过轻扫或点击来查看详细信息或执行操作。此外,服

鸿蒙HarmonyOS实战-Stage模型(服务卡片介绍和运行机制)

一、服务卡片介绍 1.服务卡片的概念 在HarmonyOS中,服务卡片是一种提供即时信息和快速操作的小组件,类似于Android中的通知栏。服务卡片可以显示各种类型的信息,包括通知、天气、日历事件、音乐播放器、快捷方式等。用户可以根据自己的需求配置服务卡片,并通过轻扫或点击来查看详细信息或执

鸿蒙HarmonyOS实战-Stage模型(线程模型)

前言 线程是计算机中的一种执行单元,是操作系统进行调度的最小单位。它是进程中的实际运行单位,每个进程可以包含多个线程。线程可以理解为进程中的一个执行流,它独立运行,拥有独立的栈和寄存器,但共享进程的资源,如内存空间、文件等。线程通过并发执行,将一个进程的任务划分成多个子任务并行处理,以提高程序的

鸿蒙HarmonyOS实战-Stage模型(进程模型)

前言 进程是计算机中运行的程序的实例。它是操作系统对正在执行的程序的一种抽象概念。每个进程都有自己的独立内存空间、运行状态和执行上下文。进程可以包含一个或多个线程,每个线程可以独立执行一部分任务。操作系统通过分配和管理进程资源来实现多任务和并发执行。进程之间可以通过进程间通信机制进行数据交换和协

鸿蒙HarmonyOS实战-Stage模型(信息传递载体Want)

前言 应用中的信息传递是为了实现各种功能和交互。信息传递可以帮助用户和应用之间进行有效的沟通和交流。通过信息传递,应用可以向用户传递重要的消息、通知和提示,以提供及时的反馈和指导。同时,用户也可以通过信息传递向应用发送指令、请求和反馈,以实现个性化的需求和操作。 信息传递还可以帮助应用之间实现数

鸿蒙HarmonyOS实战-Stage模型(应用上下文Context)

前言 应用上下文(Context)是应用程序的全局信息的接口。它是一个抽象类,提供了访问应用程序环境的方法和资源的方法。应用上下文可以用于获取应用程序的资源、启动Activity、发送广播等。每个应用程序都有一个应用上下文对象,它在整个应用程序的生命周期内都是唯一的。通过应用上下文,我们可以获得

鸿蒙HarmonyOS实战-Stage模型(AbilityStage组件容器)

前言 组件容器是一种用于管理和组织组件的工具或环境。它可以提供一些基本的功能,如组件的注册、创建、销毁和查找。组件容器通常会维护一个组件的依赖关系,并负责将这些依赖注入到组件中。它还可以提供一些其他的功能,如生命周期管理、事件通知、配置管理等。通过使用组件容器,开发者可以更方便地管理和使用组件,