从 JavaScript 调用函数
试图理解wasm，所以我在下面写了：
操作 DOM
调用JS函数
定义一个可以被JS调用的函数
前两个步骤很好，但最后一个没有按预期工作，因为我收到了 JavaScript 错误function undefined，我的代码在下面，我遇到的问题出在函数中sub
package main
import (
"syscall/js"
)
// func sub(a, b float64) float64
func sub(this js.Value, inputs []js.Value) interface{} {
return inputs[0].Float() - inputs[1].Float()
}
func main() {
c := make(chan int) // channel to keep the wasm running, it is not a library as in rust/c/c++, so we need to keep the binary running
js.Global().Set("sub", js.FuncOf(sub))
alert := js.Global().Get("alert")
alert.Invoke("Hi")
println("Hello wasm")
num := js.Global().Call("add", 3, 4)
println(num.Int())
document := js.Global().Get("document")
h1 := document.Call("createElement", "h1")
h1.Set("innerText", "This is H1")
document.Get("body").Call("appendChild", h1)
<-c // pause the execution so that the resources we create for JS keep available
}
将其编译为 wasm 为：
GOOS=js GOARCH=wasm go build -o main.wasm wasm.go
将文件复制wasm_exec.js到与以下相同的工作文件夹：
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .
我的 HTML 文件是：
<!DOCTYPE html>
<html>
<head>
<title>WASM</title>
<script src="http://localhost:8080/www/lib.js"></script>
<!-- WASM -->
<script src="http://localhost:8080/www/wasm_exec.js"></script>
<script src="http://localhost:8080/www/loadWasm.js"></script>
</head>
<body>
</body>
<script>
console.log(sub(5,3));
</script>
</html>
是lib.js：
function add(a, b){
return a + b;
}
是loadWasm.js：
async function init(){
const go = new Go();
const result = await WebAssembly.instantiateStreaming(
fetch("http://localhost:8080/www/main.wasm"),
go.importObject
);
go.run(result.instance);
}
init();
服务器代码是：
package main
import (
"fmt"
"html/template"
"net/http"
)
我得到的输出是：
德玛西亚991回答
-
互换的青春
我找到了解决方案，我需要一些东西来检测并确认wasm已加载并准备好进行处理，这与 JS 中用于检查文档是否准备就绪的方法相同：if (document.readyState === 'complete') { // The page is fully loaded}// ordocument.onreadystatechange = () => { if (document.readyState === 'complete') { // document ready }};因此，作为wasm我的代码中的启动函数，我async在 JS 中使用了以下内容：<!DOCTYPE html><html><head> <title>WASM</title> <!-- WASM --> <script src="http://localhost:8080/www/wasm_exec.js"></script> <script src="http://localhost:8080/www/loadWasm.js"></script></head><body></body><script> (async () => { try { await init(); alert("Wasm had been loaded") console.log(multiply(5, 3)); } catch (e) { console.log(e); } })(); /***** OR ****/ (async () => { await init(); alert("Wasm had been loaded") console.log(multiply(5, 3)); })().catch(e => { console.log(e); });/*************/</script></html>这帮助我确定文档已准备好处理并调用 wasm 函数。wasm加载函数简单地变成了：async function init(){ const go = new Go(); const result = await WebAssembly.instantiateStreaming( fetch("http://localhost:8080/www/main.wasm"), go.importObject ); go.run(result.instance); }
随时随地看视频慕课网APP
相关分类
Go