集成到已有项目
如果你已经有存在的 Web 项目,本指南将引导你将 Tauri 集成到你的项目中,无论项目是基于 Node.js(比如 Svelte、React、Vue 或 Angular)或基于 Rust(例如 Yew 或 Dominator)。
在此之前,请确保您已完成前置准备工作,且开发环境已能正常使用。
虽然 Tauri 与几乎任何前端框架兼容,但我们将在本指南创建的整个过程中使用通过 create-react-app 创建的 React 项目。 我们假设你将从一个类似于这样的项目结构开始。
.
│── package.json
│── public
│ ╰── index.html
╰── src
│── App.css
│── App.jsx
│── index.css
╰── index.js
创建 Rust 项目
每款 Tauri 应用的核心都是由一个管理窗口的 Rust 二进制文件、WebView 和进行系统调用的 tauri
Rust 包构成。 此项目使用官方的软件包管理器及 Rust 通用构建工具 Cargo 来管理。
我们的 Tauri CLI 工具会在底层自动调用 Cargo,所以您大部分情况下无需和其交互。 Cargo 有诸多我们的 CLI 工具所未提供的有用功能,包括测试、分析及格式化工具。请参阅其官方文档来了解更多。
如果你还没有安装Tauri CLI,你可以使用下面的一个命令进行安装。 不确定该用哪个? 请参阅常见问题。
- npm
- Yarn
- pnpm
- Bun
- Cargo
npm install --save-dev @tauri-apps/cli@">1.0.0"
"scripts": {
"tauri": "tauri"
}
yarn add -D @tauri-apps/cli@^1.0.0
pnpm add -D @tauri-apps/cli@1
bun add -D @tauri-apps/cli@1.0.0
cargo install tauri-cli --version "^1.0.0"
要搭建一个使用 Tauri 的简单 Rust 项目,请打开终端并运行如下命令:
- npm
- Yarn
- pnpm
- Cargo
npm run tauri init
yarn tauri init
pnpm tauri init
cargo tauri init
它会向您询问几个问题:
- 您应用的名字是什么?
这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。 - 窗口标题叫什么?
这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。 - 前端页面资源 (HTML/CSS/JS) 相对于
<current dir>/src-tauri/tauri.conf.json
文件将被创建的位置?
这是 production环境时tauri加载web前端资源的目录.For the project example in this guide, is../build
. Note that it may be something different like../dist
if you're using a different framework. - 开发环境时的加载路径?
可以是一个网络地址也可以是一个文件路径 development.For the project example in this guide, this ishttp://localhost:3000
. Note that it may be something different (or even a directory) if you're using a different framework. - 你将使用什么命令来开发前端页面?
这是启动前端开发服务器的命令。For the project example in this guide, this isnpm run start
(make sure to adapt this to use the package manager of your choice). - 你将使用什么命令来构建前端页面?
这是构建前端文件的命令。
若您已熟悉 Rust,您会发现 tauri init
看起来很像 cargo init
命令。 若您想自己设置,您完全可以使用 cargo init
替代此命令,并手动添加 Tauri 依赖。
tauri init
命令将生成 src-tauri
文件夹。 传统上,Tauri 应用会将其核心相关的文件放置于此文件夹中。 让我们快速过一下此文件夹中的内容:
Cargo.toml
Cargo 的清单文件。 您可以声明您应用所依赖的 Rust 包和应用的元数据等等。 要查看所有可修改的值,请参阅 Cargo 清单格式。tauri.conf.json
此文件可让您自定义 Tauri 应用的各方各面,包括应用名称到允许的 API 列表。 请参阅 Tauri 的 API 配置来深入了解每个支持的选项。src/main.rs
这是你的 Rust 程序的入口,也是我们启动 Tauri 的地方。 您可以发现它由两个部分组成:src/main.rs#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}The line beginning with the
cfg! 宏
所开始的一行仅有一个目的:关闭构建好的应用在 Windows 上运行时一般会出现的控制台窗口。 若您是 Windows 用户,您可以试试去掉这行看看会发生什么。main
函数是您程序的入口点,也是运行时调用的第一个函数。icons
您可能想为自己的应用整一个漂亮的图标! 为了帮助您快速开发,我们为您提供了一套默认图标。 您应该在发布前把这些图标换成您自己的图标。 您可以在 Tauri 的图标功能指南中了解有关多种图标格式的信息。
And that's it, you have now added Tauri to your existing project and you should see a src-tauri
directory that looks something like this:
│── package.json
│── public
│ ╰── index.html
│── src
│ │── App.css
│ │── App.jsx
│ │── index.css
│ ╰── index.js
╰── src-tauri
│── Cargo.toml
│── build.rs
│── icons
│── src
╰── tauri.conf.json
调用指令
Tauri 为您的前端开发提供了其他系统原生功能。 我们将其称作指令,这使得您可以从 JavaScript 前端调用由 Rust 编写的函数。 由此,您可以使用性能飞快的 Rust 代码处理繁重的任务或系统调用。
以下是一个简单示例:
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
一个指令等于一个普通的 Rust 函数,只是还加上了 #[tauri::command]
宏来让其与您的 JavaScript 环境交互。
最后,我们需要让 Tauri 知悉您刚创建的指令才能让其调用。 我们需要使用 .invoke_handler()
函数及 Generate_handler![]
宏来注册指令:
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
现在您的前端可以调用刚注册的指令了!
There are two different ways you can invoke commands from your frontend project:
- Using the
@tauri-apps/api
JavaScript library (preferred) - 使用
withGlobalTauri
以构建出预构建的 Tauri API 版本
我们将在下面两次访问。
使用 JavaScript 库
使用 @tauri-apps/api
JavaScript 库来调用新创建的命令, 通过 JavaScript 访问诸如窗口、文件系统等核心功能, 您可以使用自己喜欢的 JavaScript 包管理器来安装。
- npm
- Yarn
- pnpm
- Bun
npm install @tauri-apps/api@">1.0.0"
yarn add @tauri-apps/api@^1.0.0
pnpm add @tauri-apps/api@1
bun add @tauri-apps/api@1.0.0
您现在可以从库中导入 invoke
函数并使用它来调用命令:
import logo from './logo.svg';
import './App.css';
import { invoke } from '@tauri-apps/api'
function App() {
// now we can call our Command!
// 在应用窗口中右键,打开开发者工具
// 你会看到控制台上输出了 "Hello, World!"!
invoke('greet', { name: 'World' })
// `invoke` 返回异步函数
.then((response) => console.log(response))
return (
// -- snip --
)
}
使用 withGlobalTauri
To interact with Tauri from your frontend without using the @tauri-apps/api
JavaScript package you will need to enable withGlobalTauri
in your tauri.conf.json
file:
{
"build": {
"beforeBuildCommand": "npm run build",
"beforeDevCommand": "npm run dev",
"devPath": "http://localhost:3000",
"distDir": "../build",
"withGlobalTauri": true
},
此选项会将已打包版本的 API 函数注入到您的前端中。
You can now modify the App.jsx
file to call your command:
import logo from './logo.svg';
import './App.css';
// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri
function App() {
// now we can call our Command!
// 在应用窗口中右键,打开开发者工具
// 你会看到控制台上输出了 "Hello, World!"!
invoke('greet', { name: 'World' })
// `invoke` 返回异步函数
.then((response) => console.log(response))
return (
// -- snip --
)
}
运行您的应用程序
现在您可以在您的终端中运行接下来的命令来开始您的应用程序的开发构建:
- npm
- Yarn
- pnpm
- bun
- Cargo
npm run tauri dev
yarn tauri dev
pnpm tauri dev
bunx tauri dev
cargo tauri dev
若您想要了解更多有关 Rust 和 JavaScript 之间通信的信息,请参阅 Tauri 进程间通信指南。