tauri简单教程——以Flash应用为例
一、创建tauri项目
运行tauri项目前，确保环境准备好，windows环境需要安装c++环境、rust环境、node环境。https://tauri.app/v1/guides/getting-started/prerequisites
1.执行npm create tauri-app:
2.运行效果：
3.目录结构
src目录：主要放前端ui内容，类似ui层（支持vue、react、等等前端框架）
src-tauri：主要放与系统操作相关内容，如读写文件，调用cmd命令等。类似系统层（使用rust开发）
二、tauri特性
tauri特性以flash应用为例，flash基于tauri开发的桌面工具，可以快速帮我们打开文件、链接、文件夹等。
开源地址：https://github.com/DWHengr/flash
试用地址：https://github.com/DWHengr/flash/releases/download/Flash-v1.0.1/Flash_1.0.1_x64_en-US.msi
1.ui层与系统层通信
ui层部分代码：
import { invoke } from "@tauri-apps/api/tauri";
function App() {
......
useEffect(() => {
invoke("load_config").then((res) => { //调用系统层load_config方法，获取返回值
if (res) { //res为返回值
......
}
});
}, []);
系统层部分代码：
#[tauri::command]
pub fn load_config(handle: tauri::AppHandle) -> FlashConfig {
......
config //为load_config返回值
}
fn main() {
let app = tauri::Builder::default()
.invoke_handler(tauri::generate_handler![cmd::load_config]) //生成load_config为invoke方法，ui层可以通过invoke api进行调用
......;
app.run(handle_run_events);
}
系统层声明一个invoke方法需要在方法加上#[tauri::command]这个宏。在调用.invoke_handler(tauri::generate_handler![cmd::load_config])方法将invoke方法生成到app中。然后ui层通invoke api调用即可，需要导入import { invoke } from "@tauri-apps/api/tauri";。
2.系统托盘
首先修改flash.config.json文件：
{
"tauri": {
"systemTray": {
"iconPath": "icons/icon.png",
"iconAsTemplate": true
}
}
}
系统层代码：
fn tray_menu() -> SystemTrayMenu { //托盘菜单内容
let quit = CustomMenuItem::new("quit".to_string(), "Quit");
let hide = CustomMenuItem::new("hide".to_string(), "Hide");
let show = CustomMenuItem::new("show".to_string(), "Show");
let tray_menu = SystemTrayMenu::new()
.add_item(hide)
.add_item(show)
.add_native_item(SystemTrayMenuItem::Separator)
.add_item(quit);
tray_menu
}
fn system_tray_event(app: &AppHandle<Wry>, e: SystemTrayEvent) { //托盘事件
match e {
SystemTrayEvent::LeftClick { //左键事件
position: _,
size: _,
..
} => { //显示窗口
let window = app.get_window("main").unwrap();
window.show().unwrap();
window.set_focus().unwrap();
}
SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() { //托盘菜单点击事件
"quit" => { //退出程序
std::process::exit(0);
}
"hide" => { //隐藏窗口
let window = app.get_window("main").unwrap(); //获取窗口实例
window.hide().unwrap();
}
"show" => { //显示窗口并聚焦
let window = app.get_window("main").unwrap();
window.show().unwrap();
window.set_focus().unwrap();
}
_ => {}
},
_ => {}
}
}
fn main() {
let app = tauri::Builder::default()
.system_tray(SystemTray::new().with_menu(tray_menu())) //设置托盘菜单
.on_system_tray_event(system_tray_event)//设置托盘事件
.......;
app.run(handle_run_events);
}
3.窗口事件
fn window_event(e: GlobalWindowEvent) { //窗口事件
match e.event() {
tauri::WindowEvent::Focused(focused) => { //聚焦事件
if !focused { //不聚焦时
e.window().hide().unwrap(); //隐藏窗口
}
}
_ => {}
}
}
fn main() {
let app = tauri::Builder::default()
.on_window_event(window_event) //设置窗口事件
......;
register_shortcut(&app);
app.run(handle_run_events);
}
4.快捷键
// register shortcut
fn register_shortcut(app: &App<Wry>) {
let mut short_cut = app.global_shortcut_manager(); //获取快捷键管理实例
let app_handler = app.handle();
let result = short_cut.register("alt+space", move || { //设置alt+space快捷键
let window = app_handler.get_window("main").unwrap();
if window.is_visible().unwrap() { //判断窗口是否显示
window.hide().unwrap(); //显示窗口
} else {
window.show().unwrap(); //隐藏窗口
window.set_focus().unwrap();
}
});
if let Err(err) = result {
println!("{}", err);
}
}
fn main() {
let app = tauri::Builder::default()
.....;
register_shortcut(&app); //注册快捷键
app.run(handle_run_events);
}
5.单例运行tauri app
需要导入tarui插件依赖tauri-plugin-single-instance，目前该插件只支持window、linux，修改Cargo.toml文件：
[dependencies]
tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/tauri-plugin-single-instance" }
系统层代码：
fn main() {
let app = tauri::Builder::default()
.plugin(tauri_plugin_single_instance::init(|app, _argv, _cwd| { //设置插件
let window = app.get_window("main").unwrap(); //二次打开软件时，显示已打开窗口，单例运行app
window.set_focus().unwrap();
window.show().unwrap();
}))
......
app.run(handle_run_events);
}
6.自定义窗口
ui层代码：
<div
data-tauri-drag-region //可拖拽
>
<button type="button" onClick={() => appWindow.minimize()}> //最小化窗口
min
</button>
<button type="button" onClick={() => appWindow.toggleMaximize()}> //最大化窗口
max
</button>
<button type="button" onClick={() =>appWindow.close()}> //关闭窗口
close
</button>
</div>
需要注意只有组件加上data-tauri-drag-region才可以拖拽。
b站教程
https://www.bilibili.com/video/BV1oG411E7Ye/?vd_source=1407fca5453e2231464fa3cb54986e39