vite+go+wasm 简单教程

如果您看到了该文章说明你已经明白或至少了解WebAssembly是一个什么。这里我就不废话介绍 如果想了解可以点击webassembly进行了解

直接进入正题

编写go代码

main.go

package main

import (
	"fmt"
	"syscall/js"
)

func main() {
	fmt.Println("你好我是 wasm")
	//注册函数供js调用
	js.Global().Set("add", js.FuncOf(func(this js.Value, args []js.Value) any {
		num := args[0].Int() + args[1].Int()
		return num
	}))
	// go语言调用js代码
	alert := js.Global().Get("alert")
	alert.Invoke("go调用js的alert")
	//阻塞主线程防止主线程运行完毕导致js无法调用函数
	select {}
}

在编译为wasm之前先运行cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . 该命令作用是将go语言与js结合的胶水语言拷贝到当前目录
接着运行GOOS=js GOARCH=wasm go build -o main.wasm 编译go语言为wasm代码。

创建vite项目

如何创建请直接看vite官网，下面是我创建完成的vite项目

拷贝胶水语言到vite项目中

调用wasm 文件

<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(async () => {
  // 实例化go（胶水语言）
  const go = new Go()
  WebAssembly.instantiateStreaming(fetch("api/img/main.wasm"), go.importObject)
      .then((result) => {
        //运行wasm
        go.run(result.instance)
        //调用注册到全局的函数
        console.log(add(1,2))
      });
})
</script>

<template>

</template>

注意：fetch(“api/img/main.wasm”) 是从服务器加载wasm，可以使用nginx等服务器进行静态资源加载，这里我使用的是caddy作为资源文件服务器

效果