HarmonyOS鸿蒙Next中uni-app实现卡片示例

HarmonyOS鸿蒙Next中uni-app实现卡片示例

场景介绍

uni-app实现卡片示例是实用工具类应用的高频使用场景之一，如用户可以直接点击卡片页面的按钮，从而执行对应的方法。 本示例使用postCardAction接口实现拉起应用到后台，并执行相应的方法。

效果预览

实现思路

1. FormExtensionAbility为卡片扩展模块，提供卡片创建、销毁、刷新等生命周期回调。

import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';
import { FormData } from '../common/model/FormData';
import { FormInfo } from '../common/model/FormInfo';
import Logger from '../common/utils/Logger';
import { PreferencesUtil } from '../common/utils/PreferencesUtil';

const TAG: string = 'EntryFormAbility';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want): formBindingData.FormBindingData {
    // Called to return a FormBindingData object.
    if (!want || !want.parameters) {
      return formBindingData.createFormBindingData('');
    }

    let formId = want.parameters['ohos.extra.param.key.form_identity'] as string;
    let formDimension = want.parameters['ohos.extra.param.key.form_dimension'] as string;
    let formName = want.parameters['ohos.extra.param.key.form_name'] as string;

    let formInfo = new FormInfo();
    formInfo.formId = formId;
    formInfo.formDimension = formDimension;
    formInfo.formName = formName;
    Logger.info(TAG, `onAddForm formInfo: ${JSON.stringify(formInfo)}`);
    let util = PreferencesUtil.getInstance();
    let preferences = util.getPreferences(this.context);
    // Save form id using preferences.
    util.addFormId(preferences, formId);

    if (formName === 'DeviceInfo2x4Widget') {
      let formData = new FormData(formId);
      formData.batterySOCInfo = preferences.getSync('batterySOCInfo', 0) as number;
      formData.storageInfo = preferences.getSync('storageInfo',
        `${this.context.resourceManager.getStringSync($r('app.string.notFoundStorage').id)}`) as string;
      formData.totalStorageGB = preferences.getSync('totalStorageGB', 0) as number;
      formData.usedStorageGB = preferences.getSync('usedStorageGB', 0) as number;
      formData.freeStorageGB = preferences.getSync('freeStorageGB', 0) as number;
      formData.marketName = preferences.getSync('marketName',
        `${this.context.resourceManager.getStringSync($r('app.string.notFoundMarketName').id)}`) as string;
      formData.brand = preferences.getSync('brand',
        `${this.context.resourceManager.getStringSync($r('app.string.notFoundBrand').id)}`) as string;

      let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
      return formInfo;
    }

    return formBindingData.createFormBindingData('');
  }

  onCastToNormalForm(formId: string) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
  }

  onUpdateForm(formId: string) {
    // Called to notify the form provider to update a specified form.
  }

  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
  }

  async onRemoveForm(formId: string): Promise<void> {
    // Called to notify the form provider that a specified form has been destroyed.
    PreferencesUtil.getInstance().removeFormId(this.context, formId);
  }

  onAcquireFormState(want: Want) {
    return formInfo.FormState.READY;
  }
};

1. 拉起应用至后台时更新卡片：在卡片页面中注册onClick()点击事件，在回调中调用postCardAction接口，action参数选择call并配置需要调用的方法和传递数据。

postCardAction(this, {
  action: 'call',
  abilityName: 'MyEntryAbility',
  params: {
    formId: this.formId,
    method: 'updateForm2x4Call',
  }
});

1. 应用在后台，触发UIAbility中对应的同名方法。

// method方法与参数
updateBatteryInfoCall = (data: rpc.MessageSequence) => {}

// 在UIAbility的onCreate()中进行监听
this.callee.on('updateBatteryInfoCard', this.updateBatteryInfoCall);

约束与限制

• 本示例支持API Version 20 Release及以上版本。
• 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
• 本示例需要使用HBuilderX 4.87、DevEco Studio 6.0.0 Release及以上版本进行编译运行。

工程目录

├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json                                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs                           // harmony工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
│  └─entry
│      └─src
│          └─main
│              └─module.json5               // 应用配置文件，配置requestPermissions等信息
├─pages
│  └─index
│      └─index.vue                          // 首页
├─static                                    // 静态资源文件
└─uni_modules                               // 插件目录，用于存放uni-app的插件

参考文档

FormExtensionAbility postCardAction 卡片更新与数据交互 通过router或call事件刷新卡片内容

代码示例

详情见 uni-app实现卡片示例。