1 个不稳定版本

0.0.0	2020年11月14日

#40 在 #local-storage

39 每月下载量
在 3 个crate中使用 (通过 web)

MIT/Apache

9KB
149 行

简化使用Rust WebAssembly编写Web应用程序

我希望有一个库，人们可以在下午学会使用它，并开始制作交互式浏览器体验。这个项目并不支持所有阳光下的浏览器功能。尽管你可以很容易地使用这个库中使用的运行时 JavaScript 调用机制添加自己的功能。请随意提交更多功能的PR。

异步 & 协程支持
元素操作
鼠标、键盘和改变事件监听器
canvas2d
本地存储
fetch & XMLHttpRequest
样式 & 类
历史 & 位置信息
WebGPU
其他实用工具

查看文档这里

cargo add web

你好世界

让我们看看如何将东西放入控制台的基本示例

use web::*;

fn main() {
    console_log("Hello, world!");
}

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/js-wasm/js-wasm.js"></script>
        <script type="application/wasm" src="helloworld.wasm"></script>
    </head>
    <body>
        Open my console.
    </body>
</html>

记得配置你的库 Cargo.toml 以支持WebAssembly

# add these lines for WebAssembly to end of your Cargo.toml

[lib]
crate-type =["cdylib"]

[profile.release]
lto = true

cargo build --target wasm32-unknown-unknown --release
cp target/wasm32-unknown-unknown/release/helloworld.wasm .
python3 -m http.server

# open https://127.0.0.1:8000 in browser
# right click, inspect, look at message in console

完整示例这里。

更高级的内容？

让我们看看我们的 snake示例以及一些关键功能的使用

在此玩演示

canvas

此示例使用canvas

//get an element and get the 2D context for canvas
let screen = query_selector("#screen");
let width: f64 = get_property_f64(&screen, "width");
let height: f64 = get_property_f64(&screen, "height");
let ctx = CanvasContext::from_element(&screen);

...

//clear screen
self.ctx.clear_rect(
    0.0,
    0.0,
    self.canvas_width as f64,
    self.canvas_height as f64,
);

// iterate through all the cells of the screen and draw a rectangle
for (_id, (pos, color)) in &mut self.world.query::<(&Position, &Color)>() {
    self.ctx.set_fill_style(&color.0);
    self.ctx.fill_rect(
        (pos.0 * (self.canvas_width / MAP_WIDTH)) as f64,
        (pos.1 * (self.canvas_height / MAP_HEIGHT)) as f64,
        (self.canvas_width / MAP_WIDTH) as f64,
        (self.canvas_height / MAP_HEIGHT) as f64,
    );
}

请求动画帧

让我们看看如何运行游戏循环

fn game_loop() {
    // run game loop assuming 15 ms has passed
    match Game::instance().run(15.0) {
        Err(e) => console_error(&e.to_string()),
        _ => (),
    };
    // request next animation frame
    request_animation_frame(game_loop);
}

... 

// start the loop
request_animation_frame(game_loop);

事件

let body = query_selector("body");
element_add_key_down_listener(&body, |e| {
    Game::instance().key_down(e.key_code as u32);
});

异步 & 协程

此库支持异步和生成协程。考虑这个程序，它启动一个循环控制台日志并在屏幕上绘制随机方块。

use web::*;

// easily make your first function async
#[web::main]
async fn main() {
    let canvas = query_selector("#canvas");
    let ctx = CanvasContext::from_element(&canvas);

    // we can spawn concurrent operations
    coroutine(async {
        loop {
            console_log("⏰ tik");
            // hand async set_timeout
            sleep(1000).await;
            console_log("⏰ tok");
            sleep(1000).await;
        }
    });

    loop {
        // draw a random color rect
        ctx.set_fill_style(&format!(
            "rgb({}, {}, {})",
            random() * 255.0,
            random() * 255.0,
            random() * 255.0
        ));
        ctx.fill_rect(
            random() * 500.0,
            random() * 500.0,
            random() * 500.0,
            random() * 500.0,
        );
        // a more async way to write graphics code
        wait_til_animation_frame().await;
    }
}

许可证

此项目受以下其中一种许可证的约束

Apache许可证第2版 (LICENSE-APACHE 或 http://www.apache.org/licenses/LICENSE-2.0)
MIT许可证 (LICENSE-MIT 或 http://opensource.org/licenses/MIT)

任选其一。

贡献

除非你明确表示，否则你提交给 web 的任何贡献，按照Apache-2.0许可证的定义，都应按照上述方式双重授权，不附加任何额外条款或条件。

html_color