搜索
  • 在Rust中使用如何Yew创建一个web应用
  • 发布于 2个月前
  • 413 热度
    0 评论
  • 余归
  • 0 粉丝 30 篇博客
  •   
到目前为止，我们一直专注于在浏览器或其他环境中嵌入基于rust的wasm模块(使用wasmtime)。在本文中，我们将完全在Rust中使用Yew创建一个web应用程序。

创建一个yew应用程序
让我们首先创建一个基本的rust项目：
cargo new yew-demo
在Cargo.toml文件中加入yew库并启用CSR特性：
[dependencies]
yew = { version = "0.20.0", features = ["csr"] }
接下来，让我们创建src/lib.rs文件，然后创建一个空的HTML组件，它将被我们的应用程序渲染：
use yew::prelude::*;

#[function_component]
fn App() -> Html {
    html! {        
    }
}
最后，让我们修改main.rs来渲染应用程序：
use yew_demo::App;

fn main() {
    yew::Renderer::<App>::new().render(); 
}

使用trunk托管我们的应用程序
为了在浏览器中查看我们的应用，让我们首先在项目根中创建一个index.html：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Yew App</title>
    </head>
</html>
接下来，让我们安装trunk，一个用于Rust的WASM web应用程序捆绑器。
cargo install --locked trunk
cargo install --locked wasm-bindgen-cli
最后，让我们启动应用程序：
trunk serve
这将构建我们的应用程序，并可以访问http://127.0.0.1:8080/。现在，我们在浏览器中运行了一个用Rust编写的web应用程序！

添加内容
我们当前的应用程序呈现一个空页面，让我们尝试添加一些内容。
在App组件中进行更新，修改lib.rs文件如下：
use yew::prelude::*;

#[function_component]
pub fn App() -> Html {
    html! {  
        { "Hello World" }      
    }
}
如果你用过React，你一定熟悉React钩子，比如useState，它可以更容易地向web应用添加状态更新。类似地，我们可以像这样在我们的Yew app中添加一个状态：
use yew::prelude::*;

#[function_component]
pub fn App() -> Html {
    let counter = use_state(|| 0);

    html! {
        <div>
            { "Hello World" }
            <p>{ *counter }</p>
        </div>
    }
}
但是，计数器的值目前保持在0。让我们添加一个按钮和一个处理程序来更新它：
use yew::prelude::*;

#[function_component]
pub fn App() -> Html {
    let counter = use_state(|| 0);

    let onclick = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    html! {
        <div>
            { "Hello World" }
            <p>{ *counter }</p>
            <button {onclick}>{ "+1" }</button>
        </div>
    }
}
现在，如果运行应用程序，应该能够使用按钮增加计数器的值。

构建web应用
最后，我们可以使用trunk来构建我们的web应用程序：
trunk build
这将创建一个dist文件夹，可以由我们的生产服务器提供web服务！
用户评论
可能感兴趣的话题