Tauri2学习笔记

news2025/6/10 13:42:46

教程地址：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" {
    // resolve
    Ok("logged_in".to_string())
  } else {
    // reject
    Err("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.coloradmin.cn/o/2406686.html

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

相关文章

在Zenodo下载文件 用到googlecolab googledrive

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…
阅读更多...
【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

【1】跨越技术栈鸿沟：字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…
阅读更多...
高端性能封装正在突破性能壁垒，其芯片集成技术助力人工智能革命。

高端性能封装正在突破性能壁垒，其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…
阅读更多...
动态规划-1035.不相交的线-力扣(LeetCode)

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…
阅读更多...
网页端 js 读取发票里的二维码信息（图片和PDF格式）

网页端 js 读取发票里的二维码信息（图片和PDF格式）

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…
阅读更多...
MeshGPT 笔记

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…
阅读更多...
Appium下载安装配置保姆教程（图文详解）

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…
阅读更多...
qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…
阅读更多...
基于stm32F10x 系列微控制器的智能电子琴（附完整项目源码、详细接线及讲解视频）

基于stm32F10x 系列微控制器的智能电子琴（附完整项目源码、详细接线及讲解视频）

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …
阅读更多...
高抗扰度汽车光耦合器的特性

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…
阅读更多...
如何做好一份技术文档？从规划到实践的完整指南

如何做好一份技术文档？从规划到实践的完整指南

如何做好一份技术文档&#xff1f;从规划到实践的完整指南 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…
阅读更多...
SQL注入篇-sqlmap的配置和使用

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…
阅读更多...
Linux操作系统共享Windows操作系统的文件

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…
阅读更多...
Redis上篇--知识点总结

Redis上篇--知识点总结

Redis上篇–解析 本文大部分知识整理自网上&#xff0c;在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库&#xff0c;Redis 的键值对中的 key 就是字符串对象&#xff0c;而 val…
阅读更多...
李沐--动手学深度学习--GRU

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …
阅读更多...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…
阅读更多...
【版本控制】GitHub Desktop 入门教程与开源协作全流程解析

【版本控制】GitHub Desktop 入门教程与开源协作全流程解析

目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork&#xff08;创建个人副本&#xff09;步骤 2: Clone&#xff08;克隆…
阅读更多...
Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…
阅读更多...
【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…
阅读更多...
ubuntu中安装conda的后遗症

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023