字玩FontPlayer开发笔记5 Tauri初体验

字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 + ElementUI开发，源代码：
github: https://github.com/HiToysMaker/fontplayer
gitee: https://gitee.com/toysmaker/fontplayer

笔记

字玩目前是用Electron进行桌面端应用打包，但是性能体验不太好，一直想替换成Tauri。Tauri的功能和Electron类似，都可以把前端代码打包生成桌面端（比如Windows和Mac）应用。Tauri只使用系统提供的WebView，不像Electron一样内置Chromium和Node.js，性能体验更佳。

Tauri使用Rust语言开发，对笔者来讲是一门新的语言，学习难度较大，所以迟迟没有更换框架。今天终于开始接触Rust和Tauri，在原有项目上进行了简单的Tauri配置，尽管由于对新语言和框架的生疏，距离将原有Electron代码完全替换成Tauri还有一段距离，但也算开了头。这里记录一下成果。

安装Rust

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

安装好后在.bashrc中添加（或使用zsh的话在./zshrc中添加）：

export PATH="$HOME/.cargo/bin:$PATH"

之后运行：

source ~/.bashrc

或

source ~/.zshrc

安装好Rust后，运行以下代码进行验证：

rustc --version

Tauri安装

安装Tauri:

cargo install tauri-cli

初始化Tauri

接着在原项目中对Tauri进行初始化：

npx tauri init

在初始化过程中会需要输入几个问题：

1. 项目名称：fontplayer
2. 展示名称：字玩
3. 前端代码打包路径：…/dist
4. 开发环境下调试url：http://localhost:5173
5. dev运行命令：npm run dev
6. 打包命令：npm run build
   程序会自动生成src-tauri目录和示例

调试Tauri

命令行输入：

npx tauri dev

系统会自动运行Tauri应用，如果编译没有问题的话，会弹出应用程序。

根据屏幕分辨率适应应用窗口大小

今天笔者只实现了一个最基本的小功能进行测试，根据屏幕分辨率适应应用窗口大小：窗口默认大小为1280 * 800，如果分辨率小于1280 * 800，就使用屏幕分辨率。

完整代码：
src-tauri/src.main.rs

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]fn main() {app_lib::run();
}

src-tauri/src.lib.rs

#![allow(unused_imports)]
#![allow(unused_variables)]use tauri::{Manager, Window};
use tauri::Size;#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default().setup(|app| {// 获取名为 "main" 的 Webview 窗口句柄let window = app.get_webview_window("main").unwrap();// 获取窗口尺寸let primary_display = window.inner_size().unwrap();let screen_width = primary_display.width;let screen_height = primary_display.height;// 获取主显示器的 DPI 缩放因子let scale_factor = window.scale_factor().unwrap();// 设置最大窗口尺寸let max_width = 1280;let max_height = 800;// 根据 DPI 缩放因子调整窗口尺寸let adjusted_width = (max_width as f64 * scale_factor) as u32;let adjusted_height = (max_height as f64 * scale_factor) as u32;// 计算窗口大小，确保窗口大小不超过屏幕大小let window_width = screen_width.min(adjusted_width);let window_height = screen_height.min(adjusted_height);// 获取窗口并设置尺寸window.set_size(Size::new(tauri::PhysicalSize::new(window_width as u32, window_height as u32))).unwrap();if cfg!(debug_assertions) {app.handle().plugin(tauri_plugin_log::Builder::default().level(log::LevelFilter::Info).build(),)?;}Ok(())}).run(tauri::generate_context!()).expect("error while running tauri application");
}

小记

虽然这几天看了一些Rust教程，但是一上手真的不容易，比如函数传参时什么时候需要传引用、对于可能包含None的返回值的unwrap使用等等，很多地方都和js有区别。笔者基础不太好，学习Rust很多地方需要对内存等底层原理理解透彻，对于笔者有一定难度。另外Tauri2相比如Tauri1改动较大，问AI代码实现总是使用老版本的api，导致调试总是报错，几乎每句话都要调试半天，幸好有时调试信息会给出修改提示，还比较有用。在网上搜Tauri的教程还不是特别全面，有些问题搜索不到，只能看官方文档自己摸索。接下来还是需要对新语言和新框架进行更深入的学习，共勉。