当前位置：首页 > article >正文

webassembly.instance()调用模块中的函数及webassembly.Module.exports()查看模块中的成员或函数信息

article 2024/11/5 13:43:25

有时候我们需要查看wasm模块中的成员信息及对其调用方法
//wasm

(module
    (func $add32 (param $a i32)(param $b i32)(result i32)
        local.get $a
        local.get $b
        i32.add
        return
    )
    (func $sub32 (param $a i32)(param $b i32)(result i32)
        local.get $a 
        local.get $b
        i32.sub 
        return
    )
    (func $mul32 (param $a i32)(param $b i32)(result i32)
        local.get $a
        local.get $b
        i32.mul 
        return
    )

    (export "add" (func $add32))
    (export "sub" (func $sub32))
    (export "mul" (func $mul32))
)

//html部分

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <title>测试用WebAssembly.Moudle.exports导出模块所有的函数或成员信息</title>
    </head>
    <body>
        <script type="text/javascript">
            fetch("util.wasm")
            .then((response)=>response.arrayBuffer())//返回模块中的二进制文件
            .then((bytes)=>{
                return WebAssembly.compile(bytes);//把 WebAssembly 二进制代码编译为一个 WebAssembly.Module ，不进行实例化
            })
            .then((result)=>{
            	//导出模块中的所有导出成员或方法
                let modules=WebAssembly.Module.exports(result);
                for(const e in modules)
                {
                	//查看模块中的所有被导出的方法信息
                	console.log(modules[e]);
				}
				//实例化模块方法并调用其中的add()方法，当然也可以调用其它的方法
				WebAssembly.instantiate(result)
                .then(instance=>{
                    console.log(instance.exports.add(5,6));
                })
            })
        </script>
    </body>
</html>