HarmonyOS 系统分享功能概述

🎯 想入门鸿蒙开发又怕花冤枉钱?别错过!

现在能免费系统学 —— 从 ArkTS 面向对象核心的类和对象、继承多态,到吃透鸿蒙开发关键技能,还能冲刺鸿蒙基础 + 高级开发者证书,更惊喜的是考证成功还送好礼!快加入我的鸿蒙班,一起从入门到精通!

班级链接鸿蒙开发训练营

功能简介

HarmonyOS 系统分享功能为应用提供了统一的内容分享能力,支持文本、图片、视频、文件等多种类型内容的分享。通过系统分享面板,用户可以便捷地将内容分享到其他应用或设备。

场景介绍

手机设备分享

在手机设备中,分享框通过模态弹窗方式被拉起,提供直观的分享界面。

2in1设备分享

在2in1设备上分享框通过Popup形式展示,适配大屏设备的交互体验。

分享内容类型

  • 宿主应用可以分享一段文本、一个文件或一条备忘录到其他应用
  • 宿主应用可以分享多个内容,如文本、图片等到其他应用

业务流程

基本流程

  1. 宿主应用构造分享数据、构造ShareController以及注册分享面板状态监听(可选)
  2. 宿主应用拉起系统分享面板
  3. 用户可选择目标设备或者应用
  4. 目标应用处理分享数据,并关闭系统分享面板

宿主应用接入模式

为应对开发者接入系统分享能力时的不同诉求,Share Kit支持两种宿主应用接入模式。

全接模式

  • 接入方式:直接使用系统分享面板
  • 适用应用类型:适用于华为自研应用以及对分享方式区无商业诉求的开发者,可直接使用系统面板,降低开发成本
  • 效果:直接使用系统分享面板

半接模式

  • 接入方式:开发者自行开发分享能力面板,并在分享面板中提供系统分享入口
  • 适用应用类型:适用于分享方式区有商业诉求,或有自己独有的业务逻辑的开发者
  • 效果:左侧为自开发分享面板,同时提供系统分享入口,用户点击时调用系统分享面板

半接模式示例代码片段

为了确保用户获得良好的分享体验,图标请使用HarmonyOS系统资源"$r(‘sys.symbol.share’)“,文本使用"系统分享”,请勿自行更改。

// 分享图标使用系统提供的Symbol格式图标
SymbolGlyph($r('sys.symbol.share'))
// 文本使用'系统分享'
Text('系统分享')

通过分享面板发起分享

接口说明

类名 接口名 描述
SharedData constructor(record: SharedRecord) SharedData构造函数
addRecord(record: SharedRecord): void 添加分享记录
getRecords(): Array 获取分享记录
ShareController constructor(data: SharedData) ShareController构造函数
show(context: common.UIAbilityContext, options: ShareControllerOptions): Promise 显示分享面板
on(event: ‘dismiss’, callback: () => void): void 注册分享面板关闭事件监听
off(event: ‘dismiss’, callback: () => void): void 取消分享面板关闭事件监听

开发步骤

根据不同的分享场景,参考下表:

分享场景 参考链接
分享App Linking直达应用 分享App Linking直达应用
分享图片 分享图片
分享视频 分享视频
分享普通链接直达浏览器 分享普通链接直达浏览器
分享文本 分享文本

2in1设备配置示例

2in1设备可通过配置的方式决定分享面板的显示位置。

// 导入相关模块
import { common } from '@kit.AbilityKit';
import { systemShare } from '@kit.ShareKit';
import { uniformTypeDescriptor as utd } from '@kit.ArkData';

// 构造分享数据,可添加多条分享记录
let data: systemShare.SharedData = new systemShare.SharedData({
  utd: utd.UniformDataType.PLAIN_TEXT,
  content: 'Hello HarmonyOS'
});

// 构建ShareController
let controller: systemShare.ShareController = new systemShare.ShareController(data);
// 获取UIAbility上下文对象
let uiContext: UIContext = this.getUIContext();
let context: common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;

// 注册分享面板关闭监听
controller.on('dismiss', () => {
  console.info('Share panel closed');
  // 分享结束,可处理其他业务。
});

// 进行分享面板显示
// 方法一:配置分享面板关联的控件ID 
controller.show(context, {
  anchor: 'shareButtonId'
});

// 方法二:配置分享面板显示的坐标
controller.show(context, {
  anchor: {
    // 必选 相对锚点的窗体偏移值
    windowOffset: { x: 100, y: 100 },
    // 可选 组件的宽高 配置后会综合计算组件的大小
    size: { width: 0, height: 0 }
  }
});

自定义配置操作区

场景介绍

系统操作区提供了复制、保存、另存为、打印、复制到中转站等系统级快捷操作。宿主应用可以根据自己的业务体验需要判断是否给用户提供相关操作。

开发步骤

// 导入相关模块
import { common } from '@kit.AbilityKit';
import { fileUri } from '@kit.CoreFileKit';
import { systemShare } from '@kit.ShareKit';
import { uniformTypeDescriptor as utd } from '@kit.ArkData';

// 构造分享数据,可添加多条分享记录
let data: systemShare.SharedData = new systemShare.SharedData({
  utd: utd.UniformDataType.PLAIN_TEXT,
  content: 'Hello HarmonyOS'
});

// 额外再添加一条记录
let uiContext: UIContext = this.getUIContext();
let contextFaker: Context = uiContext.getHostContext() as Context;
let filePath = contextFaker.filesDir + '/exampleImage.jpg'; // 仅为示例 请替换正确的文件路径
data.addRecord({
  utd: utd.UniformDataType.PNG,
  uri: fileUri.getUriFromPath(filePath)
});

// 构建ShareController
let controller: systemShare.ShareController = new systemShare.ShareController(data);
let context: common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;

// 注册分享面板关闭监听
controller.on('dismiss', () => {
  console.info('Share panel closed');
  // 分享结束,可处理其他业务。
});

// 进行分享面板显示,并配置不显示打印快捷操作
controller.show(context, {
  previewMode: systemShare.SharePreviewMode.DETAIL,
  selectionMode: systemShare.SelectionMode.SINGLE,
  excludedAbilities: [systemShare.ShareAbilityType.PRINT]
})

获取分享结果

场景介绍

基于业务实现需要,开发者可统计用户使用分享功能时,将内容分享到了哪些渠道。渠道信息规则如下:

  • 系统操作有固定名称。请参见:ShareAbilityName
  • 非系统操作采用’[bundleName]#[moduleName]#[abilityName]'格式拼接

开发步骤

// 导入相关模块
import { common } from '@kit.AbilityKit';
import { systemShare } from '@kit.ShareKit';
import { uniformTypeDescriptor as utd } from '@kit.ArkData';

// 构造分享数据
let data: systemShare.SharedData = new systemShare.SharedData({
  utd: utd.UniformDataType.PLAIN_TEXT,
  content: 'Hello HarmonyOS'
});

// 构建ShareController
let controller: systemShare.ShareController = new systemShare.ShareController(data);
// 获取UIAbility上下文对象
let uiContext: UIContext = this.getUIContext();
let context: common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;

// 注册分享结果事件监听
controller.on('shareCompleted', (result: systemShare.ShareOperationResult) => {
  console.info('shareCompleted name:', result.targetAbilityInfo.name);
  // 可根据分享渠道进行数据统计等操作
});

// 进行分享面板显示
controller.show(context, {
  previewMode: systemShare.SharePreviewMode.DEFAULT,
  selectionMode: systemShare.SelectionMode.SINGLE
});

技术要点

分享数据类型

  • PLAIN_TEXT:纯文本
  • PNG/JPG:图片文件
  • VIDEO:视频文件
  • FILE:通用文件
  • LINK:链接

分享面板配置选项

  • previewMode:预览模式(DEFAULT/DETAIL)
  • selectionMode:选择模式(SINGLE/MULTIPLE)
  • excludedAbilities:排除的能力类型
  • anchor:锚点配置(控件ID或坐标)

事件监听

  • dismiss:分享面板关闭事件
  • shareCompleted:分享完成事件

最佳实践

  1. 选择合适的接入模式:根据业务需求选择全接模式或半接模式
  2. 合理配置操作区:根据分享内容类型配置合适的系统操作
  3. 监听分享结果:通过事件监听统计分享渠道,优化用户体验
  4. 适配不同设备:针对手机和2in1设备提供不同的交互体验
  5. 错误处理:妥善处理分享过程中的异常情况

注意事项

  1. 半接模式中必须使用系统提供的分享图标和文本
  2. 分享数据必须包含有效的UTD类型和内容
  3. 2in1设备需要正确配置分享面板的显示位置
  4. 及时清理事件监听器,避免内存泄漏
  5. 遵循HarmonyOS设计规范,提供一致的用户体验
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐