1.开启所有API使用

<code>{

"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，上传文件无法完成，就是用的该方法，将文件传递给后端

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