Yew框架入门教程：构建Rust WebAssembly前端应用

莫皎奕

于 2025-06-01 09:00:33 发布

阅读量402

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_01058/article/details/148359833

Yew框架入门教程：构建Rust WebAssembly前端应用

yew Rust / Wasm framework for creating reliable and efficient web applications 项目地址: https://gitcode.com/gh_mirrors/ye/yew

前言

Yew是一个基于Rust语言的现代化前端框架，它利用WebAssembly技术让开发者能够使用Rust构建高性能的Web应用程序。本教程将带领你从零开始，使用Yew框架构建一个简单的视频列表应用，涵盖从环境搭建到组件开发、状态管理等核心概念。

环境准备

必备工具

在开始之前，请确保你的开发环境满足以下要求：

安装最新版本的Rust工具链
安装Trunk构建工具
添加WASM编译目标

rustup update
cargo install trunk
rustup target add wasm32-unknown-unknown

项目初始化

创建一个新的Rust项目并进入项目目录：

cargo new yew-video-app
cd yew-video-app

第一个Yew应用

基础配置

修改Cargo.toml文件，添加Yew依赖：

[dependencies]
yew = { version = "0.20", features = ["csr"] }

创建主应用组件

在src/main.rs中创建基础应用结构：

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Hello Yew!" }</h1>
    }
}

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

启动开发服务器

创建基本的index.html文件后，使用Trunk启动开发服务器：

trunk serve --open

构建UI界面

HTML结构转换

Yew使用html!宏来构建UI，其语法类似于JSX但有一些区别：

表达式必须用{}包裹
必须有单个根节点
元素必须正确闭合

html! {
    <>
        <h1>{ "RustConf Explorer" }</h1>
        <div>
            <h3>{"视频列表"}</h3>
            <p>{ "演讲者: 演讲标题" }</p>
        </div>
    </>
}

使用Rust数据结构

定义视频数据结构并在组件中使用：

#[derive(Clone, PartialEq)]
struct Video {
    id: usize,
    title: String,
    speaker: String,
    url: String,
}

let videos = vec![
    Video {
        id: 1,
        title: "构建与破坏".to_string(),
        speaker: "张三".to_string(),
        url: "#".to_string(),
    },
    // 更多视频...
];

组件化开发

创建可重用组件

将视频列表提取为独立组件：

#[derive(Properties, PartialEq)]
struct VideosListProps {
    videos: Vec<Video>,
    on_click: Callback<Video>
}

#[function_component(VideosList)]
fn videos_list(props: &VideosListProps) -> Html {
    let on_click = props.on_click.clone();
    
    props.videos.iter().map(|video| {
        let on_video_select = {
            let on_click = on_click.clone();
            let video = video.clone();
            Callback::from(move |_| {
                on_click.emit(video.clone())
            })
        };

        html! {
            <p key={video.id} onclick={on_video_select}>
                {format!("{}: {}", video.speaker, video.title)}
            </p>
        }
    }).collect()
}

状态管理

使用Yew的钩子管理应用状态：

let selected_video = use_state(|| None);

let on_video_select = {
    let selected_video = selected_video.clone();
    Callback::from(move |video: Video| {
        selected_video.set(Some(video))
    })
};

数据获取

添加必要依赖

[dependencies]
gloo-net = "0.6"
serde = { version = "1.0", features = ["derive"] }
wasm-bindgen-futures = "0.4"

实现API请求

修改Video结构并实现数据获取：

#[derive(Clone, PartialEq, Deserialize)]
struct Video {
    id: usize,
    title: String,
    speaker: String,
    url: String,
}

let videos = use_state(|| vec![]);
{
    let videos = videos.clone();
    use_effect_with((), move |_| {
        let videos = videos.clone();
        wasm_bindgen_futures::spawn_local(async move {
            let fetched_videos: Vec<Video> = Request::get("/api/videos")
                .send()
                .await
                .unwrap()
                .json()
                .await
                .unwrap();
            videos.set(fetched_videos);
        });
        || ()
    });
}