Tauri入门:js+rust 快速构建web app

什么是Tauri

Tauri 是一个为所有主要桌面平台构建微小、速度极快的二进制文件的框架。开发人员可以集成任何可编译为 HTML、JS 和 CSS 的前端框架来构建用户界面。应用程序的后端是一个 Rust 源二进制文件，具有前端可以与之交互的 API。

Tauri 应用程序中的用户界面目前使用 tao作为macOS、Windows、Linux、Android 和 iOS 上的窗口处理库。为了渲染您的应用程序，Tauri 使WRY，这是一个为系统 Web 视图提供统一接口的库，利用 macOS 和 iOS 上的 WKWebView、Windows 上的 WebView2、Linux 上的 WebKitGTK和 Android 上的 Android System WebView。

(译自Tauri github readme)

electron？

与electron不同，Tauri在不同平台上调用平台自身的前端库，而不是封装一个chromium内核(众所周知electron是这么干的)。这使得Tauri-app的安装包体积比electron-app小的多，同时得益于rust后端(可选，也可以使用js/ts后端)，性能上也强于electron。
当然，作为electron的替代品，它还有很长的路要走。比如，部分开发者反映Tauri的跨平台兼容性没有electron那么好，同时作为新兴框架不可避免的会存在稳定性的短板，这是任何一个框架发展初期都在所难免的，但总体而言，Tauri对比electron优势还是相当明显的，未来可期！

快速上手

创建Tauri-app项目

多种创建方式

Tauri为不同平台提供了多种创建项目的方式。

1. bash :

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

2. Powershell :

irm https://create.tauri.app/ps | iex

3. cargo :

cargo install create-tauri-app --locked
cargo create-tauri-app

4. npm :

npm create tauri-app@latest

5. yarn :

yarn create tauri-app

6. pnpm :

pnpm create tauri-app

初始化工程

虽然创建方式有很多，但初始化的过程大体是相同的。
我们这里以linux平台的npm为例：

提示需要安装create-tauri-app包，输y或者直接回车。
等待create-tauri-app包安装完成…

按提示依次输入

1. 项目名
2. 后端语言(这里我们使用js)
3. 包管理器(这里我们使用npm)
4. 前端框架(这里我们使用react)
5. UI flaver(js或ts，这里我们选择js)

(这些选项都可以根据你的喜好调整，只要你知道自己在干什么 😃)

然后根据提示，我们cd到工程目录，运行npm install以安装依赖包。
稍作等待(可能会有点久)，依赖安装完成后，我们执行

npm run tauri dev

等待编译完成。
然后我们就得到了一个tauri-app的demo。

我们到工程的src-tauri下修改一下tauri.conf.json的identifier项（默认值不能用于打包），比如我们改为com.my.calculator。
执行

npm run tauri build

经过编译，我们就得到了这个demo的安装包。

执行打包后的AppImage文件正常打开demo，打包成功！

工程结构

project
	-> dist/					
	-> node_module/				npm管理的包
	-> package-lock.json
	-> README.md
	-> src-tauri/
	-> index.html
	-> package.json
	-> public/
	-> src/
	-> vite.config.js

这样初始化就完成了，之后根据需要进行逻辑实现即可。