创建体积更小、运行更快、更加安全的跨平台桌面应用——初步了解TauriTauri 是一款基于Rust的应用构建工具包，让

Tauri 是一款基于Rust的应用构建工具包，让您能够为使用 Web 技术的所有主流桌面操作系统构建软件。Tauri 可以创建体积更小、运行更快、更加安全的跨平台桌面应用。

下面是tauri对比electron的一些数据对比

Detail	Tauri	Electron
Installer Size Linux	3.1 MB	52.1 MB
Memory Consumption Linux	180 MB	462 MB
Launch Time Linux	0.39s	0.80s
Interface Service Provider	WRY	Chromium
Backend Binding	Rust	Node.js (ECMAScript)
Underlying Engine	Rust	V8 (C/C++)
FLOSS	Yes	No
Multithreading	Yes	Yes
Bytecode Delivery	Yes	No
Multiple Windows	Yes	Yes
Auto Updater	Yes	Yes¹
Custom App Icon	Yes	Yes
Windows Binary	Yes	Yes
macOS Binary	Yes	Yes
Linux Binary	Yes	Yes
iOS Binary	Soon	No
Android Binary	Soon	No
Desktop Tray	Yes	Yes
Sidecar Binaries	Yes	No

安装rust

Tauri 的后端使用的是 Rust，所以在使用前需要安装rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Rust 由工具 rustup 安装和管理, rustup 用于管理不同平台下的 Rust 构建版本并使其互相兼容，支持安装由 Beta 和 Nightly 频道发布的版本，并支持其他用于交叉编译的编译版本。

如果您曾经安装过 rustup，可以执行 rustup update 来升级 Rust。

创建应用

Tauri 由一个可搭配任何前端来构建桌面应用的框架和 Rust 核心构成。每个应用均由两个部分组成：

1、由您选择的前端框架，用于编写窗口内的用户界面
2、创建窗口并向其提供原生功能支持的 Rust 二进制文件

我们会先搭建好前端框架，然后设置一个Rust工程

前端应用

本文选用的前端构建工具是vite，选用的react-ts模版

pnpm create vite my-vue-app --template react-ts

添加eslint和prettier

1、安装vite-plugin-eslint和eslint和prettier相关插件 2、添加.eslintrc.js文件，配置如下

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    '@next/next/no-img-element': 'off',
    '@typescript-eslint/no-explicit-any': ['off']
  }
}

3、添加.prettierrc文件

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "endOfLine": "lf",
  "printWidth": 120,
  "proseWrap": "never",
  "bracketSpacing": true,
  "arrowParens": "always",
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

4、添加vscode设置

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }

创建 Rust 项目

安装@tauri-apps/cli

pnpm add -D @tauri-apps/cli

初始化一个 Tauri 的简单 Rust 项目

pnpm tauri init

它会向您询问几个问题：

1、你的App (应用程序) 名称是什么?

这将是您的 App 构建、打包后最终的名称，您的操作系统将这样称呼您的 App。您可以在此处填写任何您想要的名称。

2、您的 App 的窗口标题应该是什么？

这将是主窗口默认的标题（后续可修改）。您可以在此处填写任何您想要的名称。

3、您的前端页面资源 (HTML/CSS/JS) 相对于 <项目根目录>/src-tauri/tauri.conf.json 文件将被创建的位置？

这是构建 App 时加载的前端页面资源的路径。使用 ../dist 表示此值。

4、你的开发服务器的 URL 是什么？

这可以是一个 URL 或Tauri在开发期间加载的文件路径。使用 http://localhost:5173 表示此值。

vite.config.ts添加如下配置

  clearScreen: false,
  // Tauri 使用固定端口，若此端口不可用将会导致程序错误
  server: {
    strictPort: true,
  },
  // 使用 `TAURI_PLATFORM`、`TAURI_ARCH`、`TAURI_FAMILY`,
  // `TAURI_PLATFORM_VERSION`、`TAURI_PLATFORM_TYPE` 和 `TAURI_DEBUG` 环境变量
  envPrefix: ['VITE_', 'TAURI_'],
  build: {
    // Tauri 支持 es2021
    target: ['es2021', 'chrome100', 'safari13'],
    // 不为调试构建压缩构建体积
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    // 为调试构建生成源代码映射 (sourcemap)
    sourcemap: !!process.env.TAURI_DEBUG,
  }

查看信息

在项目下执行下面命令查看项目的配置信息

npm tauri info

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 16.13.1
  › npm: 8.12.2
  › pnpm: 6.32.3
  › yarn: 1.22.17
  › rustup: 1.25.1
  › rustc: 1.63.0
  › cargo: 1.63.0
  › Rust toolchain: stable-aarch64-apple-darwin

Packages
  › @tauri-apps/cli [NPM]: 1.0.5
  › @tauri-apps/api [NPM]: 1.0.2
  › tauri [RUST]: 1.0.5,
  › tauri-build [RUST]: 1.0.4,
  › tao [RUST]: 0.12.2,
  › wry [RUST]: 0.19.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../dist
  › devPath: http://localhost:5173/
  › framework: React

App directory structure
  ├─ @types
  ├─ dist
  ├─ node_modules
  ├─ public
  ├─ src-tauri
  ├─ .vscode
  └─ src

tauri.config.json

项目的具体配置文件src-tauri\tauri.config.json

名称	类型	描述
package	PackageConfig	Package 设置
tauri	TauriConfig	Tauri 配置

重点看下TauriConfig中WindowConfig

名称	类型	默认值	描述
label	string	null	窗口标识符。它必须是字母数字。
url	WindowUrl	view	窗口 web 视图 URL。
fileDropEnabled	boolean	true	是否在 webview 上启用文件拖放。默认情况下它是启用的。禁用它需要在 Windows 的前端使用拖放。
center	boolean	false	窗口是否开始居中。
x	number? （格式double：）	null	窗口左上角的水平位置
y	number? （格式double：）	null	窗口左上角的垂直位置
width	number （格式double：）	800	窗口宽度。
height	number （格式double：）	600	窗口高度。
minWidth	number? （格式double：）	null	最小窗口宽度。
minHeight	number? （格式double：）	null	最小窗口高度。
maxWidth	number? （格式double：）	null	最大窗口宽度。
maxHeight	number? （格式double：）	null	最大窗口高度。
resizable	boolean	true	窗口是否可调整大小。
title	string	null	窗口标题。
fullscreen	boolean	false	窗口是否以全屏方式启动。
focus	boolean	true	窗口最初是隐藏还是聚焦。
transparent	boolean	false	窗口是否透明。请注意，macOS这需要macos-private-api功能标志，在tauri.conf.json > tauri > macOSPrivateApi. 警告：使用私有 APImacOS会阻止您的应用程序被App Store.
maximized	boolean	false	窗口是否最大化。
visible	boolean	true	窗口是否可见。
decorations	boolean	true	窗口是否应该有边框和栏。
alwaysOnTop	boolean	false	窗口是否应始终位于其他窗口之上。
skipTaskba	boolean	false	是否应将窗口图标添加到任务栏。

图标的处理

在项目的根目录下添加app-icon.png图片

安装@tauri-apps/tauricon

pnpm install --save-dev @tauri-apps/tauricon

在项目目录下执行npx @tauri-apps/tauricon命令会在src-tauri/icons目录下生成项目所需要的各种图标

{
  "tauri": {
    "bundle": {
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

总结

以上就是总结的Tauri创建应用的相关信息，希望对你有帮助！下一篇会总结一下 tauri系统菜单和自定义的菜单，还有系统托盘，进程之前的通信等相关问题。