iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Software Development

Rust的多方面運用系列 第 15

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


上一篇
[Day14] 引入 crate
下一篇
[Day16] trunk 以及 Counter 範例解說 (Yew wasm)
系列文
Rust的多方面運用30

2 則留言

1
微中子
iT邦新手 4 級 ‧ 2021-09-19 05:31:04

加油

淺羽 iT邦新手 5 級 ‧ 2021-09-19 16:09:20 檢舉

感謝鼓勵
我會盡量讓自己能夠完賽的 owob

1
DanSnow
iT邦研究生 5 級 ‧ 2021-09-19 17:34:44

加油

淺羽 iT邦新手 5 級 ‧ 2021-09-19 18:00:13 檢舉

大佬等級的 <(_ _)>
真的感謝當初的系列文讓我學習 Rust

DanSnow iT邦研究生 5 級 ‧ 2021-09-19 23:12:05 檢舉

當初也只是接觸 Rust 一段時間後把所學到的紀錄下來而已,我平常沒什麼寫文章的習慣,剛好找到理由來寫

淺羽 iT邦新手 5 級 ‧ 2021-09-20 00:46:05 檢舉

這次也剛好讓我再熟悉一些基礎 總結來說真的學到很多

我要留言

立即登入留言