HTML、CSS 和 JavaScript

本指南將引導您使用 HTML、CSS 和 JavaScript 建立您的第一個 Tauri 應用程式。如果您是網頁開發的新手，這可能是您開始的最佳位置。

資訊

在我們繼續之前，請確保您已完成先決條件，以建立一個可運作的開發環境。

Tauri 是一個使用任何前端框架和 Rust 核心來建置桌面應用程式的框架。每個應用程式都包含兩個部分

建立視窗並向這些視窗公開原生功能的 Rust 二進位檔
您選擇用於在視窗內產生使用者介面的前端

在以下內容中，我們將首先建立前端架構、設定 Rust 專案，最後向您展示如何在這兩者之間進行通訊。

create-tauri-app

建立新專案最簡單的方法是使用create-tauri-app 工具程式。它提供純粹 HTML/CSS/JavaScript 和許多前端框架（例如 React、Svelte 和 Yew）的意見化範本。

sh <(curl https://create.tauri.app/sh)

irm https://create.tauri.app/ps | iex

cargo install create-tauri-app --locked
cargo create-tauri-app

npm create tauri-app@latest

yarn create tauri-app

pnpm create tauri-app

bunx create-tauri-app

請注意，如果你使用 create-tauri-app，則不需要遵循本指南的其餘部分，但我們仍建議閱讀它以了解設定。

以下是我們將要建置的預覽

Preview of Application

建立前端

我們將使用 HTML 檔案建立一個非常精簡的 UI。但為了保持整潔，讓我們為它建立一個單獨的資料夾

mkdir ui

接下來，在該資料夾內建立一個 index.html 檔案，其內容如下

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Welcome from Tauri!</h1>
  </body>
</html>

我們將為本指南保留精簡的 UI，但你可以盡情使用更多內容或透過 CSS 新增樣式。

建立 Rust 專案

每個 Tauri 應用程式的核心都是一個 Rust 二進位檔，它透過名為 tauri 的 Rust crate 來管理視窗、網路檢視和對作業系統的呼叫。此專案由 Cargo 管理，它是 Rust 的官方套件管理員和通用建置工具。

我們的 Tauri CLI 在幕後使用 Cargo，因此你很少需要直接與它互動。Cargo 有許多未透過我們的 CLI 公開的更多有用功能，例如測試、程式碼檢查和格式化，因此請參閱其官方文件以取得更多資訊。

安裝 Tauri CLI

如果你尚未安裝 Tauri CLI，你可以使用以下命令之一進行安裝。不確定要使用哪一個嗎？請查看常見問題解答條目。

npm
Yarn
pnpm
Bun
Cargo

npm install --save-dev @tauri-apps/cli

若要讓 npm 正確偵測 Tauri，您需要將它新增至 package.json 檔案的「scripts」區段

package.json
"scripts": {
  "tauri": "tauri"
}

yarn add -D @tauri-apps/cli

pnpm add -D @tauri-apps/cli

bun add -D @tauri-apps/cli

cargo install tauri-cli

若要建立預先設定好使用 Tauri 的最小 Rust 專案，請開啟終端機並執行下列指令

npm
Yarn
pnpm
Bun
Cargo

npm run tauri init

yarn tauri init

pnpm tauri init

bunx tauri init

cargo tauri init

它將引導您完成一系列問題

您的應用程式名稱為何？
這將會是最終套件的名稱，也是作業系統會呼叫您的應用程式的名稱。您可以在這裡使用任何您想要的。名稱

視窗標題應為何？
這將會是預設主視窗的標題。您可以在這裡使用任何您想要的標題

您的網頁資源（HTML/CSS/JS）相對於將建立的 <current dir>/src-tauri/tauri.conf.json 檔案位於何處？
這是 Tauri 在為生產環境建置時會從中載入您的前端資源的路徑。
請使用 ../ui 作為此值

您的開發伺服器的 URL 為何？
這可以是 URL 或檔案路徑，Tauri 會在開發期間載入。
請使用 ../ui 作為此值

您的前端開發指令為何？
這是用於啟動您的前端開發伺服器的指令。
您可以將此處留空，因為不需要編譯任何內容

您的前端建置指令為何？
這是用於建置您的前端檔案的指令。
您可以將此處留空，因為不需要編譯任何內容

資訊

如果您熟悉 Rust，您會注意到 tauri init 的外觀和運作方式很像 cargo init。如果您偏好完全手動設定，您可以只使用 cargo init 並新增必要的 Tauri 相依性

tauri init 指令會產生一個名為 src-tauri 的資料夾。這是 Tauri 應用程式將所有核心相關檔案放置在此資料夾中的慣例。讓我們快速瀏覽此資料夾的內容

Cargo.toml
Cargo 的清單檔案。您可以宣告您的應用程式所依賴的 Rust 箱子、應用程式的元資料，以及更多內容。有關完整參考，請參閱 Cargo 的清單格式。
tauri.conf.json
此檔案讓您設定和自訂 Tauri 應用程式的各個面向，從應用程式名稱到允許的 API 清單。請參閱 Tauri 的 API 設定，以取得支援選項的完整清單和每個選項的詳細說明。
src/main.rs
這是 Rust 程式碼的進入點，也是我們引導進入 Tauri 的地方。您會在其中找到兩個區段
src/main.rs
```
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
tauri::Builder::default()
   .run(tauri::generate_context!())
   .expect("error while running tauri application");
}
```
以 cfg! 巨集 開頭的那一行只有一個目的：停用命令提示字元視窗，此視窗通常會在 Windows 上執行已套件化的應用程式時彈出。如果您使用 Windows，請嘗試將其註解掉，看看會發生什麼事。
main 函式是進入點，也是程式碼執行時第一個被呼叫的函式。
圖示
您可能會想要為應用程式設定一個時髦的圖示！為了讓您快速上手，我們包含了一組預設圖示。您應該在發布應用程式之前將這些圖示替換掉。進一步了解 Tauri 的圖示功能指南中的各種圖示格式。

這樣就完成了！現在您可以在終端機中執行下列指令，以開始開發應用程式的建置

npm
Yarn
pnpm
bun
Cargo

npm run tauri dev

yarn tauri dev

pnpm tauri dev

bunx tauri dev

cargo tauri dev

應用程式預覽

Development Progress

呼叫指令

Tauri 讓您能透過原生功能來強化您的前端。我們稱這些為指令，基本上是您可以從前端 JavaScript 呼叫的 Rust 函式。這讓您能夠以效能更高的 Rust 程式碼來處理繁重的處理或呼叫作業系統。

我們來做一個簡單的範例

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

指令就像任何一般的 Rust 函式，但額外加上了 #[tauri::command] 屬性巨集，讓您的函式可以與 JavaScript 環境溝通。

最後，我們還需要告訴 Tauri 我們新建立的指令，以便它能適當地路由呼叫。這是透過結合以下您看到的 .invoke_handler() 函數和 generate_handler![] 巨集來完成的

src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

現在您已準備好從前端呼叫您的指令！

我們通常會在這裡推薦 @tauri-apps/api 套件，但由於我們沒有為本指南使用打包器，請在您的 tauri.conf.json 檔案中啟用 withGlobalTauri

tauri.conf.json
{
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../ui",
    "distDir": "../ui",
    "withGlobalTauri": true
  },

這將把預先打包的 API 函數版本注入到您的前端。

現在您可以修改您的 index.html 檔案來呼叫您的指令

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="header">Welcome from Tauri!</h1>
    <script>
      // access the pre-bundled global API functions
      const { invoke } = window.__TAURI__.tauri

      // now we can call our Command!
      // You will see "Welcome from Tauri" replaced
      // by "Hello, World!"!
      invoke('greet', { name: 'World' })
        // `invoke` returns a Promise
        .then((response) => {
          window.header.innerHTML = response
        })
    </script>
  </body>
</html>

提示

如果您想進一步了解 Rust 和 JavaScript 之間的通訊，請閱讀 Tauri 進程間通訊指南。

HTML、CSS 和 JavaScript

建立前端​

建立 Rust 專案​

呼叫指令​

建立前端

建立 Rust 專案

呼叫指令