Dioxus框架中Web平台支持的参考文档

Web平台支持

要在Web上运行，你的应用必须被编译为WebAssembly，并且依赖于dioxus和dioxus-web这两个包。

为Web构建的Dioxus体积大致相当于React构建的大小（70kb对比65kb），但由于WebAssembly可以在流式传输时进行编译，因此它的加载速度会更快。

示例：

• TodoMVC
• Tailwind应用

注意：由于Wasm的限制，不是每个包都能在你的Web应用中工作，因此你需要确保你的包能在没有本地系统调用（计时器、IO等）的情况下工作。

支持

Web是Dioxus支持得最好的目标平台。

• 因为你的应用将被编译为WASM，所以你可以通过wasm-bindgen访问浏览器API。
• Dioxus提供了水合功能，可以恢复在服务器上渲染的应用。更多信息请参见全栈参考文档。

运行JavaScript

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

对于这些情况，Dioxus Web暴露了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" } },
    }
}

如果你只针对Web平台，但不打算针对任何其他Dioxus渲染器，你也可以使用web-sys和gloo包中生成的包装器。

自定义索引模板

Dioxus支持提供自定义的index.html模板。index.html必须包含一个id为main的div。热重载仍然被支持。PWA示例中提供了一个示例。