Tauri 快速上手

0x01 概述

（1）简介

• 官网链接：https://tauri.app/

  • 中文版：https://tauri.app/zh-cn/

• Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架

• 特点：

  • 安全：基于 Rust 构建，具有内存、线程和类型安全方面的优势
  • 兼容：基于 Web 技术架构，能兼容几乎所有的前端框架
  • 小体积：基于 WebView 渲染，打包后的体积足够小

• 与 Electron 对比：

  	Electron	Tauri
  前端引擎	Chromium	WebView
  后端集成	通过 NodeJS 的原生模块与第三方库	通过 Rust 语言的系统编程特性
  打包体积	大（主要因为包含了完整的 Chromium 浏览器）	小
  资源占用	高	低

（2）环境配置

以 Windows 11 系统为例

1. 下载Microsoft C++ 构建工具并安装其中的 “使用 C++ 进行桌面开发”

   • 如果已安装过 Visual Studio 可以通过 Visual Studio Installer 安装

2. 在 WebView2 Runtime 下载区安装 WebView2

• WebView 2 已默认安装在 Windows 10（从版本 1803 开始）和更高版本的 Windows 上

3. 在 Rust 工具下载区根据系统下载 32 位或 64 位的 rustup-init.exe，之后根据官网提示安装并配置 Rust

   • 如果 rustup 内下载速度慢，可以修改系统环境变量，添加以下内容：

     变量	值
     RUSTUP_DIST_SERVER	https://mirrors.aliyun.com/rustup
     RUSTUP_UPDATE_ROOT	https://mirrors.aliyun.com/rustup/rustup

   • Rust 编程入门可参考《Rust | 博客园-SRIGT》

4. 参考《NodeJS 与 Express | 博客园-SRIGT》安装 NodeJS 或使用 NVM 安装

（3）创建项目

a. create-tauri-app（推荐）

1. 在 PowerShell 中，使用命令 irm https://create.tauri.app/ps | iex 获取 create-tauri-app 脚本并执行

2. 依次填写或选择以下内容：

   1. 项目名称：tauri-app
   2. 项目 ID：com.tauri-app.app
   3. 前端语言：TypeScript / JavaScript
   4. 包管理器：npm
   5. UI 模板：Vanilla
   6. UI 风格：JavaScript

3. 依次使用如下命令：

   cd tauri-app # 进入项目目录
   npm install # 安装依赖
   npm run tauri dev # 启动项目
   

   • 在启动项目时，如果发生类似 Expected identifier but found "import" 的报错，则需要使用命令 npm install --save-dev esbuild@0.24.0 解决

     参考自 https://github.com/evanw/esbuild/issues/4010

4. 启动成功后会弹出一个应用程序

b. Tauri CLI

1. 使用命令 npm create vite@latest 创建以一个基于 Vite 的应用程序
2. 依次填写或选择以下内容：
   1. 项目名称：tauri-app
   2. 框架：Vanilla
   3. 变体：JavaScript
3. 使用命令 cd tauri-app 进入项目目录
4. 使用命令 npm install --save-dev @tauri-apps/cli@latest 安装 Tauri 脚手架
5. 使用命令 npx tauri init 运行脚手架工具执行初始化
6. 依次填写或选择以下内容：
   1. 应用名称：tauri-app
   2. 窗口标题：tauri-app
   3. Web 资源目录：.
   4. 调试服务 URL：http://localhost:5173
   5. 前端调试命令：npm run dev
   6. 前端构建命令：npm run build
7. 使用命令 npx tauri dev 启动项目

（4）目录说明

• src：前端源码目录
  • assets：资源目录
• src-tauri：后端源码目录
  • capabilities：应用的功能和权限目录
  • gen：代码生成目录
    • schemas：数据结构和验证目录
  • icons：图标资源目录
  • src：源码目录
  • target：构建输出目录

0x02 前后端交互

在应用中，按 F12 键可以开启调试工具

（1）前端调用后端

1. 修改 src-tauri\src\lib.rs

   // 后端提供事件
   #[tauri::command]
   fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
   }#[cfg_attr(mobile, tauri::mobile_entry_point)]
   pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![greet]) // 注册事件.run(tauri::generate_context!()).expect("error while running tauri application");
   

   其中，#[tauri::command] 表示其标记的代码可以被前端调用

2. 修改 src\main.js

   const { invoke } = window.__TAURI__.core; // 作为 Tauri 核心库的一个方法，能够调用后端提供的代码let greetInputEl;
   let greetMsgEl;async function greet() {greetMsgEl.textContent = await invoke("greet", // 后端提供的方法名称（大小写完全一致）{ name: greetInputEl.value } // 向后端方法传递参数（通过对象传递，键值与函数参数一一对应）);
   }window.addEventListener("DOMContentLoaded", () => {greetInputEl = document.querySelector("#greet-input");greetMsgEl = document.querySelector("#greet-msg");document.querySelector("#greet-form").addEventListener("submit", (e) => {e.preventDefault();greet();});
   });
   

（2）后端调用前端

1. 修改 src\main.js

   // 添加依赖
   use tauri::{AppHandle, Emitter};#[tauri::command]
   fn greet(name: &str) -> String {format!("Hello, {}! You've been greeted from Rust!", name)
   }// 新增事件
   #[tauri::command]
   fn reply(app: AppHandle, name: &str) {app // 代表前端的一个指针，不必在前端显式传递这个参数.emit( // 用于向前端推送事件"my_event", // 事件名称format!("hello from rust, {}!", name), // 推送数据内容).unwrap() // 用于直接 panic
   }#[cfg_attr(mobile, tauri::mobile_entry_point)]
   pub fn run() {tauri::Builder::default().plugin(tauri_plugin_opener::init()).invoke_handler(tauri::generate_handler![greet, reply]) // 注册事件.run(tauri::generate_context!()).expect("error while running tauri application");
   }
   

2. 修改 src\main.js

   const { invoke } = window.__TAURI__.core;
   const { listen } = window.__TAURI__.event; // 作为 Tauri 事件库的一个方法，能够监听后端推送的事件let greetInputEl;
   let greetMsgEl;listen( // 监听事件"my_event", // 事件名称(response) => { // 回调函数greetMsgEl.textContent = response.payload;}
   );async function reply() {await invoke("reply", { name: greetInputEl.value });
   }window.addEventListener("DOMContentLoaded", () => {greetInputEl = document.querySelector("#greet-input");greetMsgEl = document.querySelector("#greet-msg");document.querySelector("#greet-form").addEventListener("submit", (e) => {e.preventDefault();reply();});
   });
   

详细调用方法参考官方文档：https://tauri.app/zh-cn/plugin/commands/

0x03 插件

• 一般使用命令 npm run tauri add [插件名称] 安装指定插件

  • Tauri 官方文档提供的一些插件及其使用方法：https://tauri.app/zh-cn/plugin/

• 默认情况下，所有插件命令都被阻止，无法访问

  • 如需访问，则必须在 src-tauri\capabilities\default.json 配置中定义一个权限列表

• 举例：使用文件系统插件

  1. 使用命令 npm run tauri add fs 安装相关插件

  2. 修改 src\main.js，添加文件写入操作

     const { writeFile, BaseDirectory } = window.__TAURI__.fs;let greetInputEl;
     let greetMsgEl;async function write() {const msg = greetInputEl.value; // 获取输入框的值const encoder = new TextEncoder(); // 实例化编码器const data = encoder.encode(msg); // 将字符串编码await writeFile("file.txt", // 文件名data, // 文件内容{ baseDir: BaseDirectory.Desktop } // 文件保存位置（桌面）);
     }window.addEventListener("DOMContentLoaded", () => {greetInputEl = document.querySelector("#greet-input");greetMsgEl = document.querySelector("#greet-msg");document.querySelector("#greet-form").addEventListener("submit", (e) => {e.preventDefault();write();});
     });
     

  3. 修改 src-tauri\capabilities\default.json，添加权限

     {// ..."permissions": ["core:default","opener:default","fs:default","fs:scope-desktop","fs:write-all"]
     }
     

     其中：

     • "fs:default"：安装插件后默认添加
     • "fs:scope-desktop"：添加对桌面操作的权限
     • "fs:write-all"：添加所有文件写入权限

0x04 打包

1. 使用命令 npm run tauri build 对 Tauri 应用打包
   • 打包过程中需要保持连接至 GitHub
   • 如果 wix 下载失败，参考《windows Tauri 构建（Release）时下载 WiX等其它打包文件失败 | 博客园-litesite》
2. 打包完成后，在 src-tauri\target\release 目录查看打包好的内容

-End-