鸿蒙学习-服务卡片进阶

本篇内容来继续鸿蒙的服务卡片相关内容。

其实标题叫进阶不是很准确，应该说是对基础文章中未提到的事件与数据交互部分的补充。

上一篇主要是卡片的创建、生命周期、配置文件等比较基础的部分，我们在实际开发中遇到的需求必然不可能这么简单，肯定牵扯到卡片的事件与数据的交互相关内容，那么今天我们就来看下服务卡片中的卡片事件与数据交互。

卡片事件

在ArkTS的卡片服务中提供了一个 postCardAction()接口，这个接口就是用于卡片内部和应用间的交互。当前支持三种类型的事件，分别是：router、message、call，只在卡片内可以调用。

kotlin 复制代码

postCardAction(this, {
  'action': this.ACTION_TYPE,
  'abilityName': this.ABILITY_NAME
});

由以上代码可知:：postCardAction的接受参数有两个，分别是component和action，component为当前自定义组件的实例，所以一般传this。

action为Object，其中包含的有：

action: "router","message","call"
bundleName: 包名
moduleName: 模块名
abilityName: UIAbility名
patams: action携带的额外参数，内容需要使用JSON格式的键值对

下面我们分别看下这几个事件

router事件

router可以快速拉起卡片所属应用指定的UIAbility

scss 复制代码

build() {
  Row() {
    Column() {
      Text($r('app.string.name_color6'))
        .fontSize($r('app.float.font_size'))
        .fontColor(Color.White)

      Text($r('app.string.code_color6'))
        .fontSize($r('app.float.font_size'))
        .fontColor(Color.White)
    }
    .width(this.FULL_WIDTH_PERCENT)
  }
  .backgroundColor($r('app.color.color6'))
  .height(this.FULL_HEIGHT_PERCENT)
  .onClick(() => {
    this.jumpToAbility()
  })
}

jumpToAbility() {
  postCardAction(this, {
    'action': 'router',
    'abilityName': 'EntryAbility',
    "params": {
      "message": this.MESSAGE
    }
  });
}

如以上代码，我在卡片的点击事件中添加了postCardAction事件，然后将其类型指定为router，跳转的abilityName为当前应用的UIAbility，并且添加了需要传递的信息params，params的参数时key、value形式。

以上就是卡片页面发送router事件的代码，那么我们如何在UIAbility中接收router事件呢？

javascript 复制代码

onCreate(want, launchParam) {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
}

onNewWant(want, launchParam){
  
}

主要是onCreate、onNewWant这两个生命周期内，那么他们两个的区别呢，我们回到开始的图：

区别就是是否是第一次启动：

如果是第一次启动，在收到Router事件后会触发onCreate的回调
如果不是第一次启动已经在后台运行，在收到Router事件后会触发onNewWant的回调

所以我们一把情况下是在两个生命周期内都要进行处理，除非是特殊的只有第一次启动的特殊需求。

call事件

如果我们希望在卡片上实现和应用在前台时相同的功能，比如说音乐应用的卡片，我们希望能扣通过点击卡片来实现播放暂停等功能时就可以使用call事件。

kotlin 复制代码

postCardAction(this, {
  'action': 'call',
  'abilityName': 'EntryAbility',
  "params": {
     "method": 'funA'
  }
});

在call事件时发送事件的代码我们需要注意两点，分别是action、params，action中我们需要将router换为call，params中不再是key、value形式，而是固定的method。

下面我们来看接受：

首先我们需要一个function来获取call事件中传递的参数

javascript 复制代码

function FunACall(data){
  ...
  return null;
}

然后在onCreate中进行持续监听：

javascript 复制代码

onCreate(want, launchParam) {
  try {
    this.callee.on('funA', FunACall);
  } catch (error){
    console.log('error')
  }
}

因为我们是在持续监听所以一直在消耗内存，所以我们需要在onDestroy中进行解除：

javascript 复制代码

onDestroy() {
  try {
    this.callee.off('funA');
  } catch (error){
    console.log('error')
  }
}

message

message主要用于刷新卡片的内容，但是其实router、call、message都可以刷新卡片内容，我们以message来进行距举例：

javascript 复制代码

onFormEvent(formId, message) {
  let formData = {
    'color_name': '',
    'color_code': '',
  }
  let formInfo = formBindingData.createFormBindingData(formData)
  formProvider.updateForm(formId,formInfo).then((data) => {
    console.log('success' + JSON.stringify(data));
  }).catch((error) => {
    console.error('error' + JSON.stringify(error))
  })
}

我们来分析下上面的代码，formData是需要更新的数据，键值对名称需要与卡片的参数对应。

然后创建formInfo

真正更新方法其实是formProvider.updateForm方法，需要传入两个参数，一个是formId另一个就是刚刚创建的formInfo

这样我们就完成了卡片的刷新。

数据交互

这里的数据交互并不是用户相关的操作（用户相关的数据操作我们在上面的事件中已经进行了说明），这里说的是我们设置的卡片内容的定时刷新的相关内容。

定时刷新

卡片的定时刷新，这一块我们在上一篇中进行了介绍，这里就不再进行说明。

下次刷新

指定卡片的下一次刷新时间，最短时间是5分钟，例如在调用接口或者其他操作的5分钟后进行卡片内容的刷新。

需要通过formProvider.setFormNextRefreshTime方法

javascript 复制代码

.onClick(() => {
  try {
    formProvider.setFormNextRefreshTime(formId, 5, (err, data) => {

    })
  }catch (err){
    
  }
})

例如上面的代码中我在点击事件中调用了formProvider.setFormNextRefreshTime方法，其中formId需要自己定义，时间这里的5是最短时间只能大于不能小于。

以上就是鸿蒙的ArkTS中服务卡片相关的内容，如果文中有错误之处欢迎评论指出。

让我们互相学习共同进步！最后提前祝大家春节快乐！