Tauri 的基本使用笔记

Lovely Ruby2024-02-09 14:47

文章目录

前言

记录一下 Tauri 的基本操作

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

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

然后启动检查一下，没啥问题：

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

bash 复制代码 
 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() 传递，Rust 用 app.listen_global 接收

Rust ⇒ 前端

这里用了一下克隆

Rust 复制代码 
let callback_app_handle = app.app_handle().clone();

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

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

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

我的疑问

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

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

给我的感觉像是时机的问题，可能是前端监听的晚了...用点击事件就能触发

开发时的一些技巧

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

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

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

在 setup 中添加这两句，拿到窗口，打开开发者工具

rust 复制代码 
let window = app.get_window("main").unwrap();
window.open_devtools();

让 Tauri 不要监听文件

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

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

Rust 格式化输出

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

rust 复制代码 
println!("{:?}", 变量);
println!("{:#?}", 变量);

Rust 读写文件

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

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

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

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

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

需要 cd 到 src-tauri 里然后，用 cargo add base64 命令安装模块

之后再来运行一下

可以看到文件已经放到 src-tauri 目录下了

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

js 复制代码 
<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>
rust 复制代码 
// 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 执行文件，然后执行

bat 复制代码 
rem 关闭Windows外壳程序explorer

taskkill /f /im explorer.exe

rem 清理系统图标缓存数据库

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 PastIconsStream

rem 重启Windows外壳程序explorer

start explorer

生效的截图如下：

修改安装包的语言

默认是英语， 安装包默认是是两种方式，Wix 和 NSIS

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

json 复制代码 
 "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 的安装包

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

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

这是官网的解释

代码

进程间通信

js 复制代码 
// 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>
rust 复制代码 
// 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");
}
相关推荐
听忆.12 分钟前
手机屏幕上进行OCR识别方案
笔记
Selina K1 小时前
shell脚本知识点记录
笔记·shell
待1 小时前
开源竞争-数据驱动成长-11/05-大专生的思考
人工智能·笔记·学习·算法·机器学习
霍格沃兹测试开发学社测试人社区2 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
幸运超级加倍~2 小时前
软件设计师-上午题-16 算法(4-5分)
笔记·算法
王俊山IT2 小时前
C++学习笔记----10、模块、头文件及各种主题（一）---- 模块（5）
开发语言·c++·笔记·学习
Yawesh_best3 小时前
思源笔记轻松连接本地Ollama大语言模型，开启AI写作新体验！
笔记·语言模型·ai写作
CXDNW5 小时前
【网络面试篇】HTTP（2）（笔记）——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
使者大牙5 小时前
【大语言模型学习笔记】第一篇：LLM大规模语言模型介绍
笔记·学习·语言模型
ssf-yasuo5 小时前
SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记
论文阅读·笔记·prompt
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解