Tauri桌面端新起之秀

伊可宁
1,355 阅读3分钟

一、Tauri初识

官方文档：传送门

Tauri是一个为多平台部署构建优化、安全且独立于前端的应用程序，可使用 Web 技术为所有主要桌面操作系统构建软件。

主要特点是 构建更小、更快、更安全的桌面应用程序。

核心库是用Rust编写的，用户界面几乎可以使用任何前端框架编写。

它采用Rust作为后端服务，前端采用TAO、WRY等库来提供轻量级的webview，最终将呈现的是更小的包和更小的内存消耗。

1. Rust

Rust 语言最早发布于 2014 年 9 月。

是一种高效、可靠的通用高级语言，其高效不仅限于开发效率，它的执行效率也是令人称赞的，是一种少有的兼顾开发效率和执行效率的语言，且内存利用率极高。

2. TAO

Rust中的跨平台应用程序窗口创建库，支持所有主要平台，如Windows、macOS、Linux、iOS和Android。

3. WRY

Rust中的跨平台WebView渲染库支持所有主要桌面平台，如Windows、macOS和Linux。

Wry连接每个平台上的web引擎，并提供易于使用和统一的界面来呈现WebView。它还将tao重新导出为事件循环和窗口创建的模块。

二、为什么推荐Tauri

1. 与Electron的技术选型比对

目前跨平台应用程序领域的领导者一直是Electron，它提供了Nodejs的后端和Chromium浏览器的前端，它将会产生一个非常大的可执行文件，这将会消耗大量内存。

Tauri采用不同的方法，它用Rust的后端和Tao、Wry等库来提供轻量级的webview，最终的结果将是更小的包和更小的内存消耗。

2. 包体积大小比对

Tauri 构建的桌面程序太小了，远不是Electron可以相比的，因为它放弃了体积巨大的Chromium内核和nodejs，而是选择了webview和 Rust。

并且在内存使用率上来说，Tauri也是相当小的。

三、如何搭建一个Tauri应用程序

1. 前期环境准备

① 需要安装CLang 和 macOS 开发依赖项
$ xcode-select --install
② 安装 Rust 环境
$ curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

该命令会下载一个脚本并开始安装该rustup工具，该工具会安装最新的稳定版 Rust。如果安装成功，将出现以下行：

$ Rust is installed now. Great!

可以通过查看Rust版本确认是否安装成功：

$ rustc --version

若是已安装过Rust，可使用下面命令升级版本

$ rustup update
③ 安装 Tauri-cli

tauri-cli是开发过程的核心。它运行 Cargo 来编译 Rust 核心，启动前端#开发服务器，在构建生产时捆绑所有assets, sidecars and resources，甚至负责代码签名！

$ cargo install tauri-cli --version "^1.0.0"

查看版本Tauri版本确认是否安装成功

$ cargo tauri --version

2. 创建新项目并启动

① 通过tauri-cli新建项目
$ yarn create tauri-app

📢 此处需要注意 node >= 14

通过tauri-cli新建项目，一步步选择自己喜欢的前端框架来安装项目，安装过程如下图所示：

image.png

此处省略部分包安装过程......（直接看最后安装成功的样子）

image.png

② 启动项目
$ yarn tauri dev

启动项目：首次启动tauri，Rust 包管理器会下载安装好多依赖，可能会比较耗时，第二次之后就会非常快，因为有缓存。

image.png

3. 现有项目中添加Tauri并启动

① 创建一个React项目
$ npm init react-app tauri-react
② 安装 tauri-cli 包作为开发依赖
$ npm install -D @tauri-apps/cli
③ 安装 tauri-api 包安装为依赖项（可选）

该包推荐用于使用 ES 模块或现代构建工具的项目。这是访问 Tauri API 的最安全方式。

$ npm install @tauri-apps/api
④ 初始化项目
$ npm run tauri init

初始化项目会在目录中生成 ./src-tauri

需确认以下配置项 ./src-tauri/tauri.conf.json，devPath是本地项目启动的路径

"build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run start",
    "devPath": "http://localhost:3000", // tauri项目启动本地路径
    "distDir": "../build"
},
⑤ 添加启动命令

首先需要在 package.json 中添加一个自定义脚本

"scripts": {
    "tauri": "tauri"
}
⑥ 启动项目
$ npm run tauri dev

4. 编译打包

$ yarn tauri build

Tauri的打包，与Electron不同，Tauri只能生成当前操作系统对应的程序包。 image.png

5. 项目结构目录

├─ build
├─ node_modules
├─ public
├─ src                    // 写前端代码的地方
   ├─ App.css
   ├─ App.tsx
   ├─ favicon.svg
   ├─ index.css
   ├─ index.tsx
   ├─ logo.svg
   └─ main.tsx
├─ src-tauri             
   ├─ icons           // 应用程序图标
   ├─ src             // 写后端代码的地方
   ├─ target          // 构建后的产物会被放入此文件夹中
   ├─ Cargo.toml      // Tauri (Rust) 项目清单
   ├─ build.rs        // Tauri 构建应用
   └─ tauri.conf.json // 自定义 Tauri 应用程序的配置文件，例如应用程序窗口尺寸，应用名称，权限等
├─ package.json           
├─ tsconfig.json
└─ yarn.lock

也可以通过命令来查看Tauri项目的包安装情况

$ npm run tauri info

image.png

6. tauri.conf.json配置介绍

  • tauri.conf.json 由以下部分组成：
    • build：构建配置
    • package：Package 设置
    • tauri
      • pattern 选择使用模式
      • windows 窗口配置
      • bundle 捆绑器配置
      • security 安全模式
      • updater 更新应用配置，如签名公钥，更新应用的窗口配置等
      • allowlist 白名单配置，如系统文件，路径，脚本，进程等
  • plugins：插件配置
// 示例
{
  "build": {
    "beforeBuildCommand": "yarn build",
    "beforeDevCommand": "yarn start",
    "devPath": "http://localhost:3000",
    "distDir": "../build"
  },
  "package": {
    "productName": "tauri-test-app",
    "version": "0.1.0"
  },
  "tauri": {
    "pattern": {
      "use": "brownfield"
    },
    "allowlist": {
      "all": true
    },
    "bundle": {},
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 900,
        "resizable": true,
        "title": "tauri-test-app",
        "width": 480
      }
    ]
  }
}

源代码地址

image.png

欢迎喜欢钻研技术的小伙伴一起交流！

avatar
文章
阅读
粉丝