[Day15] Wasm 簡介跟 Yew 環境介紹 && 配置

2021 iThome 鐵人賽

DAY 15

Software Development

Rust的多方面運用系列第 15 篇

13th鐵人賽

淺羽

2021-09-19 02:30:08

1076 瀏覽

分享至

好 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 之類的啟動
那明天我會講另一個好用的套件
今天先到這邊各位晚安