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

2024-09-05 01:20
文章标签 实践 应用 开发 指南 能力 原生 tauri

本文主要是介绍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。

相关文章

基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
zoj3820(树的直径的应用)

zoj3820(树的直径的应用)

题意：在一颗树上找两个点，使得所有点到选择与其更近的一个点的距离的最大值最小。 思路：如果是选择一个点的话，那么点就是直径的中点。现在考虑两个点的情况，先求树的直径，再把直径最中间的边去掉，再求剩下的两个子树中直径的中点。 代码如下： #include <stdio.h>#include <string.h>#include <algorithm>#include <map>#
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2