Tauri+Rust+Vue 跨平臺桌面應用簡明教程(1)環境建立+系統事件+自定義選單

小牛呼嚕嚕發表於2022-11-23
RustVue事件

作者：小牛呼嚕嚕 | https://xiaoniuhululu.com
計算機內功、JAVA底層、面試相關資料等更多精彩文章在公眾號「小牛呼嚕嚕 」

Tauri簡介

Tauri 是一個工具包，可以幫助開發者為主要桌面平臺製作應用程式（如 mac，windows，linux 等）。幾乎支援現有的任何前端框架（如 react, vue, vite 等），其核心是使用 Rust 編寫的。
類似Electron的GUI框架，相比於 Electron，其突出優點就是體積小。我們知道Electron 相當於是打包了一個小型瀏覽器，體積比較大，還佔記憶體。而 Tauri 開發的應用，前端使用作業系統的 webview，後端整合了 Rust，理論上效能槓槓的，使得打包後的體積相當小。空殼專案Electron 打包的應用大概在 50 M，而 Tauri 只有 4 MB左右。

本文就來嚐嚐鮮，踩踩坑，順便和Rust編譯器作作鬥爭！

環境準備

本文只介紹 Windows10下的準備工作，其他環境大家得自行去官網檢視https://tauri.app/zh/v1/guides/getting-started/prerequisites

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

我們需要安裝 Microsoft C++ 生成工具。 其實最簡單的方法是下載 Visual Studio 2022 生成工具。 進行安裝選擇時，請勾選 "C++ 生成工具" 和 Windows 10 SDK。

安裝路徑自行選擇即可

WebView2

Windows 11 已預裝了 WebView2

Tauri 需要 WebView2 才能在 Windows 上呈現網頁內容，小牛的電腦 還是win10，需要自行去微軟網站https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/#download-section上下載和執行常青版載入程式
安裝指令碼會自動為您下載適合您架構的版本。 不過，如果您遇到問題 (特別是 Windows on ARM)，您可以自己手動選擇正確版本。

Rust

Microsoft Visual Studio C++安裝完成後，Rust 所需的 msvc 命令列程式需要手動新增到環境變數中，否則安裝 Rust 時 rustup-init 會提示未安裝 Microsoft C++ Build Tools，其位於：%Visual Studio 安裝位置%\VC\Tools\MSVC\%version%\bin\Hostx64\x64（自行替換其中的 %Visual Studio 安裝位置%、%version% 欄位）下。

最後需要前往 https://www.rust-lang.org/zh-CN/tools/install 來安裝 rustup (Rust 安裝程式)。 請注意，為了使更改生效，您必須重新啟動終端，在某些情況下需要重新啟動 Windows 本身。

在 https://www.rust-lang.org/zh-CN/learn/get-started下載系統相對應的 Rust 安裝程式，一路預設即可。

檢查是否安裝成功：

C:\windows\system32>rustup -V
rustup 1.24.3 (ce5817a94 2021-05-31)
info: This is the version for the rustup toolchain manager, not the rustc compiler.
info: The currently active `rustc` version is `rustc 1.61.0 (fe5b13d68 2022-05-18)`

建立專案

我們還是走的官網推薦的create-tauri-app專案

cargo install create-tauri-app

cargo create-tauri-app

然後需要選擇，npm 包管理器，因為想使用vue-ts

E:\Halo>cargo create-tauri-app

✔ Project name · tauri-app-project-study
✔ Choose your package manager · npm
✔ Choose your UI template · vue-ts

Please follow https://tauri.app/v1/guides/getting-started/prerequisites to install the needed prerequisites, if you haven't already.

Done, Now run:
  cd tauri-app-project-study
  npm install
  npm run tauri dev

最後把 終端提示的命令依次執行完即可

cd tauri-app-project-study
npm install
npm run tauri dev

成功執行專案：

至此，一個新的 Tauri 專案已建立完成，我們使用vscode進行後續的開發

專案結構

專案結構除了多一個src-tauri(這個是rust專案)，其他的基本和vue專案結構一樣

新增關閉提示

下面我們就簡單實現關閉提示的系統事件，來演示一下，tauri 和 rust 配合的效果
開啟src/main.rs，我們發現

此處有個爆紅，我們只需在根目錄下，建立dist資料夾即可讓此處不再爆紅

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

//use tauri::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)
}

fn main() {
    tauri::Builder::default()
		//新增關閉提示的邏輯
        .on_window_event(|event|{
            match event.event() {
                tauri::WindowEvent::CloseRequested { api, .. } =>{
                    //阻止預設關閉
                    api.prevent_close();

                    let window = event.window().clone();
                    tauri::api::dialog::confirm(Some(&event.window()), "關閉應用", "確定關閉當前應用?", move| answer|{
                        if answer {
                            window.close();
                        }
                    })
                },
                _ => {}//todo
            }
        })
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

如果我們最後只寫window.close();，編譯器會報：unused Result that must be used，this Resultmay be an Err variant, which should be handled就是說這個rust中對於返回值為Result型別的函式，呼叫方如果沒有進行接收，編譯期會產生警告

let _result =window.close();//直接接收一下即可，_表示讓瀏覽器忽略未使用的變數

新增自定義選單

我們就直接用官網的例項，來演示一下了，修改main.rs

use tauri::{Menu, MenuEntry, Submenu, MenuItem};

fn main() {
    tauri::Builder::default()
    	//新增選單
        .menu(Menu::with_items([
            MenuEntry::Submenu(Submenu::new(
            "File",
            Menu::with_items([
                MenuItem::CloseWindow.into(),
                #[cfg(target_os = "macos")]
                CustomMenuItem::new("hello", "Hello").into(),
            ]),
            )),
        ]))
        .on_window_event(|event|{
            match event.event() {
                tauri::WindowEvent::CloseRequested { api, .. } =>{
                    //阻止預設關閉
                    api.prevent_close();

                    let window = event.window().clone();
                    tauri::api::dialog::confirm(Some(&event.window()), "關閉應用", "確定關閉當前應用?", move| answer|{
                        if answer {
                            let _result =window.close();
                        }
                    })
                },
                _ => {}//todo
            }
        })
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

效果：

本文就先到這裡啦，後面我們繼續更新tauri+rust更多有意思的特性

參考資料：
https://tauri.app/zh/v1/guides/distribution/windows

本篇文章到這裡就結束啦，很感謝你能看到最後，如果覺得文章對你有幫助，別忘記關注我！更多精彩的文章

相關文章