系列文章: [Tauri开发二: 调用后端Rust接口](Tauri开发二: 调用后端Rust接口 )
Tauri开发一: Tauri开发工具介绍
1. Tauri介绍
Tauri是一款使用Rust作为后端开发桌面应用的框架,具有如下优势:
- 天生继承Rust的安全性
- WEB通用的开发技术,支持多个前端框架的开发: SvelteKit Next.js 以及原生的javascript/HTML/CSS
Tauri的架构:
- 前端主要包括
@tauri-apps/api, 该包主要实现实现对后端Rust代码的调用 - 后端主要为
tauri,一个使用rust编写的crate,封装了:- 系统调用
- 窗口的管理
@tauri-apps/api文档地址: www.npmjs.com/package/@ta…
tauri文档地址: docs.rs/tauri/lates…
2. Tauri开发工具介绍
Tauri开发工具初始接触的时候,会有点混乱,原因是因为Tauri的前端代码 和 后端代码是在一个目录下面,所以工具有混用的情况。
我们先看一个Tauri工程的代码目录结构:
src目录即为前端代码的位置,相应的前端代码对应的package.json也位于根目录src-tauri目录即为后端Rust代码的目录,里面有Rust的配置文件Cargo.toml
2.1 前端管理工具
前端管理工具为NPM,必须的依赖是@tauri-apps/api,如果凶狠一点,后面完全可以使用原生JavaScript 和 HTML/CSS开发,但是我们一般会选用一个框架进行开发,此时根据前端来选择其他的依赖
安装
@tauri-apps/api可能需要安装Visual Studio 2019, 安装Visual Studio 2022可能会报错
2.2 后端管理工具
后端的管理工具为Cargo, Rust自带的包管理工具。此时我们可会手工安装tauri crate进行开发
但是为了方便开发,Tauri开发组发布了一个二进制工具 tauri-cli, 用来简化Tauri的开发流程:
cargo tauri init用来创建项目cargo tauri dev用来启动测试服务器 因此tauri-cli才是我们用来管理Tauri工程的工具,NPM处于辅助的位置
2.3 tauri-cli的安装/使用方式
tauri-cli有两种安装方式:
- 使用 cargo: 原生安装, 安装和更新的方式为
cargo install tauri-cli - 使用 NPM: npm的安装包为对二进制的包装, 安装方式为
npm install --save-dev @tauri-apps/cli, 此时需要在package.json里面增加设置: "scripts": { "tauri": "tauri" }
相应的的使用方式也有两种:
- 使用cargo安装时,调用的方式为
cargo tauri xxx - 使用NPM安装时,调用的方式为
npm run tauri xxx
3. Tauri开发流程--Hello World
开发工具我们了解清楚了,我们开始创建一个Hello World来实践一下
我们选择使用SvelteKit作为前端框架
3.1 工具安装
3.1.1 安装NPM
到Nodejs页面,下载nodejs的安装包: nodejs.org/en/download 安装完成以后,NPM工具也就安装好了
3.1.2 安装cargo
到rustup页面,下载rustup:www.rust-lang.org/tools/insta… rustup是Rust和cargo的安装工具,安装完成以后,cargo工具也就安装好了
过程中会安装Visual Studio 2022,主要用来作为Rust的编译工具
3.1.3 安装tauri-cli
鉴于国内的cargo下载网速较慢,建议使用镜像,在用户目录(C:\Users\xxxx)下有个.cargo文件夹,在里面创建一个config文件(不带.txt后缀),里面内容如下:
[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'sjtu'
[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index"
初始update镜像的时候,会有点慢,请耐心等待
C:\Users\danny>cargo install tauri-cli
Updatingsjtuindex
运行命令cargo install tauri-cli 来安装工具
3.2 创建项目
3.2.1 创建前端项目
3.2.1.1 创建项目
运行命令行npm create svelte@latest会创建一个svelte的项目目录
目录结构
svelte需要vitepackage, 因此我们需要运行npm install vite来安装相应的包
3.2.1.2 修改为SSG模式
svelte需要使用SSG模式下
运行命令 npm install --save-dev @sveltejs/adapter-static@next
同时更新文件svelte.config.js, 将import adapter from '@sveltejs/adapter-auto'更新为import adapter from '@sveltejs/adapter-static'
更新后的svelte.config.js为:
import adapter from '@sveltejs/adapter-static' // This was changed from adapter-auto
import preprocess from 'svelte-preprocess'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
adapter: adapter(),
},
}
export default config
同时需要创建一个文件src/routes/+layout.ts
注意文件的名字里面带个加号 文件内容:
export const prerender = true
export const ssr = false
3.2.2 创建后端项目
运行命令 cargo tauri init
创建项目过程中会输入相应的参数,不同的前端框架使用的地址和文件路径不同,详细参考:tauri.app/v1/guides/g…
我们使用的svelte相应的参数见下图:
3.3 运行项目
3.3.1 调试项目
运行命令行cargo tauri dev
3.3.2 查看项目信息
运行命令行cargo tauri info可以查看项目所有的信息
PS C:\Users\danny\programming\learning_tauri> cargo tauri info
[✔] Environment
- OS: Windows 10.0.19045 X64
✔ WebView2: 114.0.1823.82
✔ MSVC: Visual Studio Community 2022
✔ rustc: 1.71.0 (8ede3aae2 2023-07-12)
✔ Cargo: 1.71.0 (cfd3bbd8f 2023-06-08)
✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
✔ Rust toolchain: stable-x86_64-pc-windows-msvc (environment override by RUSTUP_TOOLCHAIN)
- node: 18.16.1
- npm: 9.5.1
[-] Packages
- tauri [RUST]: 1.4.1
- tauri-build [RUST]: 1.4.0
- wry [RUST]: 0.24.3
- tao [RUST]: 0.16.2
- @tauri-apps/api [NPM]: not installed!
- @tauri-apps/cli [NPM]: 1.4.0
[-] App
- build-type: bundle
- CSP: unset
- distDir: ../build
- devPath: http://localhost:5173/
- framework: Svelte
- bundler: Vite
此时
distDir: ../build还没有创建,在创建安装包的时候才会生成
3.4 创建安装文件
运行命令cargo tauri build会创建一个Windows的安装文件
生成的安装包在:src-tauri\target\release\bundle\msi\
3.4.1 Wixtool下载问题处理
编译过程中,会有从github下载失败的情况:
Error failed to bundle project: https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip: Network Error: Network Error:
此时需要下载: wix311 , 然后解压到C:\Users\dassi\AppData\Local\tauri\WixTools
需要根据自己的用户名变更位置
3.4.2 nsis下载问题处理
编译过程中,会有从github下载失败的情况:
Error failed to bundle project: https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip: Network Error: Network Error: Error encountered in the status line:
此时需要下载: NSIS, 然后解压到C:\Users\dassi\AppData\Local\tauri\NSIS
需要根据自己的用户名变更位置