鸿蒙服务卡片,点击事件,传值

用来显示或者提示一些基本信息,或进行一些基本操作,不能使用重逻辑

新建:1、在ets目录上右击;2、选择Service Widget;3、Dynamic Widget

其中Static Widget,只能做静态页面,不能做数据交互

Dynamic Widget可以做动态数据,及事件处理

在entry的model.json5中,

复制代码
 "extensionAbilities": [
      {
        "name": "EntryFormAbility",
        "srcEntry": "./ets/entryformability/EntryFormAbility.ets",
        "label": "$string:EntryFormAbility_label",
        "description": "$string:EntryFormAbility_desc",
        "type": "form",
        "metadata": [
          {
            "name": "ohos.extension.form",
            "resource": "$profile:form_config"
          }
        ]
      }
    ]

就是的ability,在这个ability上,就是卡片

在EntryFormAbility中,最主要的方法:onAddForm(),就是做主要的逻辑处理

在Resources / base / profile / form_config.json中,就是卡片的配置

复制代码
{
  "forms": [
    {
      "name": "widget",
      "displayName": "$string:widget_display_name",
      "description": "$string:widget_desc",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": true,
      "updateEnabled": false,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2",
        "2*4"
      ]
    }
  ]
}

卡片可以选择2*2和2*4

作用:展示数据、唤起应用;不支持包、不支持网络请求;

在应用的model.json5中,加入权限

复制代码
    'requestPermissions': [{
      "name": 'ohos.permission.KEEP_BACKGROUND_RUNNING'
    }],
复制代码
WidgetCard.ets
复制代码
@Entry
@Component
struct WidgetCard {
  @State num: number = 0

  build() {
    Row() {
      Column() {

        Button(this.num + '++').onClick(() => {
          this.num++
          postCardAction(this, {
            action: 'call',
            abilityName: 'EntryAbility',
            params:{
              method:'updataNum',
              num:this.num
            }
          });
        })
      }.width('100%')
    }
    .height('100%')
    .onClick(() => {
      postCardAction(this, {
        action: 'router', //跳转事件
        abilityName: 'EntryAbility',

      });
    })
  }
}

应用的界面:

复制代码
import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @StorageLink('num')
  num:number=0

  build() {
    RelativeContainer() {
      Text(this.message+this.num)
    }
    .height('100%')
    .width('100%')
  }


}
复制代码
EntryAbility.ets
复制代码
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { rpc } from '@kit.IPCKit';

class Params implements rpc.Parcelable{
  marshalling(dataOut: rpc.MessageSequence): boolean {
    return true
  }

  unmarshalling(dataIn: rpc.MessageSequence): boolean {
    return true
  }

}

class CaraParam{
  num:number=0
}

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');

    this.callee.on('updataNum',(data)=>{
      let res=JSON.parse(data.readString())as CaraParam
      AppStorage.setOrCreate('num',res.num)
      return new Params()
    })
  }

//销毁监听
  onDestroy(): void {
    this.callee.off('updataNum')
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }
相关推荐
Hcourage2 小时前
鸿蒙工程获取C/C++代码覆盖
harmonyos
二流小码农8 小时前
鸿蒙开发:上传一张参考图片便可实现页面功能
android·ios·harmonyos
万少18 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
Huang兄1 天前
鸿蒙-List和Grid拖拽排序:仿微信小程序删除效果
harmonyos·arkts·arkui
anyup2 天前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
Ranger09292 天前
鸿蒙开发新范式:Gpui
rust·harmonyos
Huang兄2 天前
鸿蒙-深色模式适配
harmonyos·arkts·arkui
SummerKaze4 天前
为鸿蒙开发者写一个 nvm:hmvm 的设计与实现
harmonyos
在人间耕耘6 天前
HarmonyOS Vision Kit 视觉AI实战:把官方 Demo 改造成一套能长期复用的组件库
人工智能·深度学习·harmonyos
王码码20356 天前
Flutter for OpenHarmony:socket_io_client 实时通信的事实标准(Node.js 后端的最佳拍档) 深度解析与鸿蒙适配指南
android·flutter·ui·华为·node.js·harmonyos