本文共 1481 字，大约阅读时间需要 4 分钟。

WebAssembly 借助 LLVM 可以支持多种语言混合开发，安全性极高，性能也有所提升。本文使用 WebAssembly 支持最好的语言，也是未来最有潜力的语言，即 Rust 的主流框架 Yew 入门 wasm H5 开发。

Yew 开发类似 Vue、React。本文代码 https://github.com/tothis/rust-record/tree/main/yew

index.html

Cargo.toml

[package]name = "yew-record"version = "0.1.0"authors = ["Li Lei 
   
    "]edition = "2018"[dependencies]yew = "0.18"wasm-bindgen = "0.2"
   

src/main.rs

use wasm_bindgen::JsValue;use yew::{Component, ComponentLink, Html, html, ShouldRender};use yew::web_sys::console::log_1;enum Action {    AddOne,}struct Model {    link: ComponentLink
   
    ,    value: i64,}impl Component for Model {    type Message = Action;    type Properties = ();    fn create(_props: Self::Properties, link: ComponentLink
    
     ) -> Self {        Self {            link,            value: 0,        }    }    fn update(&mut self, m: Self::Message) -> ShouldRender {        match m {            Action::AddOne => {                self.value += 1;                log_1(&JsValue::from_str(&self.value.to_string()));                // 重新渲染组件                true            }        }    }    fn change(&mut self, _props: Self::Properties) -> ShouldRender {        false    }    fn view(&self) -> Html {        html! {            <>                
     { "+1" }                
     
{ self.value }
                    }    }}fn main() {    yew::start_app::
     
      ();}
     
    
   

启动

cargo install wasm-bindgen# 使用 trunk# 安装cargo install trunk wasm-bindgen-cli# 启动trunk serve

转载地址：http://ufwci.baihongyu.com/