Tauri 的基本使用笔记

文章目录

  • 前言
  • 如何将 Tauri 集成到前端项目?
  • 进程间通信(命令)
    • const invoke = window.__TAURI__.invoke;
  • 进程间通信(事件)
    • 前端 ⇒ Rust
    • Rust ⇒ 前端
    • 我的疑问
  • 开发时的一些技巧
    • 用代码打开前端的开发者工具
    • 让 Tauri 不要监听文件
    • Rust 格式化输出
    • Rust 读写文件
    • Rust 推荐教程
  • 生成应用图标
    • Windows 重建图标缓存
  • 修改安装包的语言
    • 打包报错:Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
    • 两种打包方式的区别
    • 打包后的应用打开会弹出命令行窗口
  • 代码
    • 进程间通信


前言

记录一下 Tauri 的基本操作


如何将 Tauri 集成到前端项目?

我们先创建一个普通的前端项目,这里我用 Vite + Vue3 创建一个空项目

在这里插入图片描述

然后启动检查一下,没啥问题:

在这里插入图片描述

之后引入 Tauri 的脚手架,我们可以看一下官网的说明

 pnpm add -D @tauri-apps/cli

在这里插入图片描述
然后 pnpm tauri init ,通过脚手架 init 一些配置

在这里插入图片描述

导入之后可以看一下代码结构,新增了 src-tauri 文件夹!

在这里插入图片描述

然后 pnpm tauri dev 启动一下,可以看到我启动花了四分钟,真的是挺慢的了,不过还是启动了!!

在这里插入图片描述

这里插一嘴,如果卡 blocking 的话,稍微等一下吧,太久了就检查一下代理,然后重复上述步骤

在这里插入图片描述


进程间通信(命令)

前端如何调用 Rust 指令呢?

我们把前端精简一下,就剩一个组件,然后写一个按钮,用来触发命令

在这里插入图片描述

想要前端调用 Rust,还需要安装一个 @tauri-apps/api,具体可以看 官网:调用指令,安装完运行 tauri dev

在这里插入图片描述
我们就按照官网给的例子,写好 Rust 的代码

在这里插入图片描述
之后来测试一下

在这里插入图片描述

const invoke = window.TAURI.invoke;

这里的 invoke 也可以挂载到 window 上,只需要在 tauri.conf.json 中配置一下,默认是 false

在这里插入图片描述


进程间通信(事件)

官网上也有基于事件的进程间通信(非命令),不过我感觉命令的使用场景会多一些吧,更像是前后端通信

事件的话,感兴趣的话可以看看,这里简单使用一下

前端 ⇒ Rust

这里前端使用 emit() 传递,Rustapp.listen_global 接收

在这里插入图片描述

Rust ⇒ 前端

这里用了一下克隆

let callback_app_handle = app.app_handle().clone();

以及 move 关键字,如果不用move 的话会报错,这里问了一下 GPT 的回答:

在这里插入图片描述

还有 JSON 的转化,整体代码如下

在这里插入图片描述

整体的代码放到文章下面了

我的疑问

官网上给的例子,Rust 传递到前端没跑通,不知道是什么原因…点我跳转到官网的例子

我本来想的是 Rust 启动之后立马发消息给前端,但是实现不出来

给我的感觉像是时机的问题,可能是前端监听的晚了…用点击事件就能触发
在这里插入图片描述


开发时的一些技巧

用代码打开前端的开发者工具

每次启动的时候,前端控制台默认是不打开的,每次修改 Rust 之后,窗口都会重新启动,并且不会打开控制台,调试的话很麻烦

那么让代码帮我们打开控制台

在这里插入图片描述
在 setup 中添加这两句,拿到窗口,打开开发者工具

let window = app.get_window("main").unwrap();
window.open_devtools();

让 Tauri 不要监听文件

Rust 启动会监听 src-tauri 下的文件变化,如果有变化,就会重新编译,重启窗口,有时候并不希望这样

在这里插入图片描述

那我们可以在src-tauri 文件夹下新建 .taurignore 文件,然后输入 * 保存,这就代表所有文件的变化都不监听了

在这里插入图片描述

Rust 格式化输出

Rust 中如何像前端一样 console.log() 一些变量呢?

在这里插入图片描述

println!("{:?}", 变量);
println!("{:#?}", 变量);

Rust 读写文件

因为 Rust 的基础数据类型比较少,所以这里我用 String 来传递文件,就是先将文件转换成 Base64 ,然后传给 Rust 来处理。

在这里插入图片描述

可以看到Rust 中的变量自动帮我们解包了,并且还是小写加下划线的形式,为什么这么设计呢,不理解,看一下GPT怎么说的吧

在这里插入图片描述

没关系,反正会如何使用就行

我们拿到 base64 之后就可以写文件了

接着我们写一下 Rust,需要导入一些模块,可以看到下面的 base64 飘红了

cargo add

需要 cdsrc-tauri 里然后,用 cargo add base64 命令安装模块
在这里插入图片描述
之后再来运行一下

在这里插入图片描述
可以看到文件已经放到 src-tauri 目录下了

这就是一个简单的文件读写

<script setup>
const { invoke } = window.__TAURI__;
function sendFile() {const input = document.getElementById('input');const [file] = input.files;const reader = new FileReader();reader.onloadend = async (e) => {console.log(e.target.result);const rst = e.target.result;const base64 = rst.split('base64,')[1];await invoke('send_file', { fileContent: base64, fileName: file.name });};reader.readAsDataURL(file);
}
</script><template><input type="file" id="input"><button @click="sendFile">发送文件</button>
</template>
// main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use tauri::Manager;
use base64::{engine::general_purpose, Engine as _};
use std::fs::File;
use std::io::Write;#[tauri::command]
fn send_file(file_content: String, file_name: String) {println!("{:?}", file_content);println!("{:?}", file_name);let file_bytes = general_purpose::STANDARD.decode(file_content).unwrap();let mut file = File::create(file_name).expect("创建文件失败");file.write_all(&file_bytes).expect("写入文件失败");
}fn main() {tauri::Builder::default().setup(|app| {let window = app.get_window("main").unwrap();window.open_devtools();Ok(())}).invoke_handler(tauri::generate_handler![send_file]).run(tauri::generate_context!()).expect("error while running tauri application");
}

Rust 推荐教程

b站杨哥的视频,教程比较干净,适合速学


生成应用图标

Tauri 可以通过命令来生成各种尺寸的图标

我们现在网上找一个尺寸比较大的,可以去 iconfont 上面找

然后放到项目根目录下,执行命令 pnpm tauri icon

在这里插入图片描述
修改后的图标可能不生效,有可能的原因有

  • 图标太小了
  • 存在缓存

Windows 重建图标缓存

把下面的代码复制到 txt 中,然后修改为 bat 执行文件,然后执行

rem 关闭Windows外壳程序explorertaskkill /f /im explorer.exerem 清理系统图标缓存数据库attrib -h -s -r "%userprofile%\AppData\Local\IconCache.db"del /f "%userprofile%\AppData\Local\IconCache.db"attrib /s /d -h -s -r "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\*"del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_32.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_96.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_102.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_256.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_1024.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_idx.db"
del /f "%userprofile%\AppData\Local\Microsoft\Windows\Explorer\thumbcache_sr.db"rem 清理 系统托盘记忆的图标echo y|reg delete "HKEY_CLASSES_ROOT\Local Settings\Software\Microsoft\Windows\CurrentVersion\TrayNotify" /v IconStreams
echo y|reg delete "HKEY_CLASSES_ROOT\Local Settings\Software\Microsoft\Windows\CurrentVersion\TrayNotify" /v PastIconsStreamrem 重启Windows外壳程序explorerstart explorer

生效的截图如下:

在这里插入图片描述

修改安装包的语言

默认是英语, 安装包默认是是两种方式,WixNSIS

我们在 tauri.conf.json 中声明打包语言,注意:路径是 tauri.bundle.windowswindows 好几个位置都有,别找错了

在这里插入图片描述

 "wix": {"language": "zh-CN"},"nsis": {"languages": ["SimpChinese"],"displayLanguageSelector": true}

打包报错:Error You must change the bundle identifier in tauri.conf.json > tauri > bundle > identifier. The default value com.tauri.dev is not allowed as it must be unique across applications.

在这里插入图片描述

两种打包方式的区别

因为我做的工具需要文件处理,Wix 打包后的应用需要管理员权限才能拿到文件,所以我更倾向于 NSIS 的安装包

第一次打包会有些慢,等一等就好了

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

打包后的应用打开会弹出命令行窗口

这是官网的解释

在这里插入图片描述


代码

进程间通信

// Vue
<script setup>
import { ref, onMounted } from "vue";
import { emit, listen } from '@tauri-apps/api/event'const greetMsg = ref("");
const name = ref("");function greet() {emit("greet", { name: name.value });
}onMounted(async () => {const unlisten = await listen('hello', (event) => {// event.payload 才是实际的结构体console.log(event)greetMsg.value = event.payload;});
})
</script><template><div class="card"><input id="greet-input" v-model="name" placeholder="Enter a name..." /><button type="button" @click="greet()">Greet</button></div><p>{{ greetMsg }}</p>
</template>
// main.rs
use serde::{Deserialize, Serialize};
use tauri::Manager;#[derive(Serialize, Deserialize, Debug)]
struct Greet {name: String,
}fn main() {tauri::Builder::default().setup(|app| {let callback_app_handle = app.app_handle().clone();let _event_id = app.listen_global("greet", move |event| {let greet_msg: Greet = serde_json::from_str(&event.payload().unwrap()).unwrap();let msg = format!("Hello, {}! You've been greeted from Rust!", greet_msg.name);println!("{}", msg);let _ = &callback_app_handle.emit_all("hello", msg);});Ok(())}).run(tauri::generate_context!()).expect("error while running tauri application");
}

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

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

相关文章

cocos creator 3.x 预制体无法显示

双击预制体&#xff0c;进入详情页&#xff0c;没有显示资源 Bomb 是个预制体&#xff0c;但是当我双击进来什么都没有了&#xff0c;无法对预制体进行可视化编辑 目前我只试出来一个解决方法&#xff1a; 把预制体拖进Canvas文件中&#xff0c;这样就能展示到屏幕上&#xff…

prometheus之mysqld_exporter部署

mysql_exporter部署 下载解压压缩包 mkdir /opt/mysqld_exporter/ cd /opt/mysqld_exporter/ # 修改为自己的软件下载地址 wget http://soft.download/soft/linux/prometheus/mysqld_exporter/mysqld_exporter-0.14.0.linux-amd64.tar.gz tar -zxvf mysqld_exporter-0.14.0.…

C语言探索:选择排序的实现与解读

当我们需要对一组数据进行排序时&#xff0c;选择排序&#xff08;Selection Sort&#xff09;是一种简单但效率较低的排序算法。它的基本思想是每次从未排序的数据中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;然后将其放置在已排序序列的末尾。通过重复这个过…

Wireshark中的ARP协议包分析

Wireshark可以跟踪网络协议的通讯过程&#xff0c;本节通过ARP协议&#xff0c;在了解Wireshark使用的基础上&#xff0c;重温ARP协议的通讯过程。 ARP&#xff08;Address Resolution Protocol&#xff09;地址解析协议&#xff0c;是根据IP地址获取物理地址的一个TCP/IP协议。…

useEffect的依赖项是Object时,即使依赖项的值没发生变化,仍然触发了useEffect

关于useEffect首先需要知道以下三种情况 useEffect(()>{ console.log(没有第二个参数&#xff0c;每次渲染都会触发) })useEffect(()>{ console.log(第二个参数是个【】&#xff0c;初次挂载时会触发) },[])const [age,setAge] useState(0); const [name, setName] us…

计算机网络(第六版)复习提纲27

7 TCP流量控制 A 利用滑动窗口实现流量控制 所谓流量控制&#xff0c;就是让发送方发送速率不要太快&#xff0c;让接收方来得及接收 1 利用窗口进行流量控制 2 持续计时器和零窗口探测报文&#xff08;仅携带一字节的数据&#xff09; B TCP的传输效率&#xff08;TCP报文段的…

Vue-53、Vue技术vuex使用

vuex 是什么 1、概念 专门在Vue 中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue 插件&#xff0c;对vue 应用中多个组件的共享状态进行集中式的 管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&#xff0c;且适用于任意组件间通信。2、…

无心剑小诗《醉爱平凡人生》

醉爱平凡人生 平凡人生&#xff0c;别样卓越 做调色板上最亮的颜料 没有豪华光环与繁杂束缚 只有一份简单的快乐 不追求虚名&#xff0c;不被物欲左右 安静地享受生活&#xff0c;品味每滴雨露 平凡人生&#xff0c;宛如流淌的小溪 没有壮烈激流&#xff0c;却有恒久细流 不…

pwn旅行之[WUSTCTF 2020]getshell2(一些小知识)

题目分析1 首先打开这个题目的链接的时候&#xff0c;看到了ret2syscall&#xff0c;以为是一个纯正的syscall的题&#xff0c;结果&#xff0c;做的时候发现这个题的危险函数限制的字符串个数不足以写入syscall需要的所有地址&#xff0c;所以&#xff0c;这里参考dalao们的方…

Linux:Cache 之 write back和write through

为了保证cache和memory的数据一致性&#xff0c;通常有三种方法&#xff1a; write through&#xff1a;CPU向cache写入数据时&#xff0c;同时向memory也写一份&#xff0c;使cache和memory的数据保持一致。优点是简单&#xff0c;缺点是每次都要访问memory&#xff0c;速度比…

Go 中如何检查文件是否存在?可能产生竞态条件?

嗨&#xff0c;大家好&#xff01;本文是系列文章 Go 技巧第十三篇&#xff0c;系列文章查看&#xff1a;Go 语言技巧。 Go 中如何检查文件是否存在呢&#xff1f; 如果你用的是 Python&#xff0c;可通过标准库中 os.path.exists 函数实现。遗憾的是&#xff0c;Go 标准库没有…

watch 和 watchEffect 的使用

ref 监听 监听 ref 值&#xff0c;ref.value 是基本数据类型 /*** 通过 myName.value 更换值时会触发* 通过 ref 定义基本数据类型时&#xff0c;不能监听 xxx.value 因为这获取的就是一个具体值*/let myName ref(苹果)watch(myName, (newValue, oldValue) > {// myName: …

MySQL查询优化技巧和10个案例展示

优化MySQL查询的实战技巧&#xff1a; **避免使用SELECT ***&#xff1a;只获取需要的列&#xff0c;这样可以减少数据传输量&#xff0c;提高查询效率。使用索引&#xff1a;为查询频繁的列创建索引&#xff0c;可以显著提高查询速度。但请注意&#xff0c;索引并非万能&…

大华 DSS 数字监控系统 attachment_getAttList.action SQL 注入漏洞复现

0x01 产品简介 大华 DSS 数字监控系统是大华开发的一款安防视频监控系统,拥有实时监视、云台操作、录像回放、报警处理、设备管理等功能。 0x02 漏洞概述 大华 DSS存在SQL注入漏洞,攻击者 /portal/attachment_getAttList.action 路由发送特殊构造的数据包,利用报错注入获…

林浩然与杨凌芸的Java奇缘:抽象类、接口与多态的编程三部曲

林浩然与杨凌芸的Java奇缘&#xff1a;抽象类、接口与多态的编程三部曲 The Java Odyssey of Lin Haoran and Yang Lingyun: A Trio of Programming Wisdom with Abstract Classes, Interfaces, and Polymorphism 在代码王国里&#xff0c;住着两位程序员明星——林浩然和杨凌芸…

如何理解S参数的三大特性

提到S参数的时候经常会涉及一些概念&#xff0c;如无源性、因果性、互易性等&#xff0c;本文将逐一介绍这些特性。 无源性&#xff08;Passivity&#xff09; 对于S参数所表征的网络&#xff0c;设计者需要它是一个无源的系统&#xff0c;即满足能量守恒&#xff0c;以二端口网…

should be also和should also be

will also be 是正确的 但老师和新概念的两个说法都没有错. will also be 是固定搭配.就好像will not be一样, 限定词加在be前.老师说的是陈述之类的句型 Nbe动词alson/adj/动词短语.例&#xff1a;He is also good at physic. should be also还是should also be also应该插在…

生存类游戏《幻兽帕鲁》从部署服务器到开始体验全过程

SteamDB数据显示&#xff0c;《幻兽帕鲁》上线24小时内&#xff0c;在线人数峰值便突破200万&#xff0c;跻身Steam历史排行榜第二位。随着热度进一步发酵&#xff0c;《幻兽帕鲁》官方发布推文称&#xff0c;游戏发售不到6天&#xff0c;销量已经突破了 800万份。欢迎大家在阿…

学习笔记:正则表达式

正则表达式是文本处理方面功能最强大的工具之一。正则表达式语言用来构造正则表达式&#xff0c;最终构造出来的字符串就称为正则表达式&#xff0c;正则表达式用来完成搜索和替换操作。 本文参考《正则表达式必知必会&#xff08;修订版&#xff09;》《Learning Regular Exp…

CentOS 7 安装 install abiword

安装 1.下载noarch安装包 wget http://repo.iotti.biz/CentOS/7/noarch/lux-release-7-1.noarch.rpm 2.安装noarch rpm -Uvh lux-release-7-1.noarch.rpm 3.安装abiword yum -y install abiword