[Day15] Wasm 简介跟 Yew 环境介绍 && 配置

好 ok 终於进入专案篇了,希望我的文多一点人看,这样也比较有动力写
虽然我写得很烂
那事不宜迟,让我们开始吧!


我先讲介绍的形式好了,专案篇介绍形式会先从:
怎麽安装 -> Example -> 实际撰写
来讲解,那基本上一个套件的篇幅大概在4~7天为主
那今天要讲什麽呢,提到 Rust 其中一项很有名的就是 WASM
WASM 是 WebAssembly 的缩写

主要用在网页上,目前大多浏览器上都有支援了。
基本上可以视为跟 Javascript 类似的东西
只是差别在他的速度更快,那这是最主要的差别,更多资讯可以 Google 只不过这绝对不是拿来代替 Javascript 的。

那麽安装就照昨天所讲的
cargo add 去做套用

$ cargo add yew
$ cargo add wasm-bindgen

那这样就安装好了,然後先来个范例程序码

use wasm_bindgen::prelude::*;
use yew::prelude::*;

struct Model {
    link: ComponentLink<Self>,
    value: i64,
}

enum Msg {
    AddOne,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
            value: 0,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::AddOne => self.value += 1
        }
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        // 如果有新的不同属性,应该只能回传 true
        // 若是这个元件没有任何属性,那就可以只回传 false
        false
    }

    fn view(&self) -> Html {
        html! {
            <div>
                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}

这是官方的范例,但是他是使用 lib.rs 的形式,正常来说还是会用执行档
那要怎麽变执行档的形式呢

fn main() {
    yew::start_app::<Model>();
}

main function 改成上面所写即可
那来讲讲上面的是什麽吧
上面的 Model 会显示出一个按钮,当按下按钮时会将状态更新
也就是 value += 1
在上面的 update function 可以看到
他就是以 enum 去实现他的操作
create function 则是初始化其值
change function 在这边是没有更动的,後面要介绍的也不会使用到,让我暂时略过
最後就是 view 也就是显示
需要注意的是

可能有些人跟我一样用 IDEA 会发现他下面有红底线,但是不用管他,是可以正常执行的
我们来整理一下上面讲的东西

create update view
初始化其值 对资料进行更新 对资料的显示部份

那当要执行的时候
要先安装 wasm-pack

$ cargo install wasm-pack

这样安装,跑完後先创建一个存放的资料夹 owo
新增 index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Yew</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body></body>
</html>

terminal 输入 wasm-pack build --target web --out-name wasm --out-dir ./owo
然後去那个资料夹用你习惯的网页server Ex python 之类的启动
那明天我会讲另一个好用的套件
今天先到这边 各位晚安


<<:  D18-(9/18)-光磊(2340)-智慧手表供应链

>>:  [DAY-05] 开始减少控制 删除休假规定

追求JS小姊姊系列 Day7 -- 郑列展现的工具力(中)

前情提要 郑列展现了自己的工具力(快速找杂物),但似乎还有别的? 郑列:我看你是完全不懂啊,我还有别...

Day6 Director & Match Function

首先我们会介绍 Director 是如何实作的,并介绍 Director 跟 Open-Match ...

[区块链&DAPP介绍 Day9] Solidity 教学 - control flow

本日来介绍一下 solidity 的控制流程。 学任何语言基本上都需要条件判断式,那就稍微简单介绍一...

Day 8 - Kotlin的回圈(上)

Day 8 - Kotlin的回圈(上) Kotlin的回圈我会分两天来讲,今天我们会讲for的部分...

【C#】物件导向的六个原则

今天我们来看物件导向程序设计的六个原则~ 原则可以把它视为是写程序的一种好习惯~ 那我们来看看这六个...