golang 获取当天0点时间_golang使用webAssembly的方式

WebAssembly (WASM) 是一种新的编码方式，可以在现代的网络浏览器中运行－它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能. 可以将C/C++/Rust/GO代码编译成.wasm文件, 然后运行在web上面.

本文仅介绍Golang与WASM使用的相关基础知识.

环境

需要golang版本高于go1.11, 本文golang版本:

$ go version
> go version go1.11.1 darwin/amd64

js中调用golang函数案例

本案例基于goland IDE编写, 为了获取syscall/js库的自动提示, 需要对IDE进行如下设置:

设置好之后, 进行编辑go文件: main.go

package mainimport ("fmt""syscall/js"
)func foo( args []js.Value) {fmt.Println("hellow wasm")fmt.Println(args)
}func main() {// 将golang中foo函数注入到window.foo中js.Global().Set("foo", js.NewCallback(foo))// 将100注入到 window.value中js.Global().Set("value", 100)select {}
}

将此main.go文件, 编译成wasm文件:

GOARCH=wasm GOOS=js go build -o test.wasm main.go

接下来需要开启一个简单的web服务器并将上一步的wasm文件复制到案例目录中:

server.go:

package mainimport "net/http"func main() {http.ListenAndServe(":8080", http.FileServer(http.Dir("./test1"))) // 此为案例文件夹目录
}

将golang源码中的wasm_exec.js复制到本案例中:

cp $GOROOT/misc/wasm/wasm_exec.js .

index.html:

<html>
<head><meta charset="utf-8"><script src="wasm_exec.js"></script><script>const go = new Go();WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {go.run(result.instance);});</script>
</head>
<body></body>
</html>

整体案例文件:

$ tree test1
test1
├── index.html
├── server.go
├── test.wasm
└── wasm_exec.js

运行 go run server.go即可启动服务

浏览器中访问 http://127.0.0.1:8080/index.html, 右键->检查->console

即可对golang中的函数以及属性进行访问.

GO获取DOM元素, 操作标签属性

同样的方式, main.go中:

package mainimport ("syscall/js"
)func setDivRedColor(args []js.Value)  {// 获取DOM元素, 进行设置属性,  call方法为调用js方法js.Global().Get("document").Call("getElementById", "div").Set("style", "width: 300px; height: 300px; background-color: red")// 注意, 此处设置style的时候, 是会覆盖掉html中的style设置
}func main() {js.Global().Set("setDivRedColor", js.NewCallback(setDivRedColor))select {}
}

进行编译, 得到wasm文件, 复制到案例项目中

项目中server.go不变, index.html改为:

<html>
<head><meta charset="utf-8"><script src="wasm_exec.js"></script><script>const go = new Go();WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {go.run(result.instance);});</script>
</head>
<body><div style="width: 300px; height: 300px; background-color: yellow" id="div"></div>
</body>
</html>

启动服务, 浏览器访问http://127.0.0.1:8080/index.html