使用Tauri和Angular创建桌面应用程序

发表于 2023-08-12 更新于 2024-03-07 分类于 web 阅读次数：本文字数： 4.3k 阅读时长 ≈ 4 分钟

1. 前言

Tauri 是一个应用程序构建工具包，可让您使用 Web 技术为所有主要桌面操作系统构建软件。核心库是用 Rust 编写的，用户界面几乎可以使用任何前端框架编写。它包括一个可选的、tree-shakeable JavaScript API用于舒适地访问底层操作系统、一个具有签名和验证的桌面二进制捆绑器、一个让您的用户保持最新版本的安全更新程序、一个可扩展的插件系统以及支持与操作系统整合，例如通知和应用程序托盘。

Tauri 使用简单且易于扩展。对于 Rust 编程语言的新手，Tauri 提供了一个舒适的学习环境，将与您一起成长。安装 Rust 后，创建您的第一个应用程序只需运行create-tauri-app. 但如果您希望保持 100% Rust 的安全性和舒适性，那么您根本不必使用 Node.js。

我们为注重安全、尊重隐私和具有环保意识的软件工程社区构建 Tauri

Tauri的设计哲学: 我们为注重安全、尊重隐私和具有环保意识的软件工程社区构建Tauri.

2. 预先准备

首先您需要安装 Rust 及其他系统依赖。安装Rust环境可以参考[鹏叔的技术博客 - Windows上安装Rust]

3. 创建一个tauri功能

1
2
3


npm create tauri-app

这里的npm create实际是npm init的别名, tauri-app是一个initializer 对应的npm包为create-tauri-app, 关于npm create的详细讲解请参考鹏叔的技术博客 - npm create命令详解

C:\code>npm create tauri-app
✔ Project name · your_project_name
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · Angular - (https://angular.io/)

输入应用名称
选择前端语言
选择包管理工具
选择UI template, 正如标题所说, 本文主要讲述使用Tauri和Angular创建桌面应用程序, 所以这里我选择Angular

初始化完成后, 项目的目录结构如下:

$tree -I "node_modules" -L 2
your_project_name # 项目名称
├── node_modules # 前端依赖
├── README.md  # 项目介绍文件
├── angular.json # Angular工程配置文件
├── package-lock.json # 前端依赖的精确描述信息
├── package.json # 前端项目清单
├── src         # 前端程序源
│   ├── app     # Angular 类, 模板, 样式, 组件等
│   ├── assets  # 图片等静态资源
│   ├── index.html  # 项目主界面
│   ├── main.ts  # Angular应用入口文件
│   └── styles.scss # css样式文件
├── src-tauri
│   ├── Cargo.lock  # 包含了依赖的精确描述信息，类似于 yarn.lock 或 package-lock.json
│   ├── Cargo.toml  # Tauri (Rust) 项目清单
│   ├── build.rs   # Tauri 构建应用
│   ├── icons     # 应用程序图标
│   ├── src       # Tauri App 程序源，例如系统菜单，托盘，插件配置等
│   ├── target   # 构建的产物会被放入此文件夹中，target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│   └── tauri.conf.json # 自定义 Tauri 应用程序的配置文件，例如应用程序窗口尺寸，应用名称，权限等
├── tsconfig.app.json # Angular要用到的typescript 配置文件
└── tsconfig.json    # typescript 配置文件

4. 编译运行

项目创建成功后, 进入项目根目录, 安装依赖.

1
2
3


npm install

启动程序

1
2
3


npm run tauri dev

执行以上命令, 如果没有严重错误, 一个桌面应用程序将会自动打开.

第一次运行此命令时，Rust包管理器需要几分钟的时间来下载和构建所有必需的包。由于它们是缓存的，所以后续的构建要快得多，因为只有您的代码需要重新构建。
Rust构建完成后，会打webview显示您的应用程序。你可以对你的应用程序进行更改，如果应用程序已经打开，webview应该像浏览器一样自动更新。当你对Rust文件进行更改时，它们会自动重建，你的应用程序也会自动重新启动。

5. 构建应用

Tauri Bundler 是一个 Rust 工具，用于编译二进制文件、打包资产并准备最终捆绑包。它会检测你当前的操作系统并相应地构建一个包。目前支持：

Windows: .msi
macOS: .app, .dmg
Linux: .deb, .appimage

1
2
3


npm run tauri build

如果未修改 src-tauri/tauri.conf.json 中的 identifier 直接 build 会报以下错误。想要正确构建，只需修改为自己特有的标识符即可，如 com.myapp.dev。构建完成后，在 src-tauri/target/release/bundle/{platform}/{app} 下就可以找到应用程序安装包。参考问题排查问题4

了解更多不同平台打包注意事项：Tauri Building

6. 如何debug tauri前端程序

在开发阶段，可以使用如下命令，编译并允许Tauri应用，应用会自动打开，右键菜单会出现inspect选项，点击inspect就能调出devtools程序。

1
2
3


npm run tauri dev

或者，打包时加上debug选项如下：

1
2
3


npm run tauri buid -- --debug

使用如上命令打包的安装包是带有debug功能的，安装软件后打开应用，右键菜单会出现inspect选项，点击inspect就能调出devtools程序。

7. 问题排查

问题1: 在执行npm run tauri dev 时, 超时

1
2
3

√ Compiled successfully.
; class=Os (2)ous network error (2 tries remaining): failed to send request: 操作超时
; class=Os (2)ous network error (1 tries remaining): failed to send request: 操作超时

原因是: cargo需要远程下载以下crate超时, 需正确配置cargo使用国内镜像, 超时原因你懂的. 关注我的博客首页可以获得解决办法.

问题2: 在执行npm run tauri build, nsis-3.zip下载不了

解决办法:

手动下载nsis-3.zip, 将加压后的文件夹nsis-3.08文件夹重命名为NSIS, 放到C:\Users<UserName>\AppData\Local\tauri目录下.

问题3: 在执行npm run tauri build, 无法下载NSIS-ApplicationID.zip

1
2

Error failed to bundle project: `https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)`

解决办法:

手动下载 NSIS-ApplicationID.zip, 将解压后的文件放到NSIS\Plugins
并将NSIS\Plugins\ReleaseUnicode\ApplicationID.dll复制到NSIS\Plugins\x86-unicode\ApplicationID.dll

将nsis_tauri_utils.dll 复制到NSIS\Plugins\x86-unicode\nsis_tauri_utils.dll

问题4: 当执行npm run tauri build报如下错误

1	Error 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.

原因: 默认生成的bundle identifier不是唯一的很容易跟其它应用冲突

问题5: 使用_setup.exe二进制安装包安装的应用程序报错: “由于找不到WebView2Loader.dll, 重新安装此程序可能会解决问题.”

问题分析: 同一个打包过程, 打出的msi安装包没有此问题, 但是在_setup.exe中该文件缺失. 将WebView2Loader.dll手动拷贝到应用程序同级的目录下, 在执行应用程序, 错误消失.

查看了官方文档, nsis配置文件是可以定制的, 需要添加与打包msi格式相同的一段代码, 拷贝.cargo\registry\src\github.com-1ecc6299db9ec823\webview2-com-sys-0.19.0\x64\WebView2Loader.dlldll文件到可能的解决办法可以是自定义nsis

另外还有一种办法是将WebView2Loader.dll作为额外的资源文件添加到安装包中, 参考Embedding Additional Files.