examples: adds summary of wasm examples and fixes callback bug
This adds a summary of each wasm example, as before it was a bit unclear how to do so. This also fixes the callback example which was broken. Fixes #2568 Signed-off-by: Adrian Cole <adrian@tetrate.io>
Этот коммит содержится в:
родитель
4ca9b34133
коммит
07cdcc61f7
2 изменённых файлов: 11 добавлений и 11 удалений
|
@ -21,12 +21,14 @@ $ tinygo build -o ./wasm.wasm -target wasm ./main/main.go
|
||||||
This creates a `wasm.wasm` file, which we can load in JavaScript and execute in
|
This creates a `wasm.wasm` file, which we can load in JavaScript and execute in
|
||||||
a browser.
|
a browser.
|
||||||
|
|
||||||
This examples folder contains two examples that can be built using `make`:
|
Next, choose which example you want to use:
|
||||||
|
* [callback](callback): Defines and configures callbacks in Wasm.
|
||||||
```bash
|
* [export](export): Defines callbacks in Wasm, but configures them in JavaScript.
|
||||||
$ make export
|
* [invoke](invoke): Invokes a function defined in JavaScript from Wasm.
|
||||||
```
|
* [main](main): Prints a message to the JavaScript console from Wasm.
|
||||||
|
* [slices](slices): Splits an Array defined in JavaScript from Wasm.
|
||||||
|
|
||||||
|
Let's say you chose [main](main), you'd build it like so:
|
||||||
```bash
|
```bash
|
||||||
$ make main
|
$ make main
|
||||||
```
|
```
|
||||||
|
@ -42,12 +44,8 @@ Serving ./html on http://localhost:8080
|
||||||
|
|
||||||
Use your web browser to visit http://localhost:8080.
|
Use your web browser to visit http://localhost:8080.
|
||||||
|
|
||||||
* The wasm "export" example displays a simple math equation using HTML, with
|
* Tip: Open the browser development tools (e.g. Right-click, Inspect in
|
||||||
the result calculated dynamically using WebAssembly. Changing any of the
|
FireFox) to see console output.
|
||||||
values on the left hand side triggers the exported wasm `update` function to
|
|
||||||
recalculate the result.
|
|
||||||
* The wasm "main" example uses `println` to write to your browser JavaScript
|
|
||||||
console. You may need to open the browser development tools console to see it.
|
|
||||||
|
|
||||||
## How it works
|
## How it works
|
||||||
|
|
||||||
|
|
|
@ -8,10 +8,12 @@ import (
|
||||||
var a, b int
|
var a, b int
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
|
wait := make(chan struct{}, 0)
|
||||||
document := js.Global().Get("document")
|
document := js.Global().Get("document")
|
||||||
document.Call("getElementById", "a").Set("oninput", updater(&a))
|
document.Call("getElementById", "a").Set("oninput", updater(&a))
|
||||||
document.Call("getElementById", "b").Set("oninput", updater(&b))
|
document.Call("getElementById", "b").Set("oninput", updater(&b))
|
||||||
update()
|
update()
|
||||||
|
<-wait
|
||||||
}
|
}
|
||||||
|
|
||||||
func updater(n *int) js.Func {
|
func updater(n *int) js.Func {
|
||||||
|
|
Загрузка…
Создание таблицы
Сослаться в новой задаче