WebAssembly - 使用 Rust

  • 简述

    为了获得 RUST 编译代码,我们将使用 WebAssembly.studio 工具。
    转到WebAssembly.studio,可在转到https://webassembly.studio/上找到它,它会显示如下所示的屏幕 -
    RUST 编译代码
    单击空 Rust 项目。完成后,您将在 src/ 文件夹中获得三个文件 -
    获取三个文件
    打开文件 main.rs 并更改您选择的代码。
    我正在添加以下函数,它将添加两个给定的数字 -
    
    fn add_ints(lhs: i32, rhs: i32) -> i32 {
       lhs+rhs
    }
    
    main.rs 中可用的代码如下 -
    
    #[no_mangle]
    pub extern "C" fn add_one(x: i32) -> i32 {
       x + 1
    }
    
    将 fn add_one 替换为您的,如下所示 -
    
    #[no_mangle]
    pub extern "C" fn add_ints(lhs: i32, rhs: i32) -> i32 {
       lhs+rhs
    }
    
    在 main.js 中,将函数名称从 add_one 更改为 add_ints
    
    fetch('../out/main.wasm').then(
       response =>
       response.arrayBuffer()
    ).then(bytes => WebAssembly.instantiate(bytes)).then(results => {
       instance = results.instance;
       document.getElementById("container").textContent = instance.exports.add_one(41);
    }).catch(console.error);
    
    将 instance.exports.add_one 替换为 instance.exports.add_ints(100,100)
    
    fetch('../out/main.wasm').then(
       response =>
       response.arrayBuffer()
    ).then(bytes => WebAssembly.instantiate(bytes)).then(results => {
       instance = results.instance;
       document.getElementById("container").textContent = instance.exports.add_ints(100,100)
    }).catch(console.error);
    
    单击 webassembly.studio UI 上可用的构建按钮来构建代码。
    Web 组装工作室用户界面
    构建完成后,单击 UI 上可用的运行按钮,查看输出 -
    运行按钮
    我们通过 instance.exports.add_ints(100,100) 得到输出为 200。
    同样,您可以为 rust 编写不同的程序并在 webassembly.studio 中编译它。