自学记录：鸿蒙API 13完成文件预览功能

那天上午，刚到公司坐下，正准备喝口咖啡，就听见老板喊了我的名字。“小李，客户要个新功能，能够在应用里直接预览各种文件类型，最好还能自定义窗口大小。下午就要开会讨论，你看能搞定吗？”

听完，我脑袋里顿时浮现了两个字：挑战。但作为一个开发者，这种需求不正是我们成长的机会吗？我一边答应着，一边打开了HarmonyOS最新的API文档，心想着：这次可不能掉链子。

---

学习API：探索HarmonyOS的文件预览模块

我首先找到的模块是@kit.PreviewKit，它提供了一个强大的文件预览能力，可以快速启动预览界面，支持多种文件类型，包括文本、图片、音频、视频等。这正是我需要的！

官方文档写得很清楚，我决定从最简单的openPreview方法开始试验。这个方法需要传入三个主要参数：

• context：上下文对象，常用的是UIAbilityContext。
• file：文件信息，包括标题、URI和文件类型（MIME类型）。
• info：可选的显示信息，比如预览窗口的位置和大小。

第一步：环境准备

先配置项目环境，确保引入了最新的HarmonyOS库：

import { filePreview } from '@kit.PreviewKit';

我还创建了一个基础的UI页面，方便测试预览功能。完成这些后，开始动手实现。

---

实现文件预览功能

为了测试文件预览，我准备了一个简单的文本文件1.txt，放在设备的文档目录中。

import { BusinessError } from '@kit.BasicServicesKit';
import { filePreview } from '@kit.PreviewKit';

// 获取UI上下文
let uiContext = getContext(this);

// 定义显示窗口的属性
let displayInfo: filePreview.DisplayInfo = {
  x: 100, // 窗口起始X轴位置
  y: 100, // 窗口起始Y轴位置
  width: 800, // 窗口宽度
  height: 800 // 窗口高度
};

// 定义文件预览信息
let fileInfo: filePreview.PreviewInfo = {
  title: '测试文件',
  uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
  mimeType: 'text/plain'
};

// 打开文件预览窗口
filePreview.openPreview(uiContext, fileInfo, displayInfo).then(() => {
  console.info('成功打开文件预览窗口');
}).catch((err: BusinessError) => {
  console.error(`打开预览失败，错误码：${err.code}，错误信息：${err.message}`);
});

这段代码中，openPreview是核心方法。运行后，我看到一个悬浮窗口成功显示出文本内容，这让我信心倍增。

---

优化与扩展

当功能基本实现后，我开始思考一些细节优化：

1.多文件支持

如果需要预览多个文件，可以使用openPreview(context, files, index)，并传入文件数组和初始文件索引。

let files: Array<filePreview.PreviewInfo> = [
  {
    title: '文件1',
    uri: 'file://docs/storage/Users/currentUser/Documents/file1.txt',
    mimeType: 'text/plain'
  },
  {
    title: '图片',
    uri: 'file://docs/storage/Users/currentUser/Documents/image.jpg',
    mimeType: 'image/jpeg'
  }
];

filePreview.openPreview(uiContext, files, 0).then(() => {
  console.info('多文件预览成功');
}).catch((err: BusinessError) => {
  console.error(`多文件预览失败，错误码：${err.code}，错误信息：${err.message}`);
});

2.动态检查文件是否可预览

在实现过程中，我发现有些文件类型可能不被支持，所以决定在预览前检查文件的可预览性。

let uri = 'file://docs/storage/Users/currentUser/Documents/file1.txt';
filePreview.canPreview(uiContext, uri).then((result) => {
  if (result) {
    console.info('文件可预览');
  } else {
    console.warn('文件不可预览');
  }
}).catch((err: BusinessError) => {
  console.error(`检查失败，错误码：${err.code}，错误信息：${err.message}`);
});

3.关闭预览窗口

如果需要在特定时机关闭窗口，可以调用closePreview方法。

filePreview.closePreview(uiContext).then(() => {
  console.info('预览窗口已关闭');
}).catch((err: BusinessError) => {
  console.error(`关闭预览窗口失败，错误码：${err.code}，错误信息：${err.message}`);
});

---

成果展示与思考

下午的会议上，我向老板展示了实现的功能：

• 单文件预览：文本、图片、视频一应俱全。
• 窗口自定义：可以自由调整位置和大小。
• 多文件切换：轻松预览多个文件。

老板看了非常满意，不仅表扬了我的效率，还决定将这个功能推广到更多产品中。

通过这次开发，我深刻体会到HarmonyOS的强大生态与模块化设计，尤其是API 13的新特性，让复杂功能的实现变得更加高效。

后记

这个项目让我明白，面对复杂需求时，最重要的是快速学习和有效运用官方资源。同时，多花点时间在细节上，才能让产品更加完善。希望这篇文章能给大家带来一些启发，也欢迎一起探讨HarmonyOS的更多可能性！

如果你也在学习鸿蒙，不如也关注我，我们一起进步。