syscall/js详细用法

//go:build js && wasm

package main

import (
	"fmt"
	"syscall/js"
)

func main() {
	var window js.Value = js.Global()

	//window添加一个名为test的函数
	window.Set("test", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		var dpr = window.Get("devicePixelRatio").Int()
		window.Set("dpr", dpr)                                                      //window.dpr = dpr
		window.Get("localStorage").Call("setItem", "go_set", "Hello, World!")       //调用函数方式1：localStorage.setItem("go_test", "Hello, World!")，call支持多参数
		window.Get("localStorage").Get("setItem").Invoke("go_set", "Hello, World!") //调用函数方式2：localStorage.setItem("go_test", "Hello, World!")，call支持多参数

		return js.Undefined()
	}))

	//window添加一个名为test2的函数
	window.Set("test2", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		button := window.Get("document").Call("createElement", "button") //创建一个button元素
		button.Set("innerHTML", "Click Me")                              //设置button的内容

		button.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} { //为button添加点击事件
			window.Call("alert", "Button Clicked!") //点击按钮弹出提示框
			return js.Undefined()
		}))
		window.Get("document").Get("body").Call("appendChild", button) //将button添加到body中
		return js.Undefined()
	}))

	//window添加一个名为test3的函数，进行数组操作
	window.Set("test3", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		var arr1 = window.Get("Array").New(1, 2, 3, 4, 5) //new Array(1,2,3,4,5)
		window.Set("arr1", arr1)                          //不允许直接设置[]int slice，需要先转换为js数组
		var el0 = window.Get("arr1").Index(0)             //index也可以换成Get("0")
		var el1 = window.Get("arr1").Index(1)
		fmt.Println(el0.Int(), el1.Int()) //会直接输出到前端的console中，相当于console.log(arr1[0], arr1[1])

		window.Get("arr1").SetIndex(3, 44) //SetIndex也可以换成Set("3", 44)
		var length = window.Get("arr1").Length() //也可以换成window.Get("arr1").Get("length").Int()
		fmt.Println(length)
		return js.Undefined()
	}))

	select {} //阻塞主线程，防止程序退出，必须
}

还有一些相对不太常用的内容

//go:build js && wasm

package main

import (
	"fmt"
	"syscall/js"
)

func main() {
	var window js.Value = js.Global()

	window.Set("test1", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
		//InstanceOf判断类型
		var arr1 = window.Get("Array").New(1, 2, 3, 4, 5)
		window.Set("arr1", arr1)
		fmt.Println("arr1 is Array?", window.Get("arr1").InstanceOf(window.Get("Array")))

		//删除全局的btoa函数
		window.Delete("btoa")



		//Type获取js.Value的类型
		var t js.Type = window.Type()
		fmt.Println("window is object?", t == js.TypeObject)
        //所有类型：
		//const (
		//	TypeUndefined
		//	TypeNull
		//	TypeBoolean
		//	TypeNumber
		//	TypeString
		//	TypeSymbol
		//	TypeObject
		//	TypeFunction
		//)


		//js.Value转int，前提是知道它是int类型。还支持：String、Bool、Float
		window.Int()

		//Equal比较两个js.Value是否相等，用的是JavaScript的===运算符
		window.Get("devicePixelRatio").Equal(window.Get("devicePixelRatio"))

		//Is检查js.Value的特殊值
		window.IsNull()
		window.IsNaN()
		window.IsUndefined()


		//	| Go                     | JavaScript             |
		//	| ---------------------- | ---------------------- |
		//	| js.Value               | [its value]            |
		//	| js.Func                | function               |
		//	| nil                    | null                   |
		//	| bool                   | boolean                |
		//	| integers and floats    | number                 |
		//	| string                 | string                 |
		//	| []interface{}          | new array              |
		//	| map[string]interface{} | new object             |
		// 将Go类型转换为JavaScript类型，并赋值给全局变量arr1。所有转换规则见上表。
		// 注意[]interface{}不能换成[]int{}，否则会发生运行时报错
		window.Set("arr1", js.ValueOf([]any{1, 2, 3, 4, 5}))

		return js.Null()
	}))

	select {} //阻塞主线程，防止程序退出，必须
}