maomi
介绍
入门
文档

编写一个组件

在 Cargo.toml 中添加依赖

maomi 依赖 rust 1.65 或更高版本。在 Cargo.toml 中添加 maomi 依赖项:

[package]
name = "my-website"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
maomi = "0.4"
maomi-dom = "0.4"

在实际环境中,还需要一些其他 crate :

[dependencies]
maomi = "0.4"
maomi-dom = "0.4"
wasm-bindgen = "0.2"
log = "0.4"
console_log = "0.2"
console_error_panic_hook = "0.1"

#[component] struct 结构

页面由组件构成。要使用 maomi 生成页面,首先应编写一个组件。

组件是一个标有 #[component] 的结构:

use wasm_bindgen::prelude::*;
use maomi::prelude::*;
use maomi_dom::{prelude::*, element::*};
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> "My Website" </div>
}
}

struct 中必须包含一个 template! 字段,用于包含这个组件的模板。

实现 Component trait

组件必须实现 Component trait :

impl Component for MyWebsite {
fn new() -> Self {
Self {
template: Default::default(),
}
}
}

将组件放入页面主体

这样,组件就可以放入页面主体中。

#[wasm_bindgen(start)]
pub fn wasm_main() {
// 激活 console 日志
console_error_panic_hook::set_once();
console_log::init_with_level(log::Level::Trace).unwrap();
// 在 HTML <body> 内初始化一个 backend 环境
let dom_backend = DomBackend::new_with_document_body().unwrap();
let backend_context = maomi::BackendContext::new(dom_backend);
// 创建一个挂载点用于放置组件
let mount_point = backend_context
.enter_sync(move |ctx| {
ctx.attach(|_: &mut MyWebsite| {})
})
.map_err(|_| "Cannot init mount point")
.unwrap();
// 将挂载点和 backend 环境泄露掉、使它们不在函数结束时回收,这样就可以一直运行
std::mem::forget(mount_point);
std::mem::forget(backend_context);
}

编译到 WebAssembly

编译代码时使用wasm-pack

wasm-pack build --target no-modules

生成的代码位于 pkg 目录中。

编写 HTML 文件

编写一个 HTML 文件,将 <body> 留空。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body></body>
<script src="pkg/my_website.js"></script>
<script>
wasm_bindgen('pkg/my_website_bg.wasm')
</script>
</html>

然后启动一个 HTTP 服务器并访问这个文件,看看结果吧!