HarmonyOS 应用间图片分享功能实现

1. 选择图片

1. 配置图片选择参数
   • 创建 PhotoSelectOptions 对象，设置 MIMEType 为 IMAGE_TYPE 限制只能选择图片类型文件
   • 通过 maxSelectNumber = 5 限制最大可选择数量，符合鸿蒙系统图片选择器的多选能力
2. 创建图片选择器实例
   • 使用 PhotoViewPicker 类（鸿蒙媒体访问框架）创建选择器实例，体现鸿蒙 API 的分层设计
3. 调用异步选择方法
   • 通过 select() 方法触发系统图片选择界面，采用 Promise 异步处理机制：
     • 成功回调：提取返回结果中的 photoUris 数组，取首元素赋值给组件状态变量 fileUri，并打印完整 URI 列表
     • 异常处理：捕获 BusinessError 异常，输出包含错误码和消息的日志，符合 ArkTS 错误处理规范

Button("选择图片").onClick(() => {
    // 1 设置选择图片的参数
    const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为 IMAGE
    photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目
    let uris: Array<string> = [];
    
    // 2 创建图片选择器
    const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
    
    // 3 开始选择图片
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        uris = photoSelectResult.photoUris;
        this.fileUri = uris[0];
        console.info('photoViewPicker.select to file succeed and uris are:' + uris);
    }).catch((err: BusinessError) => {
        console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    });
});

2. 拷贝到沙箱

1. 获取沙箱路径
   • 通过 getUIContext().getHostContext() 获取 UIAbility 上下文
   • 使用 cacheDir 属性获取应用专属缓存目录（框架提供的安全存储路径）
2. 生成唯一文件名
   • 通过 split('.').pop() 解析原始文件的扩展名（ArkTS 的字符串操作特性）
   • 使用 Date.now() 生成时间戳作为文件名前缀，确保文件名唯一性
3. 执行文件拷贝
   • 使用 fs.openSync 以只读模式打开源文件（ArkTS 文件系统 API）
   • 调用 fs.copyFileSync 执行文件描述符到目标路径的同步拷贝操作
4. 状态反馈
   • 成功时通过 AlertDialog 显示操作结果（ArkUI 的声明式 UI 组件）
   • 失败时捕获异常并显示错误提示（try-catch 异常处理机制）
5. 数据绑定更新
   • 将生成的缓存路径 copyFilePath 赋值给 this.cacheUri，用于后续数据绑定或状态管理（响应式编程特性）

Button("复制到沙箱").onClick(async () => {
    try {
        const context = this.getUIContext().getHostContext() as common.UIAbilityContext;
        const cacheDir = context.cacheDir;
        const fileType = this.fileUri.split('.').pop(); // 后缀名
        
        // 生成一个新的文件名
        const fileName = Date.now() + '.' + fileType;
        // 通过缓存路径 + 文件名 拼接出完整的路径
        const copyFilePath = cacheDir + '/' + fileName;
        
        // 将文件 拷贝到 临时目录
        const file = fs.openSync(this.fileUri, fs.OpenMode.READ_ONLY);
        fs.copyFileSync(file.fd, copyFilePath);
        
        AlertDialog.show({ message: JSON.stringify('写入到沙箱', null, 2) });
        this.cacheUri = copyFilePath;
    } catch (e) {
        AlertDialog.show({ message: JSON.stringify('写入失败', null, 2) });
    }
});

3. 分享

1. 获取 UI 上下文
   • 通过 this.getUIContext() 获取当前 UI 组件的上下文对象
   • 使用 getHostContext() 获取 UIAbility 上下文，用于后续调用系统分享能力
2. 确定统一数据类型 (UTD)
   • 通过文件后缀名 (jpg/png/webp) 匹配对应的 UTD 类型 ID
   • 使用 utd.getUniformDataTypeByFilenameExtension API 获取标准数据类型标识
3. 构建分享数据对象
   • 创建 systemShare.SharedData 实例，包含：
     • utd：统一数据类型标识
     • title/description：分享时显示的元数据
     • uri：通过 fileUri.getUriFromPath 转换沙箱路径为可访问 URI
4. 初始化分享控制器
   • 创建 systemShare.ShareController 实例，绑定分享数据
5. 显示系统分享界面
   • 调用 controller.show() 步方法，传入：
     • SelectionMode.SINGLE：单选模式
     • SharePreviewMode.DETAIL：详细预览模式

Button("分享").onClick(async () => {
    try {
        // 获取 UI 上下文
        const uiContext: UIContext = this.getUIContext();
        const context: common.UIAbilityContext = uiContext.getHostContext() as common.UIAbilityContext;
        
        // 根据图片格式确定 UTD 类型
        let utdTypeId: string;
        switch (this.fileUri.split('.').pop()) {
            case 'jpeg':
            case 'jpg':
                utdTypeId = utd.getUniformDataTypeByFilenameExtension('.jpg', utd.UniformDataType.IMAGE);
                break;
            case 'png':
                utdTypeId = utd.getUniformDataTypeByFilenameExtension('.png', utd.UniformDataType.IMAGE);
                break;
            case 'webp':
                utdTypeId = utd.getUniformDataTypeByFilenameExtension('.webp', utd.UniformDataType.IMAGE);
                break;
            default:
                utdTypeId = utd.getUniformDataTypeByFilenameExtension('.jpg', utd.UniformDataType.IMAGE);
        }
        
        // 创建分享数据，使用沙箱中的图片 URI
        const shareData: systemShare.SharedData = new systemShare.SharedData({
            utd: utdTypeId,
            title: 'Picture Title',
            description: 'Picture Description',
            uri: fileUri.getUriFromPath(this.cacheUri),
        });
        
        // 创建分享控制器
        const controller: systemShare.ShareController = new systemShare.ShareController(shareData);
        
        // 显示分享界面
        await controller.show(context, {
            selectionMode: systemShare.SelectionMode.SINGLE,
            previewMode: systemShare.SharePreviewMode.DETAIL
        });
        console.log('图片分享成功');
    } catch (e) {
        console.log('图片分享失败');
    }
});

总结

本文介绍了在鸿蒙应用中实现图片分享功能的完整流程。通过 Share Kit 的 systemShare 服务，开发者可以轻松实现应用间的图片分享。核心实现包括三个步骤：

1. 图片选择：使用 PhotoViewPicker 调用系统图片选择器，支持多选并限制文件类型
2. 沙箱拷贝：将选中图片拷贝到应用缓存目录，确保分享时的文件访问权限
3. 分享操作：通过 ShareController 构建分享数据，调用系统分享面板完成跨应用分享

整个流程充分利用了鸿蒙系统的媒体访问框架、文件系统 API 和分享服务，为用户提供了原生、流畅的图片分享体验。