tauri桌面应用开发入门

简介

tauri是一款基于web的桌面应用前端框架

因为使用webviews渲染,而不是像electron自带一个浏览器内核,所以打包之后的空间更小,十几mb

前端界面使用web,可以采取流行的框架,入react,vue等

前端后台采用rust,弥补前端无法直接访问操作系统,常用于访问本地文件系统

官方中文文档

运行环境

MSVC

作用 : 在 Windows 平台上为 Rust 和 Tauri 提供编译、链接支持。

安装 : 下载cpp构建工具,安装工作负荷->左面应用与移动应用->使用c++的桌面开发

webview2

作用 : 渲染前端

安装 : 在win10及以上默认安装

rust

作用 : 作为前端的后台,为web前端提供与操作系统交互能力

安装 : 下载64位,然后直接回车

如果下载太慢,在安装包目录打开ps,输入下面指令,使用中科大的源

sh 复制代码

$ENV:RUSTUP_DIST_SERVER='https://mirrors.ustc.edu.cn/rust-static'
$ENV:RUSTUP_UPDATE_ROOT='https://mirrors.ustc.edu.cn/rust-static/rustup'
.\rustup-init.exe

cargo

rust的包管理工具,换中科大源,windows目录%USERPROFILE%\.cargo,新建文件config.toml,输入以下内容

toml 复制代码

[source.crates-io]
replace-with = 'ustc'

[source.ustc]
registry = "sparse+https://mirrors.ustc.edu.cn/crates.io-index/"

nodejs

前端运行环境

安装 : 官方下载链接

第一个工程

vscode里面终端使用的ps,输入下面命令初始化工程

sh 复制代码

irm https://create.tauri.app/ps | iex
cd .\tauri-app\

按提示选择自己需要的配置,生成完成后

其中src就是前端代码,src-tauri是rust后端代码

输入下面,根据package.json安装依赖

sh 复制代码

npm install

运行下面执行,可以得到一个应用界面

如果下载过慢,请换cargo源

sh 复制代码

npm run tauri dev

开发阶段可以

sh 复制代码

npm run dev

打包

sh 复制代码

npm run tauri build

然后就可以在src-tauri/target/release里面得到打包的程序,大约10mb

压缩之后大约3mb

前台

src/目录,可以选自自己常用的前端框架

前端的修改可以实时渲染

调试

应用运行时,可以按f12进行调试,跟浏览器一样

文件操作

使用系统封装好的函数接口

先安装官方插件

sh 复制代码

npm run tauri add fs

然后前端调用

tsx 复制代码

import { writeFile, BaseDirectory } from '@tauri-apps/plugin-fs';

async function greet() {
    setGreetMsg(await invoke("greet", { name }));

    let encoder = new TextEncoder();
    let data = encoder.encode("Hello, world!");
    await writeFile("hello.txt", data, { baseDir: BaseDirectory.Desktop })
  }

在src-tauri/capabilities/defaut.json的permissions中为文件操作的插件添加权限

json 复制代码

"fs:default",
"fs:scope-desktop",
"fs:write-all"

后台

src-tauri/目录,即rust后台,为前端提供访问操作系统资源的能力

一般操作官方都有封装好的插件供前端直接调用,入前面的文件操作

自定义函数

可以看到lib.rs

如下,提供了一个前端可调用的命令greet

封装一个自定义函数需要两步

使用#[tauri::command]暴露接口
在invoke_handler中注册函数

rust 复制代码

#[tauri::command]//宏定义,暴露greet,可通过前端invoke调用
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]//配置移动应用入口点,桌面应用可忽略
pub fn run() {//程序入口点
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])//注册可以被前端调用的函数
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}