OpenHarmony卡片

最新推荐文章于 2024-10-15 14:27:41 发布

m0_54203676

最新推荐文章于 2024-10-15 14:27:41 发布

阅读量171

点赞数

文章标签：前端框架音视频

本文链接：https://blog.csdn.net/m0_54203676/article/details/132488478

版权

文章目录

OpenHarmony卡片

OpenHarmony卡片

摘要：在日常生活中，预览基本服务信息过程比较复杂，为了达到服务直达、减少体验层级的目的，可以将应用的重要信息或操作前置到卡片。本文主要展示了如何通过ArkTS卡片实现一个简单的音乐卡片。

关键字：OpenHarmony、HarmonyOS、鸿蒙、ArkTS、卡片、音乐

概述

卡片是一种界面展示形式，常用于嵌入到其他应用（当前卡片使用方只支持系统应用，如桌面）中作为其界面显示的一部分，并支持拉起页面、发送消息等基础的交互功能。例如查看天气或日历日程等内容的时候，可以将卡片添加到屏幕上，让这类信息触手可及。本示例设计的音乐卡片，可以使用户直接在桌面就能够完成音乐的播放、暂停、下一首和上一首等基本功能，提升了用户的体验。

图1 卡片常见使用步骤
在这里插入图片描述
1.部分设备的桌面不支持卡片，可以通过自己开发的卡片使用方，进行卡片的创建、更新和删除等操作。

2.安装应用，并在桌面上长按本应用的桌面图标，长按后弹出选项列表。

3.点击弹出列表中的服务卡片选项进入卡片预览界面。

4.点击正下方的添加到桌面按钮，卡片就会出现在桌面上。

5.卡片添加到桌面后就可以在桌面进行音乐卡片的操作，包含播放、暂停、下一首、上一首等操作。

实现思路

创建一个卡片

在已有的应用工程中，创建ArkTS卡片，具体的操作方式如下。

创建卡片。

2.根据实际业务场景，选择一个卡片模板。

3.在选择卡片的开发语言类型（Language）时，选择ArkTS选项，然后单击“Finish”，即可完成ArkTS卡片创建。

ArkTS卡片创建完成后，工程中会新增如下卡片相关文件：卡片生命周期管理文件（EntryFormAbility.ts）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json）。

开发音乐卡片

本实例涉及到的主要特性以及实现方案如下：首先通过postCardAction函数进行卡片应用和提供方应用间的交互，之后提供方应用会通过this.callee.on方法来接收卡片应用传过来的string值，并执行播放、暂停、上一首、下一首功能，由于此音乐卡片音乐播放是进行后台播放的，并且音乐播放属于长时任务，所以在播放、上一首和下一首的时候需要执行backgroundTaskManager.startBackgroundRunning方法向系统申请长时任务，点击暂停的时候，需要执行backgroundTaskManager.stopBackgroundRunning方法向系统申请取消长时任务。

开发步骤

初次开发者在开发的时候，一开始会不清楚卡片应用应该通过什么的方式去调用提供方应用内部的能力，这里其实使用的则是postCardAction函数，这个函数主要用于卡片内部和提供方应用间的交互，它支持router、message和call三种类型的事件，如下代码片段所示，我们使用的则是call方法，能够后台启动提供方应用，在使用call方法的时候，需要注意一点的是，参数应该填入’method’，并且类型为string类型，音乐卡片的功能分别为播放、暂停、上一首和下一首，传入的参数分别是“play”、“pause”、“prev”、“next”。

onPlayClick(): void {
   
    postCardAction(this, {
   
      'action': 'call',
      'abilityName': 'EntryAbility',
      'params': {
   
        'method': 'play'
      }
    });
    console.info(TAG, 'postCardAction onPlayClick');
  }

  onPauseClick(): void {
   
    postCardAction(this, {
   
      'action': 'call',
      'abilityName': 'EntryAbility',
      'params': {
   
        'method': 'pause'
      }
    });
    console.info(TAG, 'postCardAction onPauseClick');
  }

  onPreviousClick(): void {
   
    this.selectedIndex--
    if (this.selectedIndex < 0) {
   
      this.selectedIndex = 1
    }
    this.albumSrc = (this.selectedIndex % 2 === 0) ? $r('app.media.album') : $r('app.media.album2');
    postCardAction(this, {
   
      'action': 'call',
      'abilityName': 'EntryAbility',
      'params': {
   
        'method': 'prev'
      }
    });
  }

  onNextClick(): void {
   
    this.selectedIndex++
    if (this