惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
人人都是产品经理
人人都是产品经理
小众软件
小众软件
博
博客园 - Franky
WordPress大学
WordPress大学
Jina AI
Jina AI
Google DeepMind News
Google DeepMind News
I
InfoQ
钛媒体：引领未来商业与生活新知
钛媒体：引领未来商业与生活新知
F
Fortinet All Blogs
博
博客园 - 【当耐特】
IT之家
IT之家
G
Google Developers Blog
J
Java Code Geeks
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
云风的 BLOG
云风的 BLOG
Recent Announcements
Recent Announcements
有赞技术团队
有赞技术团队
V
Visual Studio Blog
U
Unit 42
阮一峰的网络日志
阮一峰的网络日志
月光博客
月光博客
GbyAI
GbyAI
雷峰网
雷峰网

Jartto's blog

好久不见，我想和你聊聊！ Docker 新书上市一周年 30s 就可以掌握的 Nginx 片段 了不起的 Istio 一文了解 Kubernetes Docker 边学边用 将博客搬至 CSDN WebP 方案分析与实践 Web「性能测试」知多少？ 网站性能指标 - FMP 聚焦 Web 性能指标 TTI 破局：技术视野与规划 极简弹幕方案 GitBook 和它有趣的插件 系统负载看不懂？ 人工智能时代，Web 前端能做什么？ CSS 渲染原理以及优化策略 网站优化，这些工具你一定用得着 程序员如何减少开发中的 Bug？
用 Tauri+Rust+Yew 来构建你的跨端桌面应用
Jartto · 2023-05-16 · via Jartto's blog

发布在 技术博文 123 次阅读

Tauri 可以开发跨平台桌面应用。起先了解 Tauri 的时候，就被它「性能+包体积」的优势所吸引。正好之前有 Electron 开发经验，那不妨来尝试一下！

一、Tauri 是什么

Tauri 是一个框架，可以用于构建轻量级、安全的桌面应用程序。它与现代前端框架（如 Vue.js、React.js 或者 Svelte）一起使用，使开发者可以用自己熟悉的 Web 技术创建桌面应用。

Tauri 的主要特点包括：

  • 轻量级：Tauri 应用程序比使用 Electron 构建的应用程序更小，更快。这是因为 Tauri 使用 Rust 构建，Rust 是一种性能优越且内存安全的编程语言。
  • 安全性：Tauri 的设计考虑了安全性。它有一个内置的安全层，可以防止一些常见的攻击。
  • 跨平台：Tauri 支持在 Windows、Mac 和 Linux 上构建应用程序。

总的来说，Tauri 提供了一种高效、安全的方式来使用 Web 技术构建桌面应用程序。

前置安装

说明文档

Rust + Tauri + Yew

1
2
3
cargo install create-tauri-app

cargo create-tauri-app

如果你还没有安装Tauri CLI

1
cargo install tauri-cli

运行项目

1
cargo tauri dev

日志信息如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Running BeforeDevCommand (`trunk serve`)
2023-03-19T12:51:19.075591Z  INFO 📦 starting build
2023-03-19T12:51:19.075822Z  INFO spawning asset pipelines
2023-03-19T12:51:19.486709Z  INFO building rust-tauri-app-ui
2023-03-19T12:51:19.486759Z  INFO copying directory path="public"
2023-03-19T12:51:19.486782Z  INFO copying & hashing css path="styles.css"
2023-03-19T12:51:19.487151Z  INFO finished copying & hashing css path="styles.css"
2023-03-19T12:51:19.487281Z  INFO finished copying directory path="public"
    Finished dev [unoptimized + debuginfo] target(s) in 0.17s
2023-03-19T12:51:19.701213Z  INFO fetching cargo artifacts
2023-03-19T12:51:19.940618Z  INFO processing WASM for rust-tauri-app-ui
2023-03-19T12:51:19.961661Z  INFO calling wasm-bindgen for rust-tauri-app-ui
2023-03-19T12:51:20.120952Z  INFO copying generated wasm-bindgen artifacts
2023-03-19T12:51:20.122868Z  INFO applying new distribution
2023-03-19T12:51:20.123718Z  INFO ✅ success
2023-03-19T12:51:20.124694Z  INFO 📡 serving static assets at -> /
2023-03-19T12:51:20.124755Z  INFO 📡 server listening at http://127.0.0.1:1420
        Info Watching /Users/jartto/Documents/Project/rust-tauri-app/src-tauri for changes...
   Compiling rust-tauri-app v0.0.0 (/Users/jartto/Documents/Project/rust-tauri-app/src-tauri)
    Finished dev [unoptimized + debuginfo] target(s) in 2.29s

效果预览

如果看到如下窗口，意味着应用已经正常启动了。
效果预览

代码说明

Tauri 为您的前端开发提供了其他系统原生功能。 我们将其称作指令，这使得您可以从 JavaScript 前端调用由 Rust 编写的函数。 由此，您可以使用性能飞快的 Rust 代码处理繁重的任务或系统调用。

以下是一个简单示例：

1
2
3
4
5

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

一个指令等于一个普通的 Rust 函数，只是还加上了 #[tauri::command] 宏来让其与您的 JavaScript 环境交互。
最后，我们需要让 Tauri 知悉您刚创建的指令才能让其调用。 我们需要使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册指令：

1
2
3
4
5
6
7

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 选项。

1
2
3
4
5
6
7
8
{
    "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../ui",
    "distDir": "../ui",
    "withGlobalTauri": true
},

此选项会将已打包版本的 API 函数注入到前端中。接下来，可以修改 index.html 文件来调用指令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
      
      const { invoke } = window.__TAURI__.tauri

      
      
      
      invoke('greet', { name: 'World' })
        
        .then((response) => {
          window.header.innerHTML = response
        })
    </script>
  </body>
</html>

应用调试

应用程序调试

打包应用

执行命令

1
cargo tauri build

会报如下错误：

1
2
You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
您必须在 `tauri.conf.json > tauri > bundle > identifier` 中更改包标识符。 默认值 com.tauri.dev 是不允许的，因为它在应用程序中必须是唯一的。

按照提示修改标识符：com.tauri.dev ——> com.tauri.jartto，重新运行打包命令：

1
cargo tauri build

此时，程序已经开始编译：

1
2
3
4
5
6
7
8
9
Compiling serialize-to-javascript v0.1.1
   Compiling rust-tauri-app v0.0.0 (/Users/jartto/Documents/Project/rust-tauri-app/src-tauri)
   Compiling ignore v0.4.18
   Compiling tauri-macros v1.2.1
   Compiling serde_repr v0.1.12
   Compiling encoding_rs v0.8.32
   Compiling state v0.5.3
   Compiling embed_plist v1.2.2
    Building [=======================> ] 376/377: rust-tauri-app(bin)

我们重点关注最后两行：

1
2
3
Finished 2 bundles at:
/Users/jartto/Documents/Project/rust-tauri-app/target/release/bundle/macos/rust-tauri-app.app
/Users/jartto/Documents/Project/rust-tauri-app/target/release/bundle/dmg/rust-tauri-app_0.0.0_aarch64.dmg

顺着目录可以找到最终打包生成的文件地址，如下：
构建包地址

查看 APP 文件大小：
文件大小

选择 rust-tauri-app_0.0.0_aarch64.dmg 并双击安装，如下：
安装 APP

运行效果就不用说了，和上文效果预览一致。至此，起手项目大功告成！

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。