Rust原生级跨平台GUI开发Tauri

文摘   2024-08-16 10:36   湖北  

点击上方蓝字 江湖评谈设为关注/星标




前言

Rust的GUI开发Tauri,非常简单,本篇看下。

Tauri

构建Tauri:

#cargo install create-tauri-app --locked#cargo create-tauri-app#cd tauri-app#cargo tauri dev

以上四句简单的构建了一个tauri GUI 程序,运行结果如下:

Tauri实际上是通过Rust代码操控前端的html/css这些代码,当然它实际上还可以操控Next.js,Qwik,Vite等等。

进入到以下目录:

#cd src#lsassets  index.html  main.js  styles.css

index.html里面可以直接修改Tauri的GUI

<!doctype html><html lang="en"> <head>    <meta charset="UTF-8" />    <link rel="stylesheet" href="styles.css" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Tauri App</title>    <script type="module" src="/main.js" defer></script>  </head>  <body>    <div class="container">      <h1>Welcome to Tauri!</h1>      <div class="row">        <a href="https://tauri.app" target="_blank">          <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" />        </a>        <a          href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"          target="_blank"        >          <img            src="/assets/javascript.svg"             class="logo vanilla"            alt="JavaScript logo"          />        </a>      </div>      <p>Welcome to Rust World</p>      <form class="row" id="greet-form">        <input id="greet-input" placeholder="Enter a name..." />        <button type="submit">Greet</button>      </form>      <p id="greet-msg"></p>    </div>  </body></html>

比如以上把Click on the Tauri logo to lean more about the framework修改为welcome to Rust World,程序不用关闭,它自动更改

往期精彩回顾

Rust语法简析

Rust编译器研究+.NET9 PreView7


江湖评谈
记录,分享,自由。
 最新文章