Tauri开发一:Tauri开发工具介绍

2,071 阅读5分钟

系列文章: [Tauri开发二: 调用后端Rust接口](Tauri开发二: 调用后端Rust接口 )

Tauri开发一: Tauri开发工具介绍

1. Tauri介绍

Tauri是一款使用Rust作为后端开发桌面应用的框架,具有如下优势:

  • 天生继承Rust的安全性
  • WEB通用的开发技术,支持多个前端框架的开发: SvelteKit Next.js 以及原生的javascript/HTML/CSS

Tauri的架构: Image

  • 前端主要包括@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工程的代码目录结构: Image

  • 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的编译工具 Image

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
Updating sjtu index

运行命令cargo install tauri-cli 来安装工具

3.2 创建项目

3.2.1 创建前端项目

3.2.1.1 创建项目

运行命令行npm create svelte@latest会创建一个svelte的项目目录
目录结构
Image
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相应的参数见下图: Image

3.3 运行项目

3.3.1 调试项目

运行命令行cargo tauri dev Image

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

需要根据自己的用户名变更位置 Image

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

需要根据自己的用户名变更位置

Image