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();
}