三、Tauri 使用（各种设置）

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);