golang生成wasm,js调用wasm

网上文章大多废话较多，这里做个提炼过的总结。

package main

import (
	"syscall/js"
)

// 导出add函数
func add(this js.Value, inputs []js.Value) interface{} {
	a := inputs[0].Int()
	b := inputs[1].Int()
	return a + b
}

// 导出add函数
func mul(this js.Value, inputs []js.Value) interface{} {
	a := inputs[0].Int()
	b := inputs[1].Int()
	return a * b
}

func main() {
	c := make(chan struct{}, 0)

	// 注册add函数
	js.Global().Set("add", js.FuncOf(add))
	js.Global().Set("mul", js.FuncOf(mul))

	<-c
}

使用下面的命令编译并打包成wasm。注意golang需要版本>11

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

然后就是关键的需要在html中引入的东西了

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<script src="wasm_exec.js"></script>
<script src="index.js"></script>

需要注意的是,这里的wasm_exec.js最好去你的本地直接拷贝过来

D:\Go\misc\wasm地址下拷贝对应版本的wasm_exec.js到项目中才可以正常使用

然后就是index.js中的调用了

const go = new Go();

WebAssembly.instantiateStreaming(fetch("app/main.wasm"), go.importObject)
    .then((result) => {
        go.run(result.instance);

        // 调用导出函数
        const sum = add(2, 3);
        console.log(`The sum of 2 and 3 is ${sum}.`);

        const ji = mul(2, 3);
        console.log(`The mul of 2 and 3 is ${ji}.`);
    })
    .catch((err) => {
        console.error(err);
    });

// 导入参数对象
const imports = {
    env: {
        log: function (str) {
            console.log(str);
        },
    },
};

// 注册导出函数
function add(x, y) {
    return window.wasmAdd(x, y);
}

// 注册导出函数
function mul(x, y) {
    return window.wasmMul(x, y);
}

以上就是超级简单的入门教程了。