鸿蒙开发实战案例：图片分享案例

原创

小帅聊鸿蒙

发布于 2025-03-03 16:49:06

230

文章被收录于专栏：鸿蒙开发笔记

介绍

本示例介绍使用Share Kit和ShareExtensionAbility实现从图库分享图片到应用的场景。该场景多用于聊天类应用。

效果图预览

使用说明

打开图库选择一张图片，点击左下角分享按钮拉起分享弹窗。
在分享弹窗中选择需要分享的应用，将图片分享到应用。

实现思路

通过Share Kit（分享服务）构造分享数据，启动分享面板选择需要分享过去的应用启动分享。

  // 构造ShareData，需配置一条有效数据信息
  const contextFaker: Context = getContext(this);
  let filePath = contextFaker.filesDir + '/exampleImage.jpg'; // 仅为示例 请替换正确的文件路径
  // 获取精准的utd类型
  let utdTypeId = utd.getUniformDataTypeByFilenameExtension('.jpg', utd.UniformDataType.IMAGE);
  let shareData: systemShare.SharedData = new systemShare.SharedData({
    utd: utdTypeId,
    uri: fileUri.getUriFromPath(filePath),
    title: '图片标题', // 不传title字段时,显示图片文件名
    description: '图片描述', // 不传description字段时,显示图片大小
    thumbnail: new Uint8Array() // 优先使用传递的缩略图预览  不传则默认使用原图做预览图
  });
  shareData.addRecord({
  utd: utdTypeId,
  uri: fileUri.getUriFromPath(filePath),
  title: '图片标题', // 不传title字段时,显示图片文件名
  description: '图片描述', // 不传description字段时,显示图片大小
  });
  // 进行分享面板显示
  let controller: systemShare.ShareController = new systemShare.ShareController(shareData);
  let context = getContext(this) as common.UIAbilityContext;
  controller.show(context, {
    selectionMode: systemShare.SelectionMode.SINGLE,
    previewMode: systemShare.SharePreviewMode.DETAIL,
  }).then(() => {
    console.info('ShareController show success.');
  }).catch((error: BusinessError) => {
    console.error(`ShareController show error. code: ${error.code}, message: ${error.message}`);
  });

构建分享能力Ability，需要在应用配置文件（src/main/module.json5）的skills配置中注册。配置actions为ohos.want.action.sendData，并且uris需穷举所有支持的数据类型。

 "skills": [
   {
      "entities": [
      "entity.system.home"
      ],
     "actions": [
       "action.system.home",
       "ohos.want.action.sendData"
     ],
     "uris": [
       {
         "scheme": "file",
         "utd": "general.image",
         "maxFileSupported": 1
       }
      ]
    }
 ]

在Ability被系统启动时，Ability会收到want数据，在onCreate中want数据中无直接的图片地址通过systemShare.getSharedData获取的图片地址，在onNewWant中want数据中有直接的图片数据可以直接使用。

  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    if (want.parameters!['ability.params.stream'] !== undefined) {
      AppStorage.setOrCreate('imageUri', want.parameters!["ability.params.stream"].toString());
    }
  }

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    systemShare.getSharedData(want)
      .then((data: systemShare.SharedData) => {
        data.getRecords().forEach((record: systemShare.SharedRecord) => {
          // 处理分享数据
          AppStorage.setOrCreate('imageUri', record.uri)
        });
      })
  }

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

通过systemShare.getSharedData或want数据中获取分享的图片地址，直接在页面中渲染页面。

  aboutToAppear() {
    if (AppStorage.get('imageUri') !== undefined) {
      this.shareImageUri = AppStorage.get('imageUri');
      this.textDetailData.push({
        profilePicture: $r('app.media.photo0'),
        shareImageUri: this.shareImageUri,
        content: ''
      });
      // 通知lazyForeach重新加载数据
      this.dataSource.modifyAllData(this.textDetailData);
    }
  }

高性能知识点

不涉及

工程结构&模块类型

   shareimagepage                             // har类型
   |---components
   |   |---ShareImagePage.ets                 // 视图层-分享页面 
   |   |---ListDataSource.ets                 // 数据模型层-聊天列表数据