Tauri demo

cargo install create-tauri-app --locked
cargo create-tauri-app

创建前端
mkdir ui
新建一个 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文档</title>
</head>
<body>
<h1>这是来自 Tauri 的欢迎!</h1>
</body>
</html>

创建 Rust 项目
cargo install tauri-cli
#如果失败请用cargo install tauri-cli --locked
#默认情况下,包自带的 Cargo.lock 文件会被忽略,这意味着 Cargo 会重新计算使用依赖的版本,很有可能使用到比发布该包时更新的依赖版本。
#可以使用 --locked 标志来强制要求 Cargo 使用包自带的 Cargo.lock (如果可行的话)。
cargo tauri init
tauri init命令将生成src-tauri文件夹。传统上,Tauri应用会将其核心相关的文件放置于此文件夹中。
src-tauri/src/main.rs
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
tauri::Builder::default()
   .run(tauri::generate_context!())
   .expect("error while running tauri application");
}

运行dev构建
cargo tauri dev --debug
运行release构建
cargo tauri dev --release
运行release构建+生成exe安装包
cargo tauri build

32位:
cargo tauri dev --target i686-pc-windows-msvc
cargo tauri dev --release --target i686-pc-windows-msvc

调用指令
Tauri 为您的前端开发提供了其他系统原生功能。 
我们将其称作指令,这使得您可以从 JavaScript 前端调用由 Rust 编写的函数。
src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

一个指令等于一个普通的Rust函数,只是还加上了#[tauri::command]宏来让其与您的JavaScript环境交互。

最后,我们需要让 Tauri 知悉您刚创建的指令才能让其调用。 
我们需要使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册指令:
src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}
现在您的前端可以调用刚注册的指令了!

我们通常会推荐使用 @tauri-apps/api 包,但由于本指南至此还没有使用打包工具,
所以您需要在 tauri.conf.json 文件中启用 withGlobalTauri 选项。
tauri.conf.json
{
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../ui",
    "distDir": "../ui",
    "withGlobalTauri": true
},
此选项会将已打包版本的 API 函数注入到您的前端中。

您现在可以修改您的 index.html 文件来调用您的指令:
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 </head>
 <body>
 <h1 id="header">Welcome from Tauri!</h1>
 <script>
 // access the pre-bundled global API functions
 const { invoke } = window.__TAURI__.tauri

 // now we can call our Command!
 // You will see "Welcome from Tauri" replaced
 // by "Hello, World!"!
 invoke('greet', { name: 'World' })
 // `invoke` returns a Promise
 .then((response) => {
 window.header.innerHTML = response
 })
 </script>
 </body>
</html>

.vscode/launch.json:
{
  // 使用 IntellliSense 来了解可能的属性。
  // 悬停以查看现有属性的描述。
  // 更多详情访问:https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "lldb",
      "request": "launch",
      "name": "Tauri Development Debug",
      "cargo": {
        "args": [
          "build",
          "--manifest-path=./src-tauri/Cargo.toml",
          "--no-default-features"
        ]
      },
      // task for the `beforeDevCommand` if used, must be configured in `.vscode/tasks.json`
      //"preLaunchTask": "ui:build"
    },
    {
      "type": "lldb",
      "request": "launch",
      "name": "Tauri Production Debug",
      "cargo": {
        "args": ["build", "--release", "--manifest-path=./src-tauri/Cargo.toml"]
      },
      // task for the `beforeBuildCommand` if used, must be configured in `.vscode/tasks.json`
      //"preLaunchTask": "ui:build"
    }
  ]
}

支持前端资源Hot Reload热重载:
{
  "build": {
    "devPath": "http://localhost:8080",
  }
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

1 × 1 =