当前位置：首页 > article >正文

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

article 2025/1/8 3:56:48

字玩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

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

项目名称：fontplayer
展示名称：字玩
前端代码打包路径：…/dist
开发环境下调试url：http://localhost:5173
dev运行命令：npm run dev
打包命令：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的教程还不是特别全面，有些问题搜索不到，只能看官方文档自己摸索。接下来还是需要对新语言和新框架进行更深入的学习，共勉。

查看全文

http://www.kler.cn/a/469569.html