mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
docs: fix and sync documents (#2135)
* docs: standardize JavaScript and TypeScript name writing * docs: sync translated documents * docs: fix broken link * docs: sync translated documents
This commit is contained in:
@@ -6,9 +6,9 @@ sidebar_position: 20
|
||||
|
||||
A Wails application is a standard Go application, with a webkit frontend. The Go part of the application consists of the
|
||||
application code and a runtime library that provides a number of useful operations, like controlling the application
|
||||
window. The frontend is a webkit window that will display the frontend assets. Also available to the frontend is a Javascript
|
||||
window. The frontend is a webkit window that will display the frontend assets. Also available to the frontend is a JavaScript
|
||||
version of the runtime library. Finally, it is possible to bind Go methods to the frontend, and these will appear as
|
||||
Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
JavaScript methods that can be called, just as if they were local JavaScript methods.
|
||||
|
||||
```mdx-code-block
|
||||
<div className="text--center">
|
||||
@@ -121,7 +121,7 @@ Just before the frontend is about to load `index.html`, a callback is made to th
|
||||
A standard Go context is passed to this method. This context is required when calling the runtime so a standard pattern is to save
|
||||
a reference to in this method. Just before the application shuts down, the [OnShutdown](reference/options.mdx#onshutdown) callback is called in the same way,
|
||||
again with the context. There is also an [OnDomReady](reference/options.mdx#ondomready) callback for when the frontend
|
||||
has completed loading all assets in `index.html` and is equivalent of the [`body onload`](https://www.w3schools.com/jsref/event_onload.asp) event in Javascript.
|
||||
has completed loading all assets in `index.html` and is equivalent of the [`body onload`](https://www.w3schools.com/jsref/event_onload.asp) event in JavaScript.
|
||||
It is also possible to hook into the window close (or application quit) event by setting the
|
||||
option [OnBeforeClose](reference/options.mdx#onbeforeclose).
|
||||
|
||||
@@ -130,7 +130,7 @@ option [OnBeforeClose](reference/options.mdx#onbeforeclose).
|
||||
The `Bind` option is one of the most important options in a Wails application. It specifies which struct methods
|
||||
to expose to the frontend. Think of structs like "controllers" in a traditional web application. When the application
|
||||
starts, it examines the struct instances listed in the `Bind` field in the options, determines which methods are
|
||||
public (starts with an uppercase letter) and will generate Javascript versions of those methods that can be called
|
||||
public (starts with an uppercase letter) and will generate JavaScript versions of those methods that can be called
|
||||
by the frontend code.
|
||||
|
||||
:::info Note
|
||||
@@ -208,9 +208,9 @@ You may bind as many structs as you like. Just make sure you create an instance
|
||||
|
||||
When you run `wails dev` (or `wails generate module`), a frontend module will be generated containing the following:
|
||||
|
||||
- Javascript bindings for all bound methods
|
||||
- Typescript declarations for all bound methods
|
||||
- Typescript definitions for all Go structs used as inputs or outputs by the bound methods
|
||||
- JavaScript bindings for all bound methods
|
||||
- TypeScript declarations for all bound methods
|
||||
- TypeScript definitions for all Go structs used as inputs or outputs by the bound methods
|
||||
|
||||
This makes it incredibly simple to call Go code from the frontend, using the same strongly typed datastructures.
|
||||
|
||||
@@ -231,7 +231,7 @@ the frontend and your Go code are:
|
||||
|
||||
### Calling bound Go methods
|
||||
|
||||
When you run your application with `wails dev`, it will automatically generate Javascript bindings for your structs in a
|
||||
When you run your application with `wails dev`, it will automatically generate JavaScript bindings for your structs in a
|
||||
directory called `wailsjs/go` (You can also do this by running `wails generate module`). The generated files mirror the
|
||||
package names in your application. In the example above, we bind `app`, which has one public method `Greet`. This will
|
||||
lead to the generation of the following files:
|
||||
@@ -244,9 +244,9 @@ wailsjs
|
||||
└─App.js
|
||||
```
|
||||
|
||||
Here we can see that there is a `main` package that contains the Javascript bindings for the bound `App` struct, as well
|
||||
as the Typescript declaration file for those methods. To call `Greet` from our frontend, we simply import the method and
|
||||
call it like a regular Javascript function:
|
||||
Here we can see that there is a `main` package that contains the JavaScript bindings for the bound `App` struct, as well
|
||||
as the TypeScript declaration file for those methods. To call `Greet` from our frontend, we simply import the method and
|
||||
call it like a regular JavaScript function:
|
||||
|
||||
```javascript
|
||||
// ...
|
||||
@@ -259,7 +259,7 @@ function doGreeting(name) {
|
||||
}
|
||||
```
|
||||
|
||||
The Typescript declaration file gives you the correct types for the bound methods:
|
||||
The TypeScript declaration file gives you the correct types for the bound methods:
|
||||
|
||||
```ts
|
||||
export function Greet(arg1: string): Promise<string>;
|
||||
@@ -268,29 +268,29 @@ export function Greet(arg1: string): Promise<string>;
|
||||
The generated methods return a Promise. A successful call will result in the first return value from the Go call to be passed
|
||||
to the `resolve` handler. An unsuccessful call is when a Go method that has an error type as it's second return value,
|
||||
passes an error instance back to the caller. This is passed back via the `reject` handler.
|
||||
In the example above, `Greet` only returns a `string` so the Javascript call will never reject - unless invalid data
|
||||
In the example above, `Greet` only returns a `string` so the JavaScript call will never reject - unless invalid data
|
||||
is passed to it.
|
||||
|
||||
All data types are correctly translated between Go and Javascript. Even structs. If you return a struct from a Go call,
|
||||
it will be returned to your frontend as a Javascript class.
|
||||
All data types are correctly translated between Go and JavaScript. Even structs. If you return a struct from a Go call,
|
||||
it will be returned to your frontend as a JavaScript class.
|
||||
|
||||
:::info Note
|
||||
|
||||
Struct fields *must* have a valid `json` tag to be included in the generated Typescript.
|
||||
Struct fields *must* have a valid `json` tag to be included in the generated TypeScript.
|
||||
|
||||
Anonymous nested structs are not supported at this time.
|
||||
|
||||
:::
|
||||
|
||||
It is possible to send structs back to Go. Any Javascript map/class passed as an argument that
|
||||
It is possible to send structs back to Go. Any JavaScript map/class passed as an argument that
|
||||
is expecting a struct, will be converted to that struct type. To make this process a lot easier, in `dev` mode,
|
||||
a TypeScript module is generated, defining all the struct types used in bound methods. Using this module, it's possible
|
||||
to construct and send native Javascript objects to the Go code.
|
||||
to construct and send native JavaScript objects to the Go code.
|
||||
|
||||
There is also support for Go methods that use structs in their signature. All Go structs
|
||||
specified by a bound method (either as parameters or return types) will have Typescript versions auto
|
||||
specified by a bound method (either as parameters or return types) will have TypeScript versions auto
|
||||
generated as part of the Go code wrapper module. Using these, it's possible to share the same data
|
||||
model between Go and Javascript.
|
||||
model between Go and JavaScript.
|
||||
|
||||
Example: We update our `Greet` method to accept a `Person` instead of a string:
|
||||
|
||||
@@ -408,7 +408,7 @@ section of the [Application Development Guide](guides/application-development.md
|
||||
|
||||
### Calling runtime methods
|
||||
|
||||
The Javascript runtime is located at `window.runtime` and contains many methods to do various
|
||||
The JavaScript runtime is located at `window.runtime` and contains many methods to do various
|
||||
tasks such as emit an event or perform logging operations:
|
||||
|
||||
```js title="mycode.js"
|
||||
|
||||
Reference in New Issue
Block a user