Tauri

tauri入門

他是啥

最近很火。定位是用rust編寫的eletron的替代品

windows安裝

安装 Build Tools for Visual Studio 2022
WebView2
Rust 去 https://www.rust-lang.org/tools/install 安装 rustup
安装 Tauri CLI

cargo install tauri-cli --version "^1.0.0"
cargo tauri --help

入門1：啥代碼都不用寫的入門

安裝nodejs
安裝yarn
生成示例程序，并且運行

yarn create tauri-app
$ cd tauri-app
$ yarn install
$ yarn tauri dev

入門2：不需要安裝nodejs的最簡入門

前端

mkdir ui
cd ui
code index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Welcome from Tauri!</h1>
  </body>
</html>

後端

cargo tauri init

Note For Where are your web assets (HTML/CSS/JS) located relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? and What is the URL of your dev server?
Pls input  '../ui'.

cargo tauri dev

加入command處理

main.rs

#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])	//!!!
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

tauri.conf.json

  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "..",
    "distDir": "..",
    "withGlobalTauri": true  //!!!!
  },

index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Welcome from Tauri!</h1>
    <script>
      // access the pre-bundled global API functions
      const invoke = window.__TAURI__.invoke

      // now we can call our Command!
      // Right-click the application background and open the developer tools.
      // You will see "Hello, World!" printed in the console!
      invoke('greet', { name: 'World' })
        // `invoke` returns a Promise
        .then((response) => console.log(response))
    </script>
  </body>
</html>

感受

編譯太他媽慢了，編譯過程生成的中間文件太他媽大了，一共2GB左右

Published on Jul 01, 2022 in categories