Tauri2+Vue3 开发桌面应用初探

前言

Tauri 是一个框架，用于为所有主要桌面和移动平台构建微型、快速的二进制文件。开发人员可以集成任何编译为 HTML、JavaScript 和 CSS 的前端框架来构建用户体验，同时在需要时利用 Rust、Swift 和 Kotlin 等语言作为后端逻辑。

Tauri 应用程序利用每个用户系统上已有的 Web 视图。Tauri 应用程序仅包含特定于该应用程序的代码和资产，不需要将浏览器引擎与每个应用程序捆绑在一起。这意味着最小的 Tauri 应用程序的大小可以小于 600KB。

环境准备

nodejs 这个就不用说了，需要注意的是需要选择新版本的 nodejs，不然会有兼容性问题

安装 Microsoft Visual Studio C++ 生成工具

下载 Visual Studio 2022 生成工具

博客图片

安装WebView2

这个直接从微软网站下载和运行安装即可，一般 windows 已经默认安装过了。

Rust

最后前往 www.rust-lang.org/zh-CN/tools… 来安装 rustup (Rust 安装程序)。

tauri 主进程是使用 rust 来编写的，我们的软件需要和 rust 脚本进行交互

初始化项目

执行

npm create tauri-app@latest

选择好自己项目偏好就完成项目初始化了。接下来介绍一下项目的目录结构, 基本目录结构和 vue 差不多，只是多了一个 src-tauri 目录

接下来主要看看 src-tauri 目录

----icons
----src                          //项目初始化脚本
----build.rs                   //构建入口
----Cargo.toml             //rust配置文件
----tauri.conf.json        //tauri配置文件,包含页面相关配置

项目启动

启动网页版本

npm run vite

启动桌面版本

注：桌面版本运行命令会自动运行网页版本的命令，不用手动启动网页版本了

npm run tauri dev

博客图片

桌面端加载页面

首先在根目录下新建 loading.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	应用 初始化 中....
</body>
</html>

修改 vite.config.js，变成多入口的配置

export default defineConfig(async () => ({  
    plugins: [vue()],
    server: {  
        port: 1420,  
        strictPort: true,  
        watch: {  
            // 3. tell vite to ignore watching `src-tauri`  
            ignored: ["**/src-tauri/**"],  
        },  
    }, 
    // 新增 build 配置
    build: {  
        rollupOptions: {  
            input: {  
                index: './index.html',  
                loading: './loading.html'  
            }  
        }  
    }  
}));

修改 src-tauri/tauri.conf.json 中的 windows 配置

"windows": [
      {
        "title": "index",
        "width": 800,
        "height": 600,
        "url": "/",
        "visible": false,
        "transparent": false,
        "decorations": true
      },
      {
        "title": "loading",
        "width": 400,
        "height": 300,
        "decorations": true,
        "transparent": false,
        "url": "loading.html",
        "label": "loading"
      }
]

这里包含对每个窗口的自定义配置，比如是否透明: transparent, 窗口宽高 width、height 等等。具体配置参考窗口配置

注意这里把窗口 index 的 visible 设置为了 false 隐藏起来了，需要在页面加载完成后再展示这个页面

修改 src-tauri/src/main.ts, 新增展示窗口的 `rust` 脚本

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
// 引入依赖
use tauri::{Manager, Window};
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

// 这里新增加载完成脚本，注意脚本需要用 #[tauri::command] 注释 方法和函数需要以下划线分割
#[tauri::command]
async fn loding_finish(window: Window) {
  // 关闭加载页面
  window.get_window("loading").expect("no window labeled 'splashscreen' found").close().unwrap();
  // 展示主界面
  window.get_window("main").expect("no window labeled 'main' found").show().unwrap();
} 

fn main() {
    tauri::Builder::default()
        // 这里需要注册 loding_finish 函数
        .invoke_handler(tauri::generate_handler![greet, loding_finish])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

最后修改 src/App.vue，在主界面加载完成后，展示主界面

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Greet from "./components/Greet.vue";
import { invoke } from "@tauri-apps/api/tauri";
import { onMounted } from "vue";

onMounted(() => {
  setTimeout(() => {
    invoke('loding_finish')
  }, 2000)
})

</script>

启动时可以看到应用初始化中... 界面

打包

执行打包命令

npm run tauri build

打包中需要下载一些配置文件国内比较慢，可以把一些github下载的文件手动下载下来

把zip文件下载下来,然后去找路径 C:Users<你的电脑用户名>AppDataLocaltauri在这个文件夹下,如果没有tauri文件夹就自己创建一个，把zip各自解压进去。

//C:Users<你的电脑用户名>AppDataLocaltauri
WixTools314   //这里解压wixtool的zip
NSIS              //这里解压NSIS的zip

前言