codecamp

Tauri 创建 Rust 项目

每款 Tauri 应用的核心都是由一个管理窗口的 Rust 二进制文件、WebView 和进行系统调用的 tauri Rust 包构成。 此项目使用官方的软件包管理器及 Rust 通用构建工具 Cargo 来管理。

我们的 Tauri CLI 工具会在底层自动调用 Cargo,所以您大部分情况下无需和其交互。 Cargo 有诸多我们的 CLI 工具所未提供的有用功能,包括测试、分析及格式化工具。请参阅其官方文档来了解更多。

安装 TAURI CLI
如果你还没有安装Tauri CLI,你可以使用下面的一个命令进行安装。 不确定该用哪个? 请参阅常见问题。
  • npm
npm install --save-dev @tauri-apps/cli

要使npm能够正确检测到Tauri,你需要将它添加到你的package.json文件的"scripts"部分中:

package.json

"scripts": {
"tauri": "tauri"
}
  • Yarn
yarn add -D @tauri-apps/cli
  • pnpm
pnpm add -D @tauri-apps/cli
  • Cargo
cargo install tauri-cli

要搭建一个使用 Tauri 的简单 Rust 项目,请打开终端并运行如下命令:

  • npm
npm run tauri init
  • Yarn
yarn tauri init
  • pnpm
pnpm tauri init
  • Cargo
cargo tauri init

它会向您询问几个问题:

  1. 您应用的名字是什么?- 这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。
  2. 窗口标题叫什么?- 这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。
  3. 前端页面资源 (HTML/CSS/JS) 相对于 <current dir>/src-tauri/tauri.conf.json 文件将被创建的位置?- 这是 production环境时tauri加载web前端资源的目录.对于本指南中的项目示例,是../build。请注意,如果你使用不同的框架,它可能会有所不同,比如​../dist​。
  4. 开发环境时的加载路径?- 可以是一个网络地址也可以是一个文件路径 对于本指南中的项目示例,这是​http://localhost:3000​。请注意,如果你使用不同的框架,它可能会有所不同(甚至可能是一个目录)。
  5. 你将使用什么命令来开发前端页面?- 这是启动前端开发服务器的命令。对于本指南中的项目示例,这是npm run start(确保根据你选择的包管理器进行调整)。
  6. 你将使用什么命令来构建前端页面?- 这是构建前端文件的命令。
信息
若您已熟悉 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​ 函数是您程序的入口点,也是运行时调用的第一个函数。

  • 图标

您可能想为自己的应用整一个漂亮的图标! 为了帮助您快速开发,我们为您提供了一套默认图标。 您应该在发布前把这些图标换成您自己的图标。 您可以在 Tauri 的 图标功能指南 中了解有关多种图标格式的信息。

这就是全部了,你现在已经将Tauri添加到你的现有项目中,你应该会看到一个类似这样的src-tauri目录:

│── 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 调用指令
Tauri 使用 JavaScript 库
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Tauri 指南

Tauri 特性

Tauri 插件

Tauri 应用程序接口

Tauri JavaScript/TypeScript

Tauri 命令行界面

Tauri 进程

Tauri 参考

Tauri WebView 版本

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }