Tauri项目创建

172 阅读1分钟

Tauri介绍

Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架。开发者们可以集成任何用于创建用户界面的可以被编译成 HTML、JavaScript 和 CSS 的前端框架,同时可以在必要时使用 Rust、Swift 和 Kotlin 等语言编写后端逻辑。

创建项目

执行npm create tauri-app@latest创建一个项目,过程可以选择自己熟悉的技术栈

➜  npm create tauri-app@latest
Need to install the following packages:
create-tauri-app@4.5.9
Ok to proceed? (y) y


> npx
> create-tauri-app

✔ Project name · tauri-test2
✔ Identifier · com.tauri-test2.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · JavaScript

Template created! To get started run:
  cd tauri-test2
  npm install
  npm run tauri android init
  npm run tauri ios init

For Desktop development, run:
  npm run tauri dev

For Android development, run:
  npm run tauri android dev

For iOS development, run:
  npm run tauri ios dev

项目目录结构

image.png

创建好项目后,我们按照后面的命令npm run tauri dev启动下桌面端

image.png

因为Tauri是基于WebView进行渲染的,所以我们在桌面应用上还可以右键打开控制台

image.png

在JS中调用Rust的API

lib.rs中我们看到定义了一个函数,该函数可以被前端调用

image.png

image.png

在js代码中调用Rust函数

image.png

打包项目

npm run tauri build

可以看到文件很小,主要是Tauri利用的是系统的WebView,不像Electron会打包一个浏览器进去。

image.png

参考文档