Tauri：跨平臺探索之旅
一、簡介
Tauri 是一個跨平臺 GUI 框架，與 Electron 的思想基本類似。都是屬于跨平臺技術(shù)的解決方案
圖片
優(yōu)缺點(diǎn)快速分析
我們一般會把tauri作為 Electron 的替代方案，electron優(yōu)點(diǎn)咱們不看，這里就提兩個electron比較明顯的問題：
- 安裝包大小。Electron 應(yīng)用程序需要內(nèi)置 Chromium 渲染引擎和 Node.js 環(huán)境，導(dǎo)致項(xiàng)目安裝包很大。
- 資源占用。Electron 占用較高的 CPU 和內(nèi)存資源，作為小型的工具類項(xiàng)目應(yīng)用，用戶體驗(yàn)會不太友好。
- 啟動時間稍顯長。
Tauri 作為一種使用 Rust 和 Web 技術(shù)棧構(gòu)建跨平臺桌面應(yīng)用的框架。這里也分析一下它的幾個優(yōu)點(diǎn)和缺點(diǎn)：
- 優(yōu)點(diǎn)
- 高性能：Tauri 使用 Rust 語言編寫底層代碼，具有內(nèi)存安全、高性能和并發(fā)性等優(yōu)點(diǎn)。
- 跨平臺支持：Tauri 支持多個平臺，如 Windows、macOS 和 Linux，可以幫助開發(fā)者輕松地構(gòu)建跨平臺的應(yīng)用。
- 小安裝包：由于 Tauri 應(yīng)用程序使用原生控件和 Web 技術(shù)結(jié)合的方式，因此安裝包相對較小。
- 啟用時間較短。
- 安全性：使用操作系統(tǒng)的原生 GUI 控件來創(chuàng)建應(yīng)用程序界面，從而提高了應(yīng)用程序的可訪問性和安全性。
- 缺點(diǎn)
- 學(xué)習(xí)成本：由于 Tauri 使用 Rust 和 Web 技術(shù)進(jìn)行開發(fā)，因此需要具備一定的 Rust 和 Web 開發(fā)經(jīng)驗(yàn)，對于新手開發(fā)者來說可能需要一定的學(xué)習(xí)成本。
- 社區(qū)規(guī)模：相比于其他框架，Tauri 的社區(qū)規(guī)模還相對較小，可能需要開發(fā)者自行解決一些問題。
- 可維護(hù)性：Tauri 尚處于快速發(fā)展階段，可能存在 API 變動和不穩(wěn)定的情況。以及webview也會有一些本身自帶的兼容性問題等等。
圖片
對比Tauri和Electron
總的來說，Tauri 是一種非常有潛力的框架，它可以幫助開發(fā)者快速構(gòu)建高性能、跨平臺的桌面應(yīng)用。但是，它也存在一些學(xué)習(xí)成本和可維護(hù)性等方面的問題，需要開發(fā)者在選型的時候有更多的思考。
二、使用教程
2.1 環(huán)境準(zhǔn)備（以mac環(huán)境為例）
??其他環(huán)境的可以參考官方教學(xué)文檔，在此不做贅述
- 安裝 CLang 和 macOS 開發(fā)依賴項(xiàng)
xcode-select --install- 安裝Rust
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh2.2 構(gòu)建項(xiàng)目
使用 pnpm 創(chuàng)建項(xiàng)目
pnpm create tauri-app
圖片
選擇完你熟悉的項(xiàng)目配置后，執(zhí)行提示的內(nèi)容，運(yùn)行項(xiàng)目，會自動在桌面彈出初始化的窗口
圖片
2.3 項(xiàng)目構(gòu)成
圖片
- dist：web項(xiàng)目打包編譯目錄
- src：vue前端頁面代碼（渲染進(jìn)程）
- src-tauri：rust相關(guān)（主進(jìn)程）
2.4 完善項(xiàng)目配置
完成項(xiàng)目內(nèi)容后，我們可以在 tauri.conf.json 文件中配置 Webview 的選項(xiàng)，包括 Webview 庫的版本、窗口大小、窗口樣式、窗口標(biāo)題、用戶代理字符串等。
圖片
2.5 打包
pnpm tauri build直接執(zhí)行打包會直接報(bào)個錯
圖片
將tauri.conf.js的默認(rèn)配置修改為build
圖片
再次執(zhí)行打包就好了，然后直接安裝使用
圖片
到此為止，我們體驗(yàn)了一把使用 Tauri 開發(fā)桌面端應(yīng)用的流程?？梢愿兄?，它對前端開發(fā)者是比較友好的，但是如果想深入掌握它，需要學(xué)習(xí) Rust。
三、整體構(gòu)成
??Tauri主要基于以下幾個關(guān)鍵技術(shù)：
- Rust
- Web技術(shù)
- Webview
??整體結(jié)構(gòu)大致長這樣????
圖片
- 在 Tauri 架構(gòu)中，Rust 應(yīng)用程序是整個系統(tǒng)的核心，它提供了 Tauri API 的實(shí)現(xiàn)。通過tauri api讓 Rust 應(yīng)用程序與 WebView 和 Web 內(nèi)容進(jìn)行交互。
- WebView 是一個通用的 Web 容器，通常基于底層平臺的內(nèi)置 Web 技術(shù)實(shí)現(xiàn)，例如：macOS 上的 WKWebView 和 Windows 上的 Edge WebView。WebView 用于加載 Web 內(nèi)容，使其可以顯示在原生桌面應(yīng)用程序中。
- Web 內(nèi)容是在 WebView 中加載的 HTML、CSS 和 JavaScript 代碼。Tauri 可以加載遠(yuǎn)程 Web 內(nèi)容，也可以加載本地 Web 內(nèi)容，例如打包在原生應(yīng)用程序中的 Web 資源。
??通過這個架構(gòu)，Tauri 提供了一種快速創(chuàng)建跨平臺原生桌面應(yīng)用程序的方法，充分利用了 Rust 的性能和 Web 技術(shù)的靈活性。那么，接下來簡單講一下這三塊都有哪些內(nèi)容。
3.1 Rust
- 語言
Tauri的核心是使用 Rust 語言編寫的。在 Tauri 中，Rust 代碼用于調(diào)用本地操作系統(tǒng)的 API，實(shí)現(xiàn)應(yīng)用的后端邏輯，并與前端 Web 技術(shù)進(jìn)行交互。Rust的一些主要特性包括：
- 內(nèi)存安全：Rust 的所有權(quán)系統(tǒng)可以有效避免內(nèi)存泄漏和空指針等問題，確保程序在運(yùn)行時不會發(fā)生崩潰。
- 線程安全：Rust 的并發(fā)模型允許開發(fā)者編寫線程安全的代碼，可以在多核處理器上并行執(zhí)行，提高應(yīng)用的性能。
- 高性能：Rust 的編譯器會在編譯時進(jìn)行優(yōu)化，生成的二進(jìn)制文件具有很好的性能表現(xiàn)。
- 易于與其他語言交互：Rust 支持與其他語言進(jìn)行交互，例如與 JavaScript 進(jìn)行交互，這在 Tauri 中非常重要。
- 除了上述特性，Rust 還有其他很多特性和優(yōu)點(diǎn)，如代碼可讀性、錯誤處理、模式匹配等，這些特性在 Tauri 中也會得到充分的發(fā)揮。
總之，Tauri 的 Rust 代碼是實(shí)現(xiàn)其核心功能的關(guān)鍵，使用 Rust 可以有效避免一些常見的安全漏洞，并且可以保證應(yīng)用具有高性能、可靠性和擴(kuò)展性。
- 庫的使用
Tauri 使用了多個 Rust 庫，主要包括以下幾個方面：
- 底層平臺庫：Tauri 使用了多個底層平臺庫，包括 winapi（Windows 平臺）、cocoa（macOS 平臺）、gtk（Linux 平臺）等，這些庫提供了與操作系統(tǒng)交互的接口，使得 Tauri 可以在不同的平臺上實(shí)現(xiàn)一致的行為，達(dá)到抹平差異的目的。
- Webview 庫：Tauri 使用了多個 Webview 庫，包括 webview, wry, cef, tao, nwjs 等，不同的平臺使用不同的 Webview 庫。這些庫提供了在 Rust 代碼中嵌入 Webview 的能力，使得 Tauri 可以在桌面應(yīng)用中集成 Web 技術(shù)。
- 異步編程庫：Tauri 使用了 async-std 庫來實(shí)現(xiàn)異步編程。這個庫提供了基于 async/await 的異步編程模型，使得 Tauri 可以使用 Rust 的強(qiáng)類型和安全性，同時又能夠處理異步操作。
- 序列化和反序列化庫：Tauri 使用了 serde 庫來進(jìn)行數(shù)據(jù)的序列化和反序列化。這個庫提供了基于屬性宏的序列化和反序列化方式，使得 Tauri 可以方便地在 JavaScript 和 Rust 之間傳遞數(shù)據(jù)。
- 日志庫：Tauri 使用了 env_logger 庫來進(jìn)行日志記錄。這個庫提供了一種靈活的日志記錄方式，使得 Tauri 可以在開發(fā)和調(diào)試時方便地記錄日志。
- 其他庫：除了上述庫之外，Tauri 還使用了其他一些 Rust 庫，包括 lazy_static（懶加載靜態(tài)變量庫）、serde_json（JSON 序列化和反序列化庫）、walkdir（遍歷目錄和文件庫）等，這些庫提供了豐富的功能，使得 Tauri 可以實(shí)現(xiàn)更加復(fù)雜的功能。
3.2 Web
在Tauri中，Web技術(shù)主要用于兩個方面：一是創(chuàng)建應(yīng)用程序的UI界面，二是通過Webview與Rust代碼通信。
先看看創(chuàng)建界面：我們可以使用HTML、CSS和JavaScript來創(chuàng)建應(yīng)用程序的UI界面，也能夠集成當(dāng)前所有Web項(xiàng)目里頭（包括React、Vue、Angular等等）。
圖片
接下來看看如何讓W(xué)ebview與Rust代碼通信。
定義Tauri事件
??可以寫在main.rs里
#[tauri::command]
fn hello(name: String) -> String {
format!("Hello, {}!", name)
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![hello])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}在上面的代碼中，我們定義了一個hello函數(shù)，并使用tauri::command宏將其注冊為一個Tauri事件。該函數(shù)接受一個名為name的字符串參數(shù)，并返回一個格式化的問候語
在JavaScript代碼中發(fā)送事件
在JavaScript代碼中，我們可以使用window.tauri.invoke方法來發(fā)送一個Tauri事件。例如，我們可以編寫以下代碼來調(diào)用Rust中的hello事件：
window.tauri.invoke('hello', { name: 'Alice' })
.then(response => {
console.log(response); // 輸出 "Hello, Alice!"
});3.3 Webview
在Tauri中，Webview是負(fù)責(zé)渲染應(yīng)用程序UI的核心組件。具體來說，Webview是一個用于顯示網(wǎng)頁內(nèi)容的窗口，類似于瀏覽器中的標(biāo)簽頁。Tauri使用Webview作為應(yīng)用程序的UI引擎，并使用Rust和JavaScript代碼來控制UI的行為。
Tauri使用了一些第三方的Webview引擎，例如：webview、wry 和 cocoa webview。這些Webview引擎為Tauri提供了不同的支持平臺和不同的性能特征。
另外，Tauri提供了一組Rust API，可以用于與Webview進(jìn)行交互，例如：
- tauri::window: 用于與當(dāng)前窗口進(jìn)行交互。
- tauri::event: 用于發(fā)送事件到Webview。
- tauri::menu: 用于在Webview中創(chuàng)建菜單。
除了使用Rust API之外，我們還可以使用JavaScript代碼與Webview進(jìn)行交互。例如，我們可以使用以下代碼在JavaScript代碼中獲取Webview的引用：
const webview = window.tauri.promisified({
cmd: 'getWebview'
});??當(dāng)我們獲取了Webview的引用之后，我們可以使用JavaScript API來控制Webview的行為，例如：
- webview.addEventListener: 監(jiān)聽Webview事件。
- webview.postMessage: 向Webview發(fā)送消息。
- webview.executeJavaScript: 在Webview中執(zhí)行JavaScript代碼。
通過使用這些API，我們可以實(shí)現(xiàn)高度自定義的UI界面，同時也可以方便地與Rust代碼進(jìn)行通信和交互。
四、資源 & 文檔
- Tauri官方文檔 - https://tauri.app/
- Awesome Tauri（精選的 Tauri 生態(tài)系統(tǒng)和社區(qū)中最好的東西，包含插件和應(yīng)用，可以借鑒和學(xué)習(xí)） - http://github.com/tauri-apps/awesome-tauri。
- Tauri issues（Tauri問答）- http://github.com/tauri-apps/tauri/issues
- Tauri discussions（Tauri討論社區(qū)） - http://github.com/tauri-apps/tauri/discussions
- Rust 編程語言基本語法學(xué)習(xí)- http://doc.rust-lang.org/book/
- crates.io（Rust生態(tài)的包管理網(wǎng)站） - http://doc.rust-lang.org/book/
