Tauri应用开发实践指南（4）— Tauri 原生能力

最新推荐文章于 2025-10-14 09:13:15 发布

原创

最新推荐文章于 2025-10-14 09:13:15 发布 · 2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言

本文首发于微信公众号：前端徐徐。欢迎关注，获取更多前端技能分享。

原生能力简介

Tauri 是一个用于构建安全的小型桌面应用程序的框架,它结合了 Web 前端和系统后端技术。Tauri 提供了一些原生能力,让您的 Web 应用程序能够访问本地系统资源和 API,主要包括以下几个方面:

文件系统访问 Tauri 允许你的 Web 应用程序读取、写入和监视本地文件系统中的文件和目录。这对于处理用户文档、保存应用程序数据等场景非常有用。
系统托盘 Tauri 支持在系统托盘区显示应用程序图标,并提供自定义的上下文菜单,让您可以构建类似于本机桌面应用程序的用户体验。
本地消息通知 您可以使用 Tauri 在桌面系统上显示本地通知,让用户获得关于应用程序状态或重要事件的反馈。
剪贴板访问 Tauri 允许您读取和写入系统剪贴板中的文本和图像数据。
对话框和文件选择器 使用 Tauri,您可以在应用程序中调用本地对话框,如打开文件、保存文件和显示消息框等,提高与用户的交互体验。
命令行参数 Tauri 使您能够访问用于启动应用程序的命令行参数。
全局捷径 您可以注册全局键盘快捷键,以便在应用程序运行时响应特定的键盘输入。
系统信息 Tauri 提供对系统信息的访问,包括 CPU、内存、网络等,允许您构建跨平台的系统监视工具。
更新检查 使用 Tauri,您可以检查应用程序的更新并提示用户进行更新。

通过利用这些原生能力,您可以构建功能强大且与本地桌面应用程序体验无缝集成的 Web 应用程序。Tauri 的目标是最大限度地减少 Web 和本机之间的鸿沟,同时保持了 Web 开发的高效性和可移植性。

我们这里以一个文件系统访问的场景来实现一下相应的能力，这里会涉及到一些配置以及Tauri的API的基本使用。

实战应用场景

在实现Tauri文件存储相关的功能之前，需要把相应的页面完成。大概效果如下，一个切割图片的工具，可上传图片，然后下载切割的图片，在这个场景里就会涉及到原生能力的调用，主要是文件相关的原生能力。

在这个场景中，我们常规的在浏览器的下载模式和方法是这样的。利用了浏览器提供的元素的 download 和 href 属性,创建了一个临时的链接,并触发了点击事件,从而实现了文件下载的功能。它可以下载来自 URL 或者 Blob 对象的文件。

const downloadSlice = (sliceData: any, fileName: string) => {
   
   
    const link = document.createElement("a");
    link.download = fileName;
    link.href = sliceData;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

但是在Tauri中我们就不能这样做了，我们需要使用 Tauri的原生能力，主要是这三个模块：path模块，dialog模块，fs模块。path模块获取文件路径，dialog模块让用户选择文件对话框，fs模块存储文件。因为Tauri在使用相应的模块的时候是需要配置相应的权限的，否则无法在代码中使用相关方法，下面就具体讲解一下如何在Tauri实现文件下载的功能。

Tauri实现文件下载

修改配置

上面已经提到了，在Tauri中使用相应的原生模块的时候是需要配置相应的权限的，下面我们就来配置一下相关的权限，然后讲解一下相关的配置项。

首先是path的配置

名称	类型	默认值	描述
all	boolean	false	使用此标志启用所有路径 API 功能。

所以如果要启用路径API的话，需要设置其为true

"path": {
   
   
  "all": true
}

然后再是dialog的配置

名称	类型	默认值	描述
all	boolean	false	使用此标志启用所有对话框 API 功能。
open	boolean	false	允许 API 打开对话框窗口来选择文件。
save	boolean	false	允许 API 打开一个对话框窗口来选择保存文件的位置。
message	boolean	false	允许 API 显示消息对话框窗口。
ask	boolean	false	允许 API 显示带有是/否按钮的对话框窗口。
confirm	boolean	false	允许 API 显示带有“确定”/“取消”按钮的对话框窗口。