tauri简介
tauri 是一个新兴的跨平台GUI框架。与electron的基本思想相似，tauri的前端实现也是基于html系列语言。tauri的后端使用rust。官方形容，tauri可以创建体积更小、运行更快、更加安全的跨平台桌面应用。
详细的介绍可以自行去官网查看：
官网
Github
hello world
本人使用windows10系统。本hello world，实现了以tauri搭建桌面程序，在html页面点击按键后，由后台rust反馈信息。
效果如下：
hello world 效果图
需准备的文件
tauri 需要用到rust、nodejs，编译器可使用vscode
官方文档有比较详细的环境搭建步骤，可参阅：
https://tauri.studio/docs/getting-started/intro
其中，当搭建完环境，使用命令
yarn add tauri
安装tauri包时，可能会出现报错：
pngquant failed to build, make sure that libpng-dev is installed
此错误并不影响使用，可忽略。
程序结构
程序结构图
初始化完成的tauri程序结构如上图所示。默认情况下dist菜单用于存放实际的页面文件。具体可在tauri.conf.json文件中进行设置。
具体实现步骤如下：
在dist目录创建index.html页面，必须命名为index.html。页面实现功能为一个简单的按钮，点击后向rust后台发送信息，接收返回并显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello from rust</title>
</head>
<body>
<input type="button" value="说hello" onclick="hello()"/>
<div id="result" style="width: 200px;height: 10px;"></div>
</body>
<script>
const TAURI=window.__TAURI__;
function hello() {
TAURI.promisified({
cmd:"hello",
name:encodeURI("小强")
}).then((res)=>{
document.querySelector("#result").innerHTML=decodeURI(res);
})
}
</script>
</html>
在
cmd.rs文件中，维护与前台cmd:"hello"对应的hello枚举(enum)项。hello自身需要一个name作为参数，另外，使用tauri框架的execute_promise()时，还需要callback和error两个参数。
cmd.rs的具体内容如下：
use serde::Deserialize;
#[derive(Deserialize)]
#[serde(tag = "cmd", rename_all = "camelCase")]
pub enum Cmd {
hello{name:String,callback:String,error:String}
}
在
main.rs中，进行绑定hello枚举项：
#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]
mod cmd;
// use percent_encoding::{utf8_percent_encode, NON_ALPHANUMERIC};
fn main() {
tauri::AppBuilder::new()
.invoke_handler(|_webview, arg| {
use cmd::Cmd::*;
match serde_json::from_str(arg) {
Err(e) => {
Err(e.to_string())
}
Ok(command) => {
match command {
//绑定前台cmd键对应的枚举项
hello{name,callback,error}=>{
tauri::execute_promise(
_webview,
move || {
Ok(format!("hi {}.",name).to_string())
},
callback,
error,
)
}
}
Ok(())
}
}
})
.build()
.run();
}
运行
yarn tauri build --release命令，或npm对应的命令，生成程序。可在
src-tauri>target>release目录下，找到生成的程序。
网友评论