首页 > 其他分享 >三、Tauri 使用(各种设置)

三、Tauri 使用(各种设置)

时间:2024-08-09 15:25:33浏览次数:12  
标签:tauri 各种 窗口 label Tauri boolean 设置 const options

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

       

标签:tauri,各种,窗口,label,Tauri,boolean,设置,const,options
From: https://blog.csdn.net/lqlqll/article/details/141062710

相关文章

  • 二、Tauri 使用(http请求 axios)
    1.启用该功能        在tauri.conf.json文件中启用该功能,配置要请求的API路径,多个API的情况使用逗号隔开就可以了{ "tauri":{  "allowlist":{   "http":{    "all":true,    "request":true,    "scope":["http:......
  • Diffusers中Pipeline的数据类型是怎么设置和转化的,pipeline.dtype和pipeline.from_pre
    参考资料:Diffusers中DiffusionPipeline基类的[源码]众所周知Pipeline是Diffusers中最重要的一个API接口,一直以来我都对这个接口数据结构的获取一知半解,今天看了下源码终于知道了这个API结构的数据类型是如何设置的。直接看代码:@propertydefdtype(self)->torch......
  • 从 python 设置运算符符号到方法名称的映射是什么?它们与文档不匹配
    我创建了自己的Customset类,它实现了python集合的几乎所有方法。当我使用此自定义集的实例时,许多集合运算符都会失败。它们会失败,并显示类似以下内容的内容:TypeError:unsupportedoperandtype(s)for-:'Customset'andCustomset'orTypeError:'<='......
  • 如何在回调中获取当前的dash ag-grid设置
    问题是,我有一个组数据,可以在破折号选项卡上展开。我想在离开选项卡时保持行/列状态、顺序、过滤器相同。我使用dcc.Store保存回调中的设置,然后在选项卡返回时将它们取回。然而,行状态、顺序、展开/折叠状态似乎在破折号网格中没有属性。具体来说,我想获取当前扩展节点并在刷新/......
  • VS设置 LLVM-Clang 编译器进行编译C++项目
    在VS中默认的C++编译器一般为MSVC编译器,可以根据自己的需要将其设置为LLVM-Clang编译器。主要有两种方案:1)直接使用VisualStudioInstaller来自动下载对应的Clang编译器和构建工具,后续无需再进行配置,便可直接使用。2)使用自己编译或者单独下载的LLVM-Clang编译器,以及通......
  • CentOs7 中mysql8 设置远程连接
    迁移csdnCentOs7中Mysql8.0设置远程连接1登陆Mysqlmysql-uroot-p输入密码2选择mysql数据库usemysql;在mysql数据库中存储了用户信息的user表3在mysql数据库的user表中查看当前root用户的相关信息selecthost,user,authentication_string,pluginfromus......
  • Jmeter常见设置,启动默认设置为中文
    1、设置启动Jmeter后显示内容语言为中文未配置时打开Jmeter查看页面可手动设置语言为中文这种设置不好的地方在于每次重新启动后都需要设置一般有点烦可以用另一种方法解决:修改jmeter.properties文件的配置打开jmeter的目录,文件位于jmeter的bin目录下打开文件后,增加langua......
  • 不能在此路径中使用此配置节。如果在父级别上锁定了该节,便会出现这种情况。锁定是默认
    原文链接:https://www.cnblogs.com/wwssgg/p/17984105今天运行项目的时候出现了这个错误....查了一下解决的方法。 具体方案如下: 1、先确认安装IIS的时候有没有装Asp.Net,如果没安装的话,安装上即可。(XTHS:采用这步,就可以了!) 2、IIS采用了更安全的web.config管理机制,默......
  • MySQL 备库可以设置 sync_binlog 非 1 吗?【转】
    众所周知,防止断电丢失Binlog、故障恢复过程丢失数据,MySQL主库必须设置sync_binlog=1。那么作为备库可以例外吗?我们的第一反应当然是不行,既然主库会丢数据,备库自然一样。但其实不然,备库丢了数据是可以重新从主库上复制的,只要这个复制的位置和备库本身数据的位置一致就OK了,它......
  • 设置windows系统下的tomcat开机自启
    设置前的准备工作(配置系统环境变量)新增CATALINA_HOME变量,变量值为tomcat的安装路径在Path中添加:%CATALINA_HOME%\bin结合安装版本问题,分正常安装版本tomcat和免安装tomcat(无service.bat)两种情况。一、正常安装版本(tomcat安装文件有service.bat文件)说明:安装后没有servi......