好 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)-智慧手表供应链
前情提要 郑列展现了自己的工具力(快速找杂物),但似乎还有别的? 郑列:我看你是完全不懂啊,我还有别...
首先我们会介绍 Director 是如何实作的,并介绍 Director 跟 Open-Match ...
本日来介绍一下 solidity 的控制流程。 学任何语言基本上都需要条件判断式,那就稍微简单介绍一...
Day 8 - Kotlin的回圈(上) Kotlin的回圈我会分两天来讲,今天我们会讲for的部分...
今天我们来看物件导向程序设计的六个原则~ 原则可以把它视为是写程序的一种好习惯~ 那我们来看看这六个...