鸿蒙服务卡片

卡片特点:

  1. 卡片可以承载少量的内容显示和交互

  2. 卡片可以充当元服务的入口,点击卡片可以唤起元服务

服务卡片-应用双向通信

卡片 => 应用

使用postCardAction方法

TypeScript 复制代码
@Entry
@Component
struct MainPic {
  @State
  num: number = 0
  build() {
    Column({ space: 10 }) {
      Row({ space: 10 }) {
        Button("-")
          .onClick(() => {
            this.num && this.num--
          })
        Text(this.num.toString())
          .fontSize(20)
        Button("+")
          .onClick(() => {
            this.num++
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }
}

点击卡片唤起应用

TypeScript 复制代码
.onClick(() => {
      postCardAction(this, {
        action: 'router',
        abilityName: 'EntryAbility',
      })
    })

加1减1传递当前的数字

TypeScript 复制代码
@Entry
@Component
struct Count {
  @State
  num: number = 0

  build() {
    Row({ space: 10 }) {
      Button("-")
        .onClick(() => {
          if(this.num)
              this.num--
          postCardAction(this, {
            action: 'call',
            abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            params: {
              // 使用call方式 需要第二个参数
              method: 'updateNum', // 名字必须叫method method的值是在ability中监听的方法名
              num: this.num
            }
          })
        })
      Text(this.num.toString())
        .fontSize(20)
      Button("+")
        .onClick(() => {
          this.num++
          postCardAction(this, {
            action: 'call',
            abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            params: {
              method: 'updateNum', // 名字必须叫method method的值是在ability中监听的方法名
              num: this.num
            }
          })
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .onClick(() => {
      postCardAction(this, {
        action: 'router',
        abilityName: 'EntryAbility'
      })
    })
  }
}

请注意,如果使用call方式传递调用,需要开启一个后台权限-保持应用在后台

TypeScript 复制代码
 "requestPermissions": [{
      "name": "ohos.permission.KEEP_BACKGROUND_RUNNING"
    }],

在ability的onCreate采用callee接收调用方法

callee方法的第一个参数为调用方法名,第二个参数必须返回一个实现rpc.Parcelable的实现类对象

定义一个Params的参数对象

TypeScript 复制代码
import rpc from '@ohos.rpc';
class Params implements rpc.Parcelable {
  marshalling(messageSequence: rpc.MessageSequence): boolean {
    return true;
  }
  unmarshalling(messageSequence: rpc.MessageSequence): boolean {
    return true;
  }
}

在ability中监听callee调用的方法

TypeScript 复制代码
// 声明一个接收参数的对象
class CardParams {
  num: number = 0
}
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    this.callee.on("updateNum", (data) => {
      const res = JSON.parse(data.readString()) as CardParams
      AppStorage.setOrCreate("num", res.num)
      return new Params()
    })
  }
相关推荐
AI砖家4 分钟前
Claude Code Superpowers 安装使用指南:让 AI 编程从“业余”走向“工程化”
前端·人工智能·python·ai编程·代码规范
李白的天不白16 分钟前
webpack 与axios 版本冲突问题
前端·webpack·node.js
aqi0020 分钟前
一文读懂 HarmonyOS 6.1 带来的十大重要升级
android·华为·harmonyos·鸿蒙·harmony
特种加菲猫41 分钟前
多态:让代码拥有“千变万化”的能力
开发语言·c++
智能化咨询41 分钟前
(105页PPT)华为智慧供应链ISC+IT蓝图规划设计方案ISC+战略愿景与蓝图设计ISC+能力框架与架构设计实施路径(附下载方式)
华为
Java后端的Ai之路42 分钟前
模型调好了怎么给老板看?用这玩意儿5分钟出Demo,连前端都不用学:Gradio 6全栈实战指南
前端·机器学习·gradio
木斯佳44 分钟前
前端八股文面经大全:中科星图前端日常实习(2026-04-29)·面经深度解析
前端
Mr_pyx1 小时前
【LeetHOT100】LRU缓存——Java多解法详解
java·开发语言
zx2859634001 小时前
Laravel 4.x:颠覆PHP框架的10大革新特性
开发语言·php·laravel
heRs BART1 小时前
spring-boot-starter和spring-boot-starter-web的关联
前端