Dioxus框架中桌面应用（Desktop）

桌面应用

本指南将涵盖特定于Dioxus桌面渲染器的概念。

使用Dioxus桌面构建的应用程序使用系统WebView来渲染页面。这使得应用程序的最终大小远小于其他WebView渲染器（通常小于5MB）。

尽管桌面应用在WebView中渲染，但你的Rust代码是原生运行的。这意味着浏览器API是不可用的，所以渲染WebGL、Canvas等并不像在Web上那么容易。然而，原生系统API是可用的，所以流媒体、WebSockets、文件系统等都可以通过系统API轻松访问。

Dioxus桌面是基于Tauri构建的。目前，Dioxus在菜单栏、事件处理等方面提供的抽象有限。在某些地方，你可能需要直接使用Tauri——通过Wry和Tao。

将来，我们计划迁移到一个基于自定义Web渲染器的DOM渲染器，并集成WGPU（Blitz）。

示例

• 文件浏览器
• Tailwind应用

运行JavaScript

Dioxus在浏览器API上提供了一些符合人体工程学的包装器，但在某些情况下，你可能需要访问Dioxus没有暴露的浏览器API的部分。

对于这些情况，Dioxus桌面暴露了use_eval钩子，允许你在WebView中运行原始JavaScript：

use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    // 你可以创建任意多的eval实例
    let mut eval = eval(
        r#"
        // 你可以使用dioxus.send函数从JavaScript向Rust发送消息
        dioxus.send("Hi from JS!");
        // 你可以使用dioxus.recv函数从Rust向JavaScript接收消息
        let msg = await dioxus.recv();
        console.log(msg);
        "#,
    );

    // 你可以使用send方法向JavaScript发送消息
    eval.send("Hi from Rust!".into()).unwrap();

    let future = use_resource(move || {
        to_owned![eval];
        async move {
            // 你可以使用recv方法从JavaScript接收任何消息
            eval.recv().await.unwrap()
        }
    });

    match future.read_unchecked().as_ref() {
        Some(v) => rsx! { p { "{v}" } },
        _ => rsx! { p { "hello" } },
    }
}

自定义资源

你可以在Dioxus桌面中链接到本地资源，而不是使用URL：

use dioxus::prelude::*;
use manganis::mg;

fn main() {
    launch(app);
}

fn app() -> Element {
    rsx! {
        div { img { src: mg!(file("public/static/scanner.png")) } }
    }
}

你可以在资源参考中阅读更多关于资源的信息。

与Wry集成

在需要对窗口进行更底层控制的情况下，你可以使用通过桌面配置和use_window钩子暴露的wry API。