Tauri2学习笔记

教程地址：https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from=333.788.player.switch&vd_source=707ec8983cc32e6e065d5496a7f79ee6
官方指引：https://tauri.app/zh-cn/start/

目前Tauri2的教程视频不多，我按照Tauri1的教程来学习，转成Tauri2

一、Tauri2 安装

  1. 安装win系统依赖，Microsoft C++

https://visualstudio.microsoft.com/zh-hans/visual-cpp-build-tools/

在这里插入图片描述
2. 若没有的，要安装WebView2
下载并安装“常青独立安装程序（Evergreen Bootstrapper）

https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/?form=MA13LH#download

在这里插入图片描述
3. 安装Rust

https://www.rust-lang.org/zh-CN/tools/install

在这里插入图片描述

打开，选择1，进行默认安装
安装完成后，输入 rustc --version和cargo --version来验证
配置cargo环境变量
PATH里，加入%USERPROFILE%.cargo\bin

  1. 安装nodejs

https://nodejs.org/zh-cn

验证是否安装成功：
node -v
npm -v

nodejs环境变量配置
Path中输入nodejs的地址，比如C:\Program Files\nodejs\

  1. 安装Android，若要导出Android App的话
    下载Android Studio

https://developer.android.com/studio?hl=zh-cn

确保安装了以下内容
Android SDK Platform
Android SDK Platform-Tools
NDK (Side by side)
Android SDK Build-Tools
Android SDK Command-line Tools

配置 ANDROID_HOME 和 NDK_HOME 环境变量
Path中添加
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
%NDK_HOME%

输入adb --version 验证

二、建立工程

  1. 在文件夹下，放入.npmrc文件，帮助镜像代理
registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node
electron_mirror=https://npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
  1. 进入cmd，输入
npm create tauri-app@latest
  1. 安装配置过程
    在这里插入图片描述
  • 填写项目名，选择前端代码
    在这里插入图片描述
  1. 下载完毕，用vscode打开
  • 拷贝.npmrc
  • 执行npm i 安装插件
  • 执行npm run tauri dev
    在这里插入图片描述

三、工程介绍

在这里插入图片描述

  • 各目录的说明
    tauri-app/
    ├── src/ # 前端源代码（Vue/React/Svelte 等）
    ├── src-tauri/ # Tauri 后端（Rust 代码）
    ├── public/ # 静态资源（图片、字体等）
    ├── node_modules/ # 前端依赖
    ├── target/ # Rust 编译输出（自动生成）
    ├── dist/ # 前端构建输出（自动生成）
    ├── package.json # 前端项目配置
    ├── vite.config.js # Vite 配置
    └── index.html # 前端入口 HTML

  • tauri.conf.json，用于配置窗口信息

四、页面调用rust方法

https://tauri.app/zh-cn/develop/calling-rust/

  1. 调用rust函数
  • 前端：
import { invoke } from "@tauri-apps/api/core"; //获取接口函数 invoke// 通过异步的方式调用greet函数，并传递参数，参数以键值对传递
async function greet() {// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/greetMsg.value = await invoke("greet", { name: name.value });
}
  • Rust端：
#[tauri::command]
fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
}#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![greet]) // 绑定greet函数.run(tauri::generate_context!()).expect("error while running tauri application");
}
  1. 同步的方式
  • 前端
invoke('login', { user: 'tauri', password: '0j4rijw8=' }).then((message) => console.log(message)).catch((error) => console.error(error));
  • rust端
#[tauri::command]
fn login(user: String, password: String) -> Result<String, String> {if user == "tauri" && password == "tauri" {// resolveOk("logged_in".to_string())} else {// rejectErr("invalid credentials".to_string())}
}

五、事件系统（双工消息）

  1. 前端发送
  • 前端emit事件，是更简单的通讯方式，没有返回值；
import { emit } from '@tauri-apps/api/event';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';// emit(eventName, payload)
emit('file-selected', '/path/to/file'); //全局发送const appWebview = getCurrentWebviewWindow();
appWebview.emit('route-changed', { url: window.location.href }); //指定窗口发送
  • 触发特定监听事件的emitTo发送
import { emitTo } from '@tauri-apps/api/event';
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';// emitTo(webviewLabel, eventName, payload)
emitTo('settings', 'settings-update-requested', {key: 'notification',value: 'all',
});const appWebview = getCurrentWebviewWindow();
appWebview.emitTo('editor', 'file-changed', {path: '/path/to/file',contents: 'file contents',
});
  1. Rust接收
  • 全局接收
use tauri::Manager;fn main() {tauri::Builder::default().setup(|app| {// 监听全局事件app.listen_global("global-event", |event| {println!("Received global event: {:?}", event.payload());// 可解析数据（需 serde）if let Some(payload) = event.payload() {println!("Parsed payload: {}", payload);}});Ok(())}).run(tauri::generate_context!()).expect("Failed to run Tauri");
}
  • 特定窗口接收
use tauri::Window;fn main() {tauri::Builder::default().setup(|app| {// 获取目标窗口（假设标签为 "secondary"）let secondary_window = app.get_window("secondary").unwrap();secondary_window.listen("window-specific-event", |event| {println!("Received window-specific event: {:?}", event.payload());});Ok(())}).run(tauri::generate_context!()).expect("Failed to run Tauri");
}

emit有全局发送与特定窗口发送，还有emitTo的写法

  1. rust端发送
  • 全局事件
use tauri::Manager;fn main() {tauri::Builder::default().setup(|app| {// 发送全局事件（所有前端窗口都能接收）app.emit_all("rust-to-frontend", "Hello from Rust").unwrap();Ok(())}).run(tauri::generate_context!()).expect("Failed to run Tauri");
}
  • 定向窗口发送
use tauri::Window;fn main() {tauri::Builder::default().setup(|app| {// 获取指定窗口（假设窗口标签为 "main"）let main_window = app.get_window("main").unwrap();// 发送到特定窗口main_window.emit("rust-to-specific-window", "Data for main window").unwrap();Ok(())}).run(tauri::generate_context!()).expect("Failed to run Tauri");
}
  • 发送复杂数据
use serde::Serialize;#[derive(Serialize)]
struct CustomData {message: String,count: i32,
}fn main() {tauri::Builder::default().setup(|app| {let data = CustomData {message: "Dynamic data".into(),count: 42,};app.emit_all("structured-event", &data).unwrap();Ok(())}).run(tauri::generate_context!()).expect("Failed to run Tauri");
}
  1. 前端监听事件
  • 全局监听
import { listen } from '@tauri-apps/api/event';
import { onMounted } from 'vue';onMounted(() => {// 监听全局事件listen('rust-to-frontend', (event) => {console.log('Received:', event.payload); // 输出: "Hello from Rust"});
});
  • 定向窗口监听
import { getCurrent } from '@tauri-apps/api/window';
import { onMounted } from 'vue';const currentWindow = getCurrent();onMounted(() => {// 监听当前窗口的事件currentWindow.listen('rust-to-specific-window', (event) => {console.log('Window-specific data:', event.payload);});
});
  • 监听Json数据
import { listen } from '@tauri-apps/api/event';listen('structured-event', (event) => {console.log('Message:', event.payload.message); // "Dynamic data"console.log('Count:', event.payload.count);    // 42
});

六、Http请求

使用http请求，需要先配置tarui.conf.json，把能访问的网址加入白名单
此举让软件安全性提高很多，对比electron，就很有优势
在这里插入图片描述

七、文件操作

  • tauri需要先配置tarui.conf.json，包括文件的操作权限和操作目录
  • 前端才能操作文件，但是前端没有绝对目录的操作能力；想操作绝对目录，需要用rust编写
    在这里插入图片描述
  • 另外tarui要配置下资源目录，这样打包的时候，资源目录才会打包在一起

在这里插入图片描述

  • 通过引入
import { readBinaryFile, BaseDirectory } from '@tauri-apps/api/fs';

实现文件的操作
在这里插入图片描述

在一代api里有相关资料，在二代的插件里也有相关资料
https://tauri.app/zh-cn/plugin/file-system/

八、本地文件的Url获取

  • 需要进行安全策略配置，在tauri.conf.json中，配置安全策略的头格式
    在这里插入图片描述
  • 需要配置允许的目录
    在这里插入图片描述
  • 前端写法
    在这里插入图片描述
  • 获取assetUrl的正确路径
    在这里插入图片描述
  • 最后把这个变量赋给img的src属性就可以了

九、dialog对话框

  • 这里调用的是系统的对话框，有5种
    在这里插入图片描述
  • 需要在tauri.conf.json里配置api开放，教程里设置了全部开发
  • 前端
    在这里插入图片描述
  • 选择文件夹
    在这里插入图片描述

以上的一些API，可能需要进入到tauri1里面去看

十、自定义窗口的配置

https://tauri.app/zh-cn/learn/window-customization/

  • 上面的地址，可以在前端，通过css、html，模拟一个标题栏目

https://v1.tauri.app/v1/api/config#windowsconfig

  • 这个地址可以配置tauri.config.json来设置窗口的大小

十一、系统托盘

  • 通过配置，配置系统托盘
    在这里插入图片描述

https://tauri.app/zh-cn/learn/system-tray/

  • 关于系统托盘的说明，制作托盘有Js前端定义，和Rust后端定义2种类型
  • 看我们的功能是在后端比较多，还是前端比较多

十二、开屏界面

https://tauri.app/zh-cn/learn/splashscreen/

  • 教程通过增加一个窗口，并把主窗口隐藏，在rust里写了隐藏开屏窗口和打开主窗口的函数，通过前端，调用此函数来实现
  • 窗口的html文件，放在public里面
  • 窗口可以通过label来得到

十三、多窗口

在这里插入图片描述

  • 可以通过前端，来新建，设置新窗口的各项属性
  • 也可以在tarui.conf.json里把窗口先定义好，通过前端显示此窗口
  • 教程提示，vue的路径使用，可能需要加#好

十四、导出

  • 运行npm run tauri build，过程中出现需要下载的文件
  • 教程里会让放在C:/用户…/AppData 下面
  • 另外一种方式是通过注册表
配置系统变量
TAURI_NSIS_DIR
D:\TauriSDK\NSIS配置系统变量
变量名：WIX
变量值：解压目录的路径（例如：C:\wix）
同时，将解压目录中的bin文件夹添加到PATH环境变量中：
在系统变量中找到Path，点击编辑。
添加一个新的条目：%WIX%\bin（或者直接写绝对路径，如C:\wix\bin）

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SQL进阶之旅 Day 26：分库分表环境中的SQL策略

SQL进阶之旅 Day 26：分库分表环境中的SQL策略

【SQL进阶之旅 Day 26】分库分表环境中的SQL策略 文章简述 随着业务规模的扩大&#xff0c;单一数据库难以承载海量数据与高并发访问。分库分表成为解决这一问题的关键手段&#xff0c;但同时也带来了 SQL 查询复杂度的显著提升。本文作为“SQL进阶之旅”系列的第26天内容&…
阅读更多...
linux之 内存管理（6）-arm64 内核虚拟地址空间变化

linux之 内存管理（6）-arm64 内核虚拟地址空间变化

一、新内核变动 kernel变化的真快&#xff0c;之前我记得4.x的内核的内核空间的线性映射区位于内核空间的高地址处的128TB&#xff0c;且当前的博客和一些书籍也都还是这样介绍。可翻了翻kernel的Documentation/arm64/memory.rst文档&#xff0c;发现最新的kernel已将这128TB移…
阅读更多...
循环神经网络(RNN)：从理论到翻译

循环神经网络(RNN)：从理论到翻译

循环神经网络&#xff08;RNN&#xff09;是一种专为处理序列数据设计的神经网络&#xff0c;如时间序列、自然语言或语音。与传统的全连接神经网络不同&#xff0c;RNN具有"记忆"功能&#xff0c;通过循环传递信息&#xff0c;使其特别适合需要考虑上下文或顺序的任…
阅读更多...
window批处理文件（.bat），用来清理git的master分支

window批处理文件（.bat），用来清理git的master分支

echo off chcp 65001 > nul setlocal enabledelayedexpansionecho 正在检查Git仓库... git rev-parse --is-inside-work-tree >nul 2>&1 if %errorlevel% neq 0 (echo 错误&#xff1a;当前目录不是Git仓库&#xff01;pauseexit /b 1 )echo 警告&#xff1a;这将…
阅读更多...
C#中的CLR属性、依赖属性与附加属性

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…
阅读更多...
【mysql】联合索引和单列索引的区别

【mysql】联合索引和单列索引的区别

区别核心&#xff1a;联合索引可加速多个字段组合查询&#xff0c;单列索引只能加速一个字段。 &#x1f539;联合索引&#xff08;复合索引&#xff09; INDEX(col1, col2, col3)适用范围&#xff1a; WHERE col1 ... ✅ WHERE col1 ... AND col2 ... ✅ WHERE col1 ..…
阅读更多...
如何用 HTML 展示计算机代码

如何用 HTML 展示计算机代码

原文&#xff1a;如何用 HTML 展示计算机代码 | w3cschool笔记 &#xff08;请勿将文章标记为付费&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 在编程学习和文档编写过程中&#xff0c;清晰地展示代码是一项关键技能。HTML 作为网页开发的基础语言&#x…
阅读更多...
大模型笔记_模型微调

大模型笔记_模型微调

1. 大模型微调的概念 大模型微调&#xff08;Fine-tuning&#xff09;是指在预训练大语言模型&#xff08;如GPT、BERT、LLaMA等&#xff09;的基础上&#xff0c;针对特定任务或领域&#xff0c;使用小量的目标领域数据对模型进行进一步训练&#xff0c;使其更好地适配具体应…
阅读更多...
React Native UI 框架与动画系统：打造专业移动应用界面

React Native UI 框架与动画系统：打造专业移动应用界面

React Native UI 框架与动画系统&#xff1a;打造专业移动应用界面 关键要点 UI 框架加速开发&#xff1a;NativeBase、React Native Paper、UI Kitten 和 Tailwind-RN 提供预构建组件&#xff0c;帮助开发者快速创建美观、一致的界面。动画提升体验&#xff1a;React Native…
阅读更多...
在QT中使用OpenGL

在QT中使用OpenGL

参考资料&#xff1a; 主页 - LearnOpenGL CN https://blog.csdn.net/qq_40120946/category_12566573.html 由于OpenGL的大多数实现都是由显卡厂商编写的&#xff0c;当产生一个bug时通常可以通过升级显卡驱动来解决。 OpenGL中的名词解释 OpenGL 上下文&#xff08;Conte…
阅读更多...
Qt::QueuedConnection详解

Qt::QueuedConnection详解

在多线程编程中&#xff0c;线程间的通信是一个关键问题。Qt框架提供了强大的信号和槽机制来处理线程通信&#xff0c;其中Qt::QueuedConnection是一种非常有用的连接类型。本文将深入探讨Qt::QueuedConnection的原理、使用场景及注意事项。 一、基本概念 Qt::QueuedConnecti…
阅读更多...
X86 OpenHarmony5.1.0系统移植与安装

X86 OpenHarmony5.1.0系统移植与安装

近期在研究X86鸿蒙,通过一段时间的研究终于成功了,在X86机器上成功启动了openharmony系统了.下面做个总结和分享 1. 下载源码 获取OpenHarmony标准系统源码 repo init -u https://gitee.com/openharmony/manifest.git -b refs/tags/OpenHarmony-v5.1.0-Release --no-repo-ve…
阅读更多...
如何诊断服务器硬盘故障?出现硬盘故障如何处理比较好?

如何诊断服务器硬盘故障?出现硬盘故障如何处理比较好?

当服务器硬盘出现故障时&#xff0c;及时诊断问题并采取正确的处理方法至关重要。硬盘故障可能导致数据丢失和系统不稳定&#xff0c;影响服务器的正常运行。以下是诊断服务器硬盘故障并处理的最佳实践&#xff1a; 诊断服务器硬盘故障的步骤 1. 监控警报 硬盘监控工具&#…
阅读更多...
vue3提供的hook和通常的函数有什么区别

vue3提供的hook和通常的函数有什么区别

Vue 3 提供的 hook&#xff08;组合式函数&#xff09; 和普通函数在使用场景、功能和设计目的上有明显区别&#xff0c;它们是 Vue 3 组合式 API 的核心概念。下面从几个关键维度分析它们的差异&#xff1a; 1. 设计目的不同 Hook&#xff08;组合式函数&#xff09; 专为 Vu…
阅读更多...
Spark提交流程

Spark提交流程

bin/spark-submit --class org.apache.spark.examples.SparkPi --master yarn ./examples/jars/spark-examples_2.12-3.3.1.jar 10 这一句命令实际上是 启动一个Java程序 java org.apache.spark.deploy.SparkSubmit 并将命令行参数解析到这个类的对应属性上 因为master给…
阅读更多...
Microsoft Copilot Studio - 尝试一下Agent

Microsoft Copilot Studio - 尝试一下Agent

1.简单介绍 Microsoft Copilot Studio以前的名字是Power Virtual Agent(简称PVA)。Power Virutal Agent是2019年出现的&#xff0c;是低代码平台Power Platform的一部分。当时Generative AI还没有出现&#xff0c;但是基于已有的Conversation AI技术&#xff0c;即Microsoft L…
阅读更多...
【源码剖析】2-搭建kafka源码环境

【源码剖析】2-搭建kafka源码环境

在上篇文章kafka核心概念中&#xff0c;解释了kafka的核心概念&#xff0c;下面开始进行kafka源码编译。为什么学习源码需要进行源码编译呢&#xff0c;我认为主要有两点&#xff1a; 可以进行debug&#xff0c;跟踪代码执行逻辑可以对源码改动&#xff0c;强化学习学习效果 …
阅读更多...
小红书视频图文提取：采集+CV的实战手记

小红书视频图文提取：采集+CV的实战手记

项目说明&#xff1a;这波视频&#xff0c;值不值得采&#xff1f; 你有没有遇到过这样的场景&#xff1f;老板说&#xff1a;“我们得看看最近小红书上关于‘旅行’的视频都说了些什么。”团队做数据分析的&#xff0c;立马傻眼&#xff1a;官网打不开、接口抓不着、视频不能…
阅读更多...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…
阅读更多...
从编辑到安全设置： 如何满足专业文档PDF处理需求

从编辑到安全设置： 如何满足专业文档PDF处理需求

随着数字化办公的发展&#xff0c;PDF 已成为跨平台文档交互的标准格式。无论是在日常办公、学术研究&#xff0c;还是项目协作中&#xff0c;对 PDF 文件进行高效编辑与管理的需求日益增长。功能全面、操作流畅且无额外负担的 PDF 编辑工具&#xff0c;它是一款在功能上可与 A…
阅读更多...
最新文章

Copyright @ 2022~2023