Tauri应用开发实践指南(4)— Tauri 原生能力

2024-09-05 01:20

本文主要是介绍Tauri应用开发实践指南(4)— Tauri 原生能力,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

原生能力简介

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

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

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

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

"path": {"all": true
}

然后再是dialog的配置

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

直接全部设置为true,感觉每个都需要

 "dialog": {"all": true,"ask": true,"confirm": true,"message": true,"open": true,"save": true
}

最后是file的配置

名称类型默认值描述
scopeFsAllowlistScope[]文件系统 API 的访问范围。
allbooleanfalse使用此标志启用所有文件系统 API 功能。
readFilebooleanfalse从本地文件系统读取文件。
writeFilebooleanfalse将文件写入本地文件系统。
readDirbooleanfalse从本地文件系统读取目录。
copyFilebooleanfalse从本地文件系统复制文件。
createDirbooleanfalse从本地文件系统创建目录。
removeDirbooleanfalse从本地文件删除目录。
removeFilebooleanfalse删除文件
renameFilebooleanfalse重命名文件
existsbooleanfalse检测是否存在文件

我们直接设置如下

 "fs":{"all":true,"scope": ["**"] // 代表所有文件都可以访问
}

到这里,我们前期的配置就完成了,可以用tauri 实现文件下载了。

下载实现

我们因为要实现浏览器环境和tauri环境的下载,所以呢我们需要区分环境,区分环境可以使用

if (window.__TAURI__){// tauri环境
} else {// 浏览器环境
}

另外我们的应用场景是下载多张切割图片,所以需要做ZIP打包压缩处理。

整体思路如下

画板

具体代码如下

import { writeBinaryFile } from '@tauri-apps/api/fs';
import { path, dialog } from '@tauri-apps/api';
import JSZip from 'jszip';
import dayJS from 'dayjs';
import { FileBase64List } from '@/type';// 单个文件下载
export const downloadFileBase64 = async (data: any, fileName: string) => {if (window.__TAURI__){const binaryString = atob(data.split(',')[1]);const len = binaryString.length;const bytes = new Uint8Array(len);for (let i = 0; i < len; i++) {bytes[i] = binaryString.charCodeAt(i);}try {const basePath = await path.downloadDir();let selPath:any = await dialog.save({defaultPath: basePath,});selPath = selPath.replace(/Untitled$/, '');writeBinaryFile({ contents: bytes, path: `${selPath}${fileName}` });} catch (error) {console.error(error);}} else {const link = document.createElement("a");link.download = fileName;link.href = data;document.body.appendChild(link);link.click();document.body.removeChild(link);}
}// tauri批量打包ZIP下载
export const downloadBase64FileWithZip =async (data:FileBase64List,callback:Function) => {const zip = new JSZip();data.forEach(item => {zip.file(item.name, item.data.replace(/^data:image\/(png|jpg);base64,/, ""), { base64: true });});const date = dayJS().format('YYYYMMDDHHmmss');const basePath = await path.downloadDir();let selPath:any = await dialog.save({defaultPath: basePath,});selPath = selPath.replace(/Untitled$/, '');zip.generateAsync({ type: 'blob' }).then((content) => {let file = new FileReader();file.readAsArrayBuffer(content);file.onload = function (e:any) {let fileU8A = new Uint8Array(e.target.result);writeBinaryFile({ contents: fileU8A, path: `${selPath}IMG_${date}.zip` });callback();};});
}// 多个base64文件下载
export const downloadFileBase64List = async (data:FileBase64List,callback:Function) => {if (window.__TAURI__){downloadBase64FileWithZip(data,callback)} else {data.forEach(item => {downloadFileBase64(item.data, item.name)})}
}

源码链接

点击查看Github源码

总结

经过上面的步骤,我们基本上已经了解了 Tauri 原生能力的相关知识,并在一个实际案例中实现了利用这些能力实现文件下载的操作,掌握了整个原生能力对接的流程。不过,Tauri 原生能力的范围有一定限制,如果需要实现一些更加强大和复杂的功能,我们还需要使用到 Tauri 的进程通信机制以及原生能力扩展功能。在后续的章节中,我们将通过实例一步步带你了解这些更高级的特性,让你能够充分发挥 Tauri 的潜力,构建出更加强大的桌面应用程序。

这篇关于Tauri应用开发实践指南(4)— Tauri 原生能力的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1137570

相关文章

Nginx Location映射规则总结归纳与最佳实践

《NginxLocation映射规则总结归纳与最佳实践》Nginx的location指令是配置请求路由的核心机制,其匹配规则直接影响请求的处理流程,下面给大家介绍NginxLocation映射规则... 目录一、Location匹配规则与优先级1. 匹配模式2. 优先级顺序3. 匹配示例二、Proxy_pa

Python中文件读取操作漏洞深度解析与防护指南

《Python中文件读取操作漏洞深度解析与防护指南》在Web应用开发中,文件操作是最基础也最危险的功能之一,这篇文章将全面剖析Python环境中常见的文件读取漏洞类型,成因及防护方案,感兴趣的小伙伴可... 目录引言一、静态资源处理中的路径穿越漏洞1.1 典型漏洞场景1.2 os.path.join()的陷

Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

《Python数据分析与可视化的全面指南(从数据清洗到图表呈现)》Python是数据分析与可视化领域中最受欢迎的编程语言之一,凭借其丰富的库和工具,Python能够帮助我们快速处理、分析数据并生成高质... 目录一、数据采集与初步探索二、数据清洗的七种武器1. 缺失值处理策略2. 异常值检测与修正3. 数据

MyBatis编写嵌套子查询的动态SQL实践详解

《MyBatis编写嵌套子查询的动态SQL实践详解》在Java生态中,MyBatis作为一款优秀的ORM框架,广泛应用于数据库操作,本文将深入探讨如何在MyBatis中编写嵌套子查询的动态SQL,并结... 目录一、Myhttp://www.chinasem.cnBATis动态SQL的核心优势1. 灵活性与可

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3

pytest+allure环境搭建+自动化实践过程

《pytest+allure环境搭建+自动化实践过程》:本文主要介绍pytest+allure环境搭建+自动化实践过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、pytest下载安装1.1、安装pytest1.2、检测是否安装成功二、allure下载安装2.

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹

Python中OpenCV与Matplotlib的图像操作入门指南

《Python中OpenCV与Matplotlib的图像操作入门指南》:本文主要介绍Python中OpenCV与Matplotlib的图像操作指南,本文通过实例代码给大家介绍的非常详细,对大家的学... 目录一、环境准备二、图像的基本操作1. 图像读取、显示与保存 使用OpenCV操作2. 像素级操作3.