5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 17:39:58 +08:00

feat(website): correct and optimize documents

This commit is contained in:
misitebao 2021-10-05 22:24:31 +08:00
parent 2d551cd019
commit a11a75fa12
2 changed files with 108 additions and 103 deletions

View File

@ -23,8 +23,8 @@ Download Go from the [Go Downloads Page](https://golang.org/dl/).
Ensure that you follow the official [Go installation instructions](https://golang.org/doc/install#install). You will also need to ensure that your `PATH` environment variable also includes the path to your `~/go/bin` directory. Restart your terminal and do the following checks:
* Check Go is installed correctly: `go version`
* Check "~/go/bin" is in your PATH variable: `echo $PATH | grep go/bin`
- Check Go is installed correctly: `go version`
- Check "~/go/bin" is in your PATH variable: `echo $PATH | grep go/bin`
### npm
@ -36,26 +36,24 @@ Run `npm --version` to verify.
You will also need to install platform specific dependencies:
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="Windows"
values={[
{label: 'Windows', value: 'Windows'},
{label: 'MacOS', value: 'MacOS'},
{label: 'Linux', value: 'Linux'},
]}>
<TabItem value="MacOS">
Coming Soon...
</TabItem>
{ label: "Windows", value: "Windows" },
{ label: "MacOS", value: "MacOS" },
{ label: "Linux", value: "Linux" },
]}
>
<TabItem value="MacOS">Coming Soon...</TabItem>
<TabItem value="Windows">
Wails requires that the <a href='https://developer.microsoft.com/en-us/microsoft-edge/webview2/'>WebView2</a> runtime is installed.
Some Windows installations will already have this installed. You can check using the `wails doctor` command (see below).
</TabItem>
<TabItem value="Linux">
Coming Soon...
Wails requires that the <a href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a>{" "}
runtime is installed. Some Windows installations will already have this installed. You can check using the{" "}
<code>wails doctor</code> command (see below).
</TabItem>
<TabItem value="Linux">Coming Soon...</TabItem>
</Tabs>
## Optional Dependencies

View File

@ -11,12 +11,13 @@ version of the runtime library. Finally, it is possible to bind Go methods to th
Javascript methods that can be called, just as if they were local Javascript methods.
<div className="text--center">
<img src="/img/architecture.svg" width='75%'/>
<img src="/img/architecture.svg" width="75%" />
</div>
## The Main Application
### Overview
The main application consists of a single call to `wails.Run()`. It accepts the
application configuration which describes the size of the application window, the window title,
what assets to use, etc. A basic application might look like this:
@ -148,13 +149,16 @@ section of the [Application Development Guide](/docs/guides/application-developm
## The Frontend
### Overview
The frontend is a collection of files rendered by webkit. It's like a browser and webserver in one.
There is virtually[^1] no limit to which frameworks or libraries you can use. The main points of interaction between
the frontend and your Go code are:
- Calling bound Go methods
- Calling runtime methods
[^1]: There is a very small subset of libraries that use features unsupported in WebViews. There are often alternatives and
[^1]:
There is a very small subset of libraries that use features unsupported in WebViews. There are often alternatives and
workarounds for such cases.
### Calling bound Go methods
@ -178,19 +182,18 @@ following code:
```js title="bindings.js"
const go = {
"main": {
"App": {
main: {
App: {
/**
* Greet
* @param {Person} arg1 - Go Type: string
* @returns {Promise<string>} - Go Type: string
*/
"Greet": (arg1) => {
Greet: (arg1) => {
return window.go.main.App.Greet(arg1);
},
}
}
},
},
};
export default go;
```
@ -221,27 +224,29 @@ func (a *App) Greet(p Person) string {
return fmt.Sprintf("Hello %s (Age: %d)!", p.Name, p.Age)
}
```
Our `bindings.js` file has now been updated to reflect the change:
```js title="bindings.js"
const go = {
"main": {
"App": {
main: {
App: {
/**
* Greet
* @param {Person} arg1 - Go Type: main.Person
* @returns {Promise<string>} - Go Type: string
*/
"Greet": (arg1) => {
Greet: (arg1) => {
return window.go.main.App.Greet(arg1);
},
}
}
},
},
};
export default go;
```
Alongside `bindings.js`, there is a file called `models.ts`. This contains our Go structs in TypeScript form:
```ts title="models.ts"
export class Address {
street: string;
@ -252,7 +257,7 @@ export class Address {
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
if ("string" === typeof source) source = JSON.parse(source);
this.street = source["street"];
this.postcode = source["postcode"];
}
@ -267,7 +272,7 @@ export class Person {
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
if ("string" === typeof source) source = JSON.parse(source);
this.name = source["name"];
this.age = source["age"];
this.address = this.convertValues(source["address"], Address);
@ -278,7 +283,7 @@ export class Person {
return a;
}
if (a.slice) {
return (a as any[]).map(elem => this.convertValues(elem, classs));
return (a as any[]).map((elem) => this.convertValues(elem, classs));
} else if ("object" === typeof a) {
if (asMap) {
for (const key of Object.keys(a)) {
@ -292,8 +297,10 @@ export class Person {
}
}
```
So long as you have TypeScript as part of your frontend build configuration, you can use these models in
the following way:
```js title="mycode.js"
import go from "./wailsjs/go/bindings";
import { Person } from "./wailsjs/go/models";