rust way step 1 - 技术栈

install rust

CARGO_HOME D:\rust\.cargo

RUSTUP_HOME D:\rust\.rustup

[dependencies] ferris-says = "0.2"

vscode 安装rust 插件

rust 复制代码

use ferris_says::say; // from the previous step
use std::io::{stdout, BufWriter};

fn main() {
    let stdout = stdout();
    let message = String::from("Hello fellow Rustaceans!");
    let width = message.chars().count();

    let mut writer = BufWriter::new(stdout.lock());
    say(message.as_bytes(), width, &mut writer).unwrap();
}

###############################

rust cargo镜像配置 config.toml

[source.crates-io]

replace-with = 'ustc'

[source.ustc]

registry = "git://mirrors.ustc.edu.cn/crates.io-index"

cargo install dioxus-cli

dx new

cd my_project

dx serve

realse

cargo build --bin hellui --release

rust 复制代码

use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    rsx! {
        h1 { "Hello, Dioxus 0.5!" }
        h1 { "Hello, Dioxus 0.5!" }
        h1 { "Hello, Dioxus 0.5!" }
        div { "Hello, world!" }
        div { "Hello, world!" }
        div {
            class: "container",
            h1 {
                "标题",
            }
            p {
                style: "color: blue;",
                "这是一行介绍，字体是蓝色的"
            }
            a {
                href: "https://dioxuslabs.com/",
                "一个跳转到 Dioxus 官网的链接"
            }
            ul {
                li { "列表 - 1" }
                li { "列表 - 2" }
                li { "列表 - 3" }
            }
        }
    }
}

rust 复制代码

use dioxus::prelude::*;

fn main() {
    LaunchBuilder::new()
        .with_cfg(
            dioxus::desktop::Config::new().with_custom_index(
                r#"
<!DOCTYPE html>
<html>
  <head>
    <title>Dioxus app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>body { background-color: olive; }</style>
  </head>
  <body>
    <h1>External HTML</h1>
    <div id="main">dfgdfg</div>
  </body>
</html>
        "#
                .into(),
            ),
        )
        .launch(app);
}

fn app() -> Element {
    rsx! {
        h1 { "Custom HTML!" }
    }
}

rust 复制代码

use dioxus::prelude::*;

fn main() {
    launch(app);
}

fn app() -> Element {
    // You can create as many eval instances as you want
    let mut eval = eval(
        r#"
        // You can send messages from JavaScript to Rust with the dioxus.send function
        dioxus.send("Hi from JS!");
        // You can receive messages from Rust to JavaScript with the dioxus.recv function
        let msg = await dioxus.recv();
        console.log(msg);
        "#,
    );

    // You can send messages to JavaScript with the send method
    eval.send("Hi from Rust1!".into()).unwrap();

    let future = use_resource(move || {
        to_owned![eval];
        async move {
            // You can receive any message from JavaScript with the recv method
            eval.recv().await.unwrap()
        }
    });

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

rust 复制代码

use dioxus::prelude::*;

fn main() {
    launch(app);
}


/* 

pub fn app() -> Element {
    rsx! {
        p {
            b { "Dioxus Labs" }
            " An Open Source project dedicated to making Rust UI wonderful."
        }

        button {
            // attributes / listeners
            // children
            "Hello, World!"
        }

        div { "Hello, world!" } 

        p {
            b { "Dioxus Labs" }
            " An Open Source project dedicated to making Rust UI wonderful."
        }
    }
}
*/
/* 
pub fn app() -> Element {
    let mut name = use_signal(|| "bob".to_string());

    rsx! {
        input {
            // we tell the component what to render
            value: "{name}",
            // and what to do when the value changes
            oninput: move |event| name.set(event.value())
        }
    }
}*/


pub fn app() -> Element {
    rsx! {
        form { onsubmit: move |event| { println!("Submitted! {event:?}") },
            input { name: "name" }
            input { name: "age" }
            input { name: "date" }
            input { r#type: "submit" }
        }
    }
}