注册
web

使用Tauri快速搭建桌面项目

什么是 Tauri


Tauri 是一个跨平台的 GUI 框架,与 Electron 的理念相似。Tauri 的前端部分同样基于 Web 技术,但它的后端则采用了 Rust 语言。Tauri 可以创建体积更小、运行更快且更加安全的跨平台桌面应用。


与 Electron 不同,Tauri 并没有内置 Chromium,因此打包后的应用体积要比 Electron 小很多,启动速度更快,内存和 CPU 占用率也更低。


然而,由于没有内置 Chromium,Tauri 使用系统原生的 WebView 来渲染网页,这可能导致不同系统之间的页面表现存在差异。同时,Tauri 的后端需要使用 Rust 进行开发,这对前端开发人员来说可能会有一定的上手成本。


好在 Tauri 已经为我们封装了大部分 API,即使不懂 Rust,也可以开发出一款简单的应用。


预先准备


我们以 macOS 为例:


1. 首先安装 Xcode 命令行工具


在终端中执行以下命令:


xcode-select --install

如果已经安装过 Xcode 命令行工具,则可以直接进行下一步。


2. 安装 Rust


在 macOS 上安装 Rust,请打开终端并输入以下命令:


curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

安装成功后,终端将显示以下内容:


Rust is installed now. Great!


请确保重新启动终端以使更改生效。


快速开始


创建项目


Tauri 官方提供了多种项目模板,可以快速搭建项目:


# pnpm
pnpm create tauri-app

# npm
npm create tauri-app

# yarn
yarn create tauri-app

按照提示选择自己喜欢的模板。


这里我们选择 react 开发前端页面。


一路回车后,打开项目文件夹。执行安装依赖命令:pnpm i。依赖安装完成后,执行 pnpm tauri dev 命令启动项目。这时便会启动一个应用,如下图所示:


image.png


开发


Tauri 的开发非常容易上手,我们先来看下项目文件结构:


项目文件结构


是不是和 Vite 的目录结构一样?


没错,这就是一个常规的 Vite 目录结构,唯一的区别是增加了一个 src-tauri 文件夹,这里面是 Rust 部分的代码,也就是后端代码。


打包


首先,我们需要修改默认的包标识符,位置在 src-tauri > tauri.conf.json > tauri > bundle > identifier。


修改包标识符


这里我们随便填写一个标识符 com.example.app,保存,然后执行命令:pnpm tauri build 就可以正常打包了。


tauri.conf.json 文件是我们的应用配置文件,包含了应用的基本信息。


打包完成后,就可以在 tauri-app/src-tauri/target/release/bundle 目录下找到我们的应用。


打包后的应用


现在我们只构建了 macOS 下的应用。


应用界面


打开之后就可以看到我们的应用了。


参考文档



作者:虾卡拉卡
来源:juejin.cn/post/7388842078798823433

0 个评论

要回复文章请先登录或注册