如何在Ubuntu 20.04构建tauri App应用

Tauri是一个框架，用于构建高性能，跨桌面平台的应用。开发者可以集成前端框架构建用户接口

October 31, 2022

6 min read

tauri rust javascript ubuntu

Tauri是一个框架，用于构建高性能，跨桌面平台的应用。开发者可以集成前端框架并编译为HTML，Javascript和CSS构建用户接口。

后端是使用Rust构建的API，它用于与前端用户接口交互。用户接口当前使用tao为macOS和Windows平台提供原生窗口的API。

在Linux使用的是Tauri-团队创建并维护的WRY供原生窗口API。在创建用户接口方面则统一使用webview构建UI。

在macOS平台使用WebKit提供的webview。在Windows和Linux则使用的是WebView2创建用户接口。

本教程将说明如何在Ubuntu 20.04构建Tauri应用，使用HTML、CSS和JavaScript。如果您是Web开发新手，这可能是最好的起点。

请以root或具有sudo权限的用户登录并安装依赖的软件，包括安装c/c++的开发环境以及libwebkit2gtk。运行以下命令。

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

创建tauri App

Tauri是一个可以使用任何前端框架和Rust构建桌面应用程序的框架。每个应用程序由两部分组成。

第一部分是Rust，它用于创建窗口并向这些窗口提供原生接口，前端部分则在窗口生成用户界面。

接下来，我们将首先构建前端UI接口，然后构建Rust API，最后向您展示如何在两者之间如何进行交互。

构建Tauri项目的最简单方法使用create-tauri-app脚本程序。它为HTML/CSS/JavaScript和许多前端框架包括React、Svelte和Yew提供现成的模板。

使用快捷键ctrl+alt+t打开你的终端，运行命令tauri sh <(curl https://create.tauri.app/sh)。

当create.tauri.app脚本程序下载完成后，将会询问你项目的名称，选择项目使用的包管理器，你可以选择你喜欢使用包管理器，在本教程中，我们选择yarn。

然后选择构建web前端的UI使用的框架，vanilla表示不使用任何框架，我们将选择react-ts作为前端框架。

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

✔ Project name · helloworld
✔ Choose your package manager · yarn
✔ Choose your UI template · react-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 helloworld
  yarn
  yarn tauri dev

现在我们已经使用create.tauri.app创建tauri应用，这将是你的第一个tauri应用。

项目包含两个主要的目录，src是构建前端应用的目录，构建前端的文件都应该存储在此目录中。src-tauri是Rust提供原生接口源码目录。

现在你可以根据终端的提示切换到项目目录并运行App。运行命令cd helloworld && yarn && yarn tauri dev。

cd helloworld
yarn
yarn tauri dev

在构建前端接口时，tauri也支持HMR，你在前端代码的更改也能立即渲染到webview。

但是当你的前端代码应用集成Redux，zustand等状态管理器时，你可能使用Redux chrome扩展调试用户接口。

此时，你可以运行命令yarn dev，让前端项目运行在Chrome浏览器，这样你就可以利用chrome浏览器调试应用。

Rust与前端交互

现在我们已经创建tauri应用并成功运行，接下来我们将说明javascript如何与Rust进行交换并调用原生接口。

Tauri可以为前端UI提供调用原生的能力，在Tauri调用调用原生API的方式是通过发送命令完成的，tauri将这些命令称为Command。

本质上是您可以从前端JavaScript上下文调用Rust函数。这使您能够以性能更高的Rust代码处理繁重的任务或对操作系统的调用。

你可能会注意到我们的HelloWorld应用已经调用在src-tauri/src/main.rs的greet函数，在tauri被称为Command。

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

src-tauri/src/main.rs

Command的本质就是Rust函数和#[tauri::command]属性宏组成，生成的Command将允许与JavaScript上下文进行通信。

除了声明command之外，我们还需要告诉Tauri已创建的命令，使Tauri可以找到相应地路由调用。

这是通过invoke_handler()函数和generate_handler![]宏的组合完成的。你可以在src-tauri/src/main.rs的main函数示例代码。

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

src-tauri/src/main.rs

至此一个可在Javascript上下文调用command已经创建。npm包@tauri-apps/api包含一个可以调用command的函数invoke。

你可以在Javascript代码中导入invoke函数从@tauri-apps/api，invoke函数接受两个参数，分别是command的名称，command函数的参数，调用invoke函数后返回Promise。

为了更好使用Typescript类型声明帮助，我们建议你再次封装invoke函数，使类型提示更加完善。

现在我们已经理解Javascript如何调用command，以下是在Javascript上下文调用command最简单方法，你可以在scr/App.tsx找到示例代码。

import { invoke } from "@tauri-apps/api/tauri";
async function greet() {
  await invoke("greet", { name });
}

scr/App.tsx

错误

错误error: could not find system library 'dbus-1' required by the 'libdbus-sys' crate。请运行命令sudo apt install libdbus-1-dev pkg-configz。

错误rrror: could not find system library 'glib-2.0' required by the 'glib-sys' crate。请运行命令sudo apt-get install libgtk-3-dev。

错误error: could not find system library 'libsoup-2.4' required by the 'soup2-sys' crate。请运行命令sudo apt install libsoup2.4-dev。

错误error: could not find system library 'javascriptcoregtk-4.0' required by the 'javascriptcore-rs-sys' crate。运行命令sudo apt install libjavascriptcoregtk-4.0-dev。

错误error: could not find system library 'webkit2gtk-4.0' required by the 'webkit2gtk-sys' crate，请运行命令sudo apt install libwebkit2gtk-4.0-dev。