1.开启所有API使用
{
"tauri": {
"allowlist": {
"all": true,
}
}
}
2.关闭鼠标右键
window.addEventListener('contextmenu', (e) => e.preventDefault(), false);
// 在生成环境关闭鼠标右键
if (import.meta.env.MODE === "production") {
window.addEventListener("contextmenu", (e) => e.preventDefault(), false);
}
3.修改图标
①在项目根目录下放入要替换的图标,重命名为 app-icon.png
②运行
pnpm tauri icon
4.多窗口
注意:窗口标签必须是唯一的,并且可以在运行时用于访问窗口实例。此处使用的是在 JavaScript 中创建窗口
免责声明窗口使用创建新窗口的方法创建出来的,使用时直接导入即可
import { WebviewWindow } from "@tauri-apps/api/window";
// 创建新窗口
export const createWin = (options: any) => {
const webview = new WebviewWindow(options.label, {
url: options.url, // 窗口的URL
title: options.title, // 窗口的标题
width: options.width, // 初始宽度 (number)
height: options.height, // 初始高度 (number)
minWidth: options.minWidth, // 窗口的最小宽度 (number)
minHeight: options.minHeight, // 窗口的最小高度 (number)
maxWidth: options.maxWidth, // 窗口的最大宽度 (number)
maxHeight: options.maxHeight, // 窗口的最大高度 (number)
resizable: options.resizable, // 窗口是否可调整大小 (boolean)
x: options.x, // 窗口左上角的水平位置 (number)
y: options.y, // 窗口左上角的垂直位置 (number)
center: options.center, // 是否位于屏幕中央显示窗口 (boolean)
alwaysOnTop: options.alwaysOnTop, // 窗口是否应始终位于其他窗口之上 (boolean)
fullscreen: options.fullscreen, // 窗口是否应全屏显示 (boolean)
decorations: options.decorations, // 窗口是否应具有装饰边框和条 (boolean)
fileDropEnabled: options.fileDropEnabled, // 窗口是否应接收文件拖放 (boolean)
skipTaskbar: options.skipTaskbar, // 是否将窗口添加到任务栏 (boolean)
contentProtected: options.contentProtected, // 防止窗口内容被其他应用程序捕获 (boolean)
focus: options.focus, // 窗口是否应自动获取焦点 (boolean)
visible: options.visible, // 窗口是否应可见 (boolean)
});
// 窗口创建成功触发
webview.once("tauri://created", function () {
console.log(options.title + "创建成功!!!");
});
// 窗口创建失败触发
webview.once("tauri://error", function (e) {
console.log(options.title + "创建失败!!!", e);
});
};
// 关闭窗口
export const closeWin = (label: string) => {
const win = WebviewWindow.getByLabel(label);
if (win) {
win.close();
} else {
console.error(`无法找到标签为 ${label} 的窗口`);
}
};
// 隐藏窗口
export const hideWin = (label: string) => {
const win = WebviewWindow.getByLabel(label);
if (win) {
win.hide();
} else {
console.error(`无法找到标签为 ${label} 的窗口`);
}
};
// 显示窗口
export const showWin = (label: string) => {
const win = WebviewWindow.getByLabel(label);
if (win) {
win.show();
} else {
console.error(`无法找到标签为 ${label} 的窗口`);
}
};
// 免责声明窗口
export const disclaimerWin = () => {
createWin({
label: "Disclaimer",
title: "免责声明",
url: "/disclaimer",
center: true,
width: 800,
height: 740,
resizable: false,
});
};
5.初始屏幕
如果网页需要一些时间来加载,或者你需要在显示主窗口之前在 Rust 中运行初始化过程,那么启动画面可以改善用户的加载体验。
第一种方法:
①首先需要隐藏主窗口 tauri.config.json
"windows": [
{
"fullscreen": false,
"resizable": true,
"title": "有米TG营销助理",
"center": true,
"width": 600,
"height": 400,
"minWidth": 600,
"minHeight": 400,
"visible": false
}
]
②创建初始屏幕,直接在tauri,config.json中创建,如下
"windows": [
{
"title": "Tauri App",
"width": 800,
"height": 600,
"resizable": true,
"fullscreen": false,
"visible": false
},
// Add the splashscreen window
{
"width": 400,
"height": 200,
"decorations": false,
"url": "splashscreen.html",
"label": "splashscreen"
}
]
③等待网页
use tauri::Manager;
// 创建命令:
// 该命令必须是异步的,以便它不会在主线程上运行。
#[tauri::command]
async fn close_splashscreen(window: tauri::Window) {
// 关闭初始屏幕
if let Some(splashscreen) = window.get_window("splashscreen") {
splashscreen.close().unwrap();
}
// 显示主窗口
window.get_window("main").unwrap().show().unwrap();
}
// 注册命令:
fn main() {
tauri::Builder::default()
// Add this line
.invoke_handler(tauri::generate_handler![close_splashscreen])
.run(tauri::generate_context!())
.expect("failed to run app");
}
④使用
import { invoke } from '@tauri-apps/api/tauri'
document.addEventListener('DOMContentLoaded', () => {
// 这将等待窗口加载,但你可以在您想要的任何触发器上运行此函数
invoke('close_splashscreen')
})
第二种方法:
①首先需要隐藏主窗口 tauri.config.json
"windows": [
{
"fullscreen": false,
"resizable": true,
"title": "有米TG营销助理",
"center": true,
"width": 600,
"height": 400,
"minWidth": 600,
"minHeight": 400,
"visible": false
}
]
②使用创建多窗口,在页面调用创建多窗口的方法
disclaimerWin();
③使用定时器或者点击事件关闭初始屏幕,显示主窗口
// 关闭当前窗口
closeWin("Disclaimer");
// 显示主窗口
showWin("main");
6.打开文件/目录选择对话框
由于使用的是axios,上传文件无法完成,就是用的该方法,将文件传递给后端
options | 类型 | 描述 |
---|---|---|
defaultPath | string | 初始目录或文件路径 |
directory | boolean | 对话框是否为文件选择 |
filters | DialogFilter[] | 对话框的筛选 |
multiple | boolean | 是否允许多个选择 |
recursive | boolean | 如果目录为 true,则指示以后将递归地读取它。定义范围上是否允许子目录。 |
title | string | 对话窗口标题 |
import { open } from '@tauri-apps/api/dialog';
const selected = await open({
multiple: true,
filters: [{
name: 'Image',
extensions: ['png', 'jpeg']
}]
});
if (Array.isArray(selected)) {
// 用户选择多个文件
} else if (selected === null) {
// 用户取消文件选择
} else {
// 用户选择一个文件
}
7.修改窗口
登录成功需要修改窗口可以使用下面的方法
import { appWindow, LogicalSize } from '@tauri-apps/api/window';
await appWindow.setResizable(true); // 是否可以更改该大小
await appWindow.setSize(new LogicalSize(1920, 1080)); // 窗口重置宽高
await appWindow.setMinSize(new LogicalSize(1920, 1080)); // 窗口重置最小宽高
await appWindow.center(); // 窗口居中
8.退出窗口操作
import { exit } from '@tauri-apps/api/process';
await exit(0);
标签:tauri,各种,窗口,label,Tauri,boolean,设置,const,options From: https://blog.csdn.net/lqlqll/article/details/141062710