三、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类型描述defaultPathstring初始目录或文件路径directoryboolean对话框是否为文件选择filtersDialogFilter[]对话框的筛选multipleboolean是否允许多个选择recursiveboolean如果目录为 true，则指示以后将递归地读取它。定义范围上是否允许子目录。titlestring对话窗口标题

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