mirror of
https://github.com/taigrr/wails.git
synced 2026-04-02 05:08:54 -07:00
Merge pull request #852 from misitebao/synchronize-chinese-documents
feat(website): synchronize chinese documents
This commit is contained in:
Lea Anthony
GitHub
35
.github/workflows/deploy-website-to-wails.top-mirror.yml
vendored
Normal file
35
.github/workflows/deploy-website-to-wails.top-mirror.yml
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
name: Deploy mirror | 部署镜像
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
# pull_request:
|
||||
# branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
name: Automatic deployment | 自动部署
|
||||
runs-on: ubuntu-latest
|
||||
if: github.repository == 'misitebao/wails'
|
||||
|
||||
steps:
|
||||
- name: Checkout | 切换到部署分支
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
ref: "master"
|
||||
submodules: true
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Build Site | 构建网站
|
||||
run: |
|
||||
cd website &&
|
||||
npm install && npm run build
|
||||
|
||||
- name: Deploy to Server | 部署到服务器
|
||||
uses: hengkx/ssh-deploy@v1.0.1
|
||||
with:
|
||||
HOST: ${{ secrets.DEPLOY_HOST }}
|
||||
USERNAME: ${{ secrets.DEPLOY_HOST_USER }}
|
||||
PASSWORD: ${{ secrets.DEPLOY_HOST_PASSWORD }}
|
||||
SOURCE: "website/build"
|
||||
TARGET: "/www/wwwroot/wails.top"
|
||||
34
website/.github/deploy-to-wails.top-mirror.yml
vendored
34
website/.github/deploy-to-wails.top-mirror.yml
vendored
@@ -1,34 +0,0 @@
|
||||
name: Deploy mirror | 部署镜像
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
pull_request:
|
||||
branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
name: Automatic deployment | 自动部署
|
||||
runs-on: ubuntu-latest
|
||||
if: github.repository == 'misitebao/wails-docs'
|
||||
|
||||
steps:
|
||||
- name: Checkout | 切换到部署分支
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
ref: "main"
|
||||
submodules: true
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Build Site | 构建网站
|
||||
run: |
|
||||
npm install && npm run build
|
||||
|
||||
# - name: Deploy to Server | 部署到服务器
|
||||
# uses: hengkx/ssh-deploy@v1.0.1
|
||||
# with:
|
||||
# HOST: ${{ secrets.DEPLOY_HOST }}
|
||||
# USERNAME: ${{ secrets.DEPLOY_HOST_USER }}
|
||||
# PASSWORD: ${{ secrets.DEPLOY_HOST_PASSWORD }}
|
||||
# SOURCE: "build"
|
||||
# TARGET: "/www/wwwroot/beta.wails.top"
|
||||
@@ -6,16 +6,16 @@ sidebar_position: 1
|
||||
|
||||
## Supported Platforms
|
||||
|
||||
- Windows 10
|
||||
- MacOS x64 & arm64 (due October '21)
|
||||
- Linux (due December '21)
|
||||
- Windows 10
|
||||
- MacOS x64 & arm64 (due October '21)
|
||||
- Linux (due December '21)
|
||||
|
||||
## Dependencies
|
||||
|
||||
Wails has a number of common dependencies that are required before installation:
|
||||
|
||||
- Go 1.17+
|
||||
- npm (Node 14+)
|
||||
- Go 1.17+
|
||||
- npm (Node 14+)
|
||||
|
||||
### Go
|
||||
|
||||
@@ -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,31 +36,29 @@ 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
|
||||
|
||||
- [UPX](https://upx.github.io/) for compressing your applications.
|
||||
- [UPX](https://upx.github.io/) for compressing your applications.
|
||||
|
||||
## Installing Wails
|
||||
|
||||
|
||||
@@ -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:
|
||||
@@ -75,12 +76,12 @@ func (b *App) Greet(name string) string {
|
||||
|
||||
This example has the following options set:
|
||||
|
||||
- `Title` - The text that should appear in the window's title bar
|
||||
- `Width` & `Height` - The dimensions of the window
|
||||
- `Assets` - The application's frontend assets
|
||||
- `OnStartup` - A callback for when the window is created and is about to start loading the frontend assets
|
||||
- `OnShutdown` - A callback for when the application is about to quit
|
||||
- `Bind` - A slice of struct instances that we wish to expose to the frontend
|
||||
- `Title` - The text that should appear in the window's title bar
|
||||
- `Width` & `Height` - The dimensions of the window
|
||||
- `Assets` - The application's frontend assets
|
||||
- `OnStartup` - A callback for when the window is created and is about to start loading the frontend assets
|
||||
- `OnShutdown` - A callback for when the application is about to quit
|
||||
- `Bind` - A slice of struct instances that we wish to expose to the frontend
|
||||
|
||||
A full list of application options can be found in the [Options Reference](/docs/reference/options).
|
||||
|
||||
@@ -94,7 +95,7 @@ there is no requirement on where in the `embed.FS` the files live. It is likely
|
||||
directory relative to your main application code, such as `frontend/dist`:
|
||||
|
||||
```go title="main.go"
|
||||
// go:embed frontend/dist
|
||||
//go:embed frontend/dist
|
||||
var assets embed.FS
|
||||
```
|
||||
|
||||
@@ -117,7 +118,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](/docs/reference/options#OnShutdown) callback is called in the same way,
|
||||
again with the context. There is also an [OnDomReady](/docs/reference/options#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.
|
||||
|
||||
#### Method Binding
|
||||
|
||||
@@ -133,7 +134,7 @@ These methods return a promise. A successful call will result in the first retur
|
||||
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
|
||||
is passed to it.
|
||||
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 map. Note: If you wish to use structs, you **must** define `json` struct
|
||||
@@ -148,14 +149,17 @@ 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
|
||||
workarounds for such cases.
|
||||
- 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
|
||||
workarounds for such cases.
|
||||
|
||||
### Calling bound Go methods
|
||||
|
||||
@@ -163,11 +167,11 @@ All bound Go methods are available at `window.go.<package>.<struct>.<method>`. A
|
||||
the previous section, these return a Promise where a successful call returns a value to the
|
||||
resolve handler and an error returns a value to the reject handler.
|
||||
|
||||
```go title="mycode.js"
|
||||
window.go.main.App.Greet("Bill").then((result) => {
|
||||
console.log("The greeting is: " + result);
|
||||
})
|
||||
```
|
||||
```go title="mycode.js"
|
||||
window.go.main.App.Greet("Bill").then((result) => {
|
||||
console.log("The greeting is: " + result);
|
||||
})
|
||||
```
|
||||
|
||||
When running the application in `dev` mode, a javascript module is generated that wraps these
|
||||
methods with JSDoc annotations. This really help with development, especially as most
|
||||
@@ -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,93 +224,97 @@ 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;
|
||||
postcode: string;
|
||||
street: string;
|
||||
postcode: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new Address(source);
|
||||
}
|
||||
static createFrom(source: any = {}) {
|
||||
return new Address(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.street = source["street"];
|
||||
this.postcode = source["postcode"];
|
||||
}
|
||||
constructor(source: any = {}) {
|
||||
if ("string" === typeof source) source = JSON.parse(source);
|
||||
this.street = source["street"];
|
||||
this.postcode = source["postcode"];
|
||||
}
|
||||
}
|
||||
export class Person {
|
||||
name: string;
|
||||
age: number;
|
||||
address?: Address;
|
||||
name: string;
|
||||
age: number;
|
||||
address?: Address;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new Person(source);
|
||||
static createFrom(source: any = {}) {
|
||||
return new Person(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ("string" === typeof source) source = JSON.parse(source);
|
||||
this.name = source["name"];
|
||||
this.age = source["age"];
|
||||
this.address = this.convertValues(source["address"], Address);
|
||||
}
|
||||
|
||||
convertValues(a: any, classs: any, asMap: boolean = false): any {
|
||||
if (!a) {
|
||||
return a;
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.name = source["name"];
|
||||
this.age = source["age"];
|
||||
this.address = this.convertValues(source["address"], Address);
|
||||
if (a.slice) {
|
||||
return (a as any[]).map((elem) => this.convertValues(elem, classs));
|
||||
} else if ("object" === typeof a) {
|
||||
if (asMap) {
|
||||
for (const key of Object.keys(a)) {
|
||||
a[key] = new classs(a[key]);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
return new classs(a);
|
||||
}
|
||||
|
||||
convertValues(a: any, classs: any, asMap: boolean = false): any {
|
||||
if (!a) {
|
||||
return a;
|
||||
}
|
||||
if (a.slice) {
|
||||
return (a as any[]).map(elem => this.convertValues(elem, classs));
|
||||
} else if ("object" === typeof a) {
|
||||
if (asMap) {
|
||||
for (const key of Object.keys(a)) {
|
||||
a[key] = new classs(a[key]);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
return new classs(a);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
return a;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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";
|
||||
import go from "./wailsjs/go/bindings";
|
||||
import { Person } from "./wailsjs/go/models";
|
||||
|
||||
let name = "";
|
||||
let name = "";
|
||||
|
||||
function greet(name) {
|
||||
let p = new Person();
|
||||
p.name = name;
|
||||
p.age = 42;
|
||||
go.main.App.Greet(p).then((result) => {
|
||||
console.log(result);
|
||||
});
|
||||
}
|
||||
function greet(name) {
|
||||
let p = new Person();
|
||||
p.name = name;
|
||||
p.age = 42;
|
||||
go.main.App.Greet(p).then((result) => {
|
||||
console.log(result);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
The combination of JSDoc and TypeScript generated models makes for a powerful development environment.
|
||||
|
||||
@@ -9,42 +9,151 @@ authors:
|
||||
tags: [wails, v2]
|
||||
---
|
||||
|
||||
两年多前，在悉尼的火车上，当我第一次在 Reddit 宣布 Wails 时，我没想到它会引起太多关注。几天后，一位多产的科技视频博主发布了一个教程视频，并给予了正面评价，从那时起，人们对这个项目的兴趣直线上升。
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/wails.png"
|
||||
width="40%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
人们对在他们的 Go 项目中添加 web 前端感到兴奋，几乎立即在这个项目推送并超出了我创建这个项目的设想。当时，Wails 使用 [webview](https://github.com/webview/webview) 项目来处理前端，
|
||||
两年多前，在悉尼的火车上，当我第一次在 Reddit 宣布 Wails 时，我没想到它会引起太多关注。几天后，一位多产的科技视频博主发布了一个教程视频，并给予了正面评价，从那时起，人们对该项目的兴趣猛增。
|
||||
|
||||
很明显，人们对将 Web 前端添加到他们的 Go 项目感到兴奋，几乎立即将项目推动到超出我创建这个项目的设想。当时，Wails 使用 [webview](https://github.com/webview/webview) 项目来处理前端，
|
||||
Windows 的唯一选择是 IE11 渲染器。许多错误报告都因为受到它的限制：糟糕的 JavaScript/CSS 支持并且没有开发工具来调试它。这是一段令人沮丧的开发经历，但我们也没有采取什么措施去纠正它。
|
||||
|
||||
很长一段时间以来，我一直坚信微软最终会解决他们的浏览器问题。世界在不断进步，前端开发正在蓬勃发展，而 IE 并没有做到这一点。当微软宣布将 Chromium 作为其新浏览器方向的基础时，
|
||||
我知道 Wails 能够使用它并将 Windows 开发者的体验提升到下一个水平只是时间问题。
|
||||
|
||||
今天，我很高兴地宣布：**适用于 Windows 的 Wails v2 公测啦**!
|
||||
今天，我很高兴地宣布：**适用于 Windows 的 Wails v2 公测啦**！此版本中有大量内容需要展开来说，所以，请倒一杯茶，咱们坐下来慢慢讲......
|
||||
|
||||
- 没有 CGO 依赖！不，我不是在开玩笑：_没有依赖 CGO_ 🤯！
|
||||
- WebView2 （chromium） 渲染引擎！ 终于！
|
||||
- 不需要在应用程序中附带任何 dll，包括`WebView2Loader.dll`。单个二进制文件的构想继续存在。
|
||||
- 不需要打包资源（只需要提供一个 embed.FS，就像一个 web 服务器）
|
||||
- 应用程序菜单支持
|
||||
- 具有热重载和自动重新构建功能的新开发方式
|
||||
- 用于控制应用程序窗口的运行时方法
|
||||
- 现代化的原生对话框
|
||||
### 没有 CGO 依赖
|
||||
|
||||
不，我不是在开玩笑：*没有 CGO 依赖*🤯！Windows 的问题在于，与 MacOS 和 Linux 不同，它没有默认编译器。
|
||||
此外，CGO 需要一个 mingw 编译器，并且有大量不同的安装选项。删除 CGO 的要求大大简化了设置，并使调试变得非常容易。
|
||||
虽然我已经付出了相当多的努力来完成这项工作，但大部分功劳应该归功于[John Chadwick](https://github.com/jchv)，他不仅启动了几个项目使这成为可能，
|
||||
而且还对接受这些项目并以此为基础的人持开放态度. 还要归功于[Tad Vizbaras](https://github.com/tadvi)，他的[winc](https://github.com/tadvi/winc)项目让我走上了这条道路。
|
||||
|
||||
### WebView2 Chromium 渲染引擎
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/devtools.png"
|
||||
width="75%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
最终，Windows 开发人员为他们的应用程序获得了一流的渲染引擎！扭曲前端代码以在 Windows 上工作的日子已经一去不复返了。最重要的是，您将获得一流的开发者工具体验！
|
||||
|
||||
但是，WebView2 组件确实需要将其放置`WebView2Loader.dll`在二进制文件旁边。这使得分发比我们 gophers 习惯的更痛苦。所有使用 WebView2 的解决方案和库（我知道的）都具有这种依赖性。
|
||||
|
||||
然而，我真的很高兴地宣布，Wails 应用程序*没有这样的要求*！感谢[John Chadwick](https://github.com/jchv)的魔法，我们能够将这个 dll 打包在二进制文件中，并让 Windows 加载它，就像它存在于磁盘上一样。
|
||||
|
||||
Gophers 欢呼吧！单个二进制文件的设想依然存在！
|
||||
|
||||
### 新功能
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/wails-menus.png"
|
||||
width="60%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
有很多对原生菜单支持的请求。Wails 终于让您满意了。应用程序菜单现已可用，并且包括对大多数原生菜单功能的支持。这包括标准菜单项、复选框、单选组、子菜单和分隔符。
|
||||
|
||||
在 v1 中有大量的请求，要求能够更好地控制窗口本身。我很高兴地宣布，有专门用于此的新运行时 API。它功能丰富，支持多显示器配置。
|
||||
还有一个改进的对话框 API：现在，您可以拥有具有丰富配置的现代原生对话框，以满足您的所有对话框需求。
|
||||
|
||||
现在可以选择随项目生成 IDE 配置。这意味着如果您在受支持的 IDE 中打开您的项目，它已经被配置为构建和调试您的应用程序。目前支持 VSCode，但我们希望尽快支持其他 IDE，例如 Goland。
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/vscode.png"
|
||||
width="100%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
### 无需打包资源
|
||||
|
||||
v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS 文件。我很高兴地宣布，对于 v2，不需要以任何形式打包资源。
|
||||
想要加载本地图片？使用带有本地`src`路径的`<img>`标签。想使用很酷的字体吗？复制它并在你的 CSS 中添加它的路径。
|
||||
|
||||
> 哇，这听起来像一个网络服务器......
|
||||
|
||||
是的，它就像一个网络服务器一样工作，但它不是。
|
||||
|
||||
> 那么我如何包含我的资源？
|
||||
|
||||
您只需将`embed.FS`包含所有资产的单个文件传递到您的应用程序配置中。他们甚至不需要在顶级目录中——Wails 会为你解决这个问题。
|
||||
|
||||
### 全新的开发体验
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/browser.png"
|
||||
width="60%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
现在不需要打包资源，它启用了全新的开发体验。新`wails dev`命令将构建并运行您的应用程序，但它不使用`embed.FS`中的资源，而是直接从磁盘加载它们。
|
||||
|
||||
它还提供了附加功能：
|
||||
|
||||
- 热重载 - 对前端资产的任何更改都将触发并自动重载应用程序前端
|
||||
- 自动重新构建 - 对 Go 代码的任何更改都将重新构建并重新启动您的应用程序
|
||||
|
||||
除此之外，网络服务器将在端口 34115 上启动。这将为您的应用程序提供连接到它的任何浏览器。所有连接的 Web 浏览器都会响应系统事件，例如资产更改时的热重载。
|
||||
|
||||
在 Go 中，我们习惯于在应用程序中处理结构。将结构发送到我们的前端并将它们用作我们应用程序中的状态通常很有用。在 v1 中，这是一个非常手动的过程，对开发人员来说有点负担。
|
||||
我很高兴地宣布，在 v2 中，任何在开发模式下运行的应用程序都将自动为所有结构生成 Typescript 模型，这些结构是绑定方法的输入或输出参数。这实现了两个世界之间数据模型的无缝交换。
|
||||
除此之外，还会动态生成另一个 JS 模块来包装您的所有绑定方法。这为您的方法提供了 JSDoc，在您的 IDE 中提供代码完成和提示。当您在自动生成的包含 Go 代码的模块中点击 Tab 时自动导入数据模型，这真的很酷！
|
||||
|
||||
### 远程模板
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/remote.png"
|
||||
width="60%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
让应用程序快速启动并运行一直是 Wails 项目的一个关键目标。当我们推出时，我们试图涵盖当时的很多现代框架：react、vue 和 angular。前端开发的世界非常自以为是，快速发展且难以掌握！
|
||||
结果，我们发现我们的基本模板很快就过时了，这导致了维护问题。这也意味着我们没有用于最新和最伟大技术堆栈的酷炫现代模板。
|
||||
|
||||
在 v2 中，我希望通过让您能够自己创建和托管模板来增强社区的能力，而不是依赖于 Wails 项目。所以现在您可以使用社区支持的模板创建项目！
|
||||
我希望这将激励开发人员创建一个充满活力的项目模板生态系统。我对我们的开发者社区可以创造的东西感到非常兴奋！
|
||||
|
||||
### 结语
|
||||
|
||||
Wails v2 代表了该项目的新基础。此版本的目的是获得有关新方式的反馈，并在完整版本发布之前解决所有错误。欢迎提出您的意见。请直接反馈到 [v2 测试版](https://github.com/wailsapp/wails/discussions/828)讨论板。
|
||||
|
||||
为了达到这一点，经历了许多曲折和坎坷。部分原因是早期的技术决策需要改变，另一部分原因是我们花时间构建的一些核心问题的变通方式已经在上游得到了解决:Go 的 embed 特性就是一个很好的例子。幸运的是，一切都刚刚好，今天我们有了我们所能拥有的最好的解决方案。我相信等待是值得的 - 这在两个月前是完全不可能的。
|
||||
为了达到这一点，经历了许多曲折和坎坷。部分原因是早期的技术决策需要改变，另一部分原因是我们花时间构建的一些核心问题的变通方式已经在上游得到了解决：Go 的 embed 特性就是一个很好的例子。幸运的是，一切都刚刚好，今天我们有了我们所能拥有的最好的解决方案。我相信等待是值得的 - 这在两个月前是完全不可能的。
|
||||
|
||||
我还需要特别感谢 :pray: 以下人员，因为没有他们，这个版本就不会存在：
|
||||
|
||||
- [Misitebao](https://github.com/misitebao) - 中文翻译的绝对主力和和令人难以置信的漏洞发现者。
|
||||
- [Misitebao](https://github.com/misitebao) - 中文翻译的主要人员和和令人难以置信的漏洞发现者。
|
||||
- [John Chadwick](https://github.com/jchv) - 他在 [go-webview2](https://github.com/jchv/go-webview2) 和 [go-winloader](https://github.com/jchv/go-winloader) 方面的出色工作使 Windows 版本成为可能。
|
||||
- [Tad Vizbaras](https://github.com/tadvi) - 他的 winc 项目是走向纯粹的 Go Wails 的第一步。
|
||||
- [Tad Vizbaras](https://github.com/tadvi) - 他的[winc](https://github.com/tadvi/winc)项目是走向纯粹的 Go Wails 的第一步。
|
||||
- [Mat Ryer](https://github.com/matryer) - 他的支持、鼓励和反馈确实推动了项目向前发展。
|
||||
|
||||
最后，我还要特别感谢包括[JetBrains](https://www.jetbrains.com?from=Wails)在内的所有项目[赞助商](/docs/credits#sponsors)，他们的幕后支持以多种方式推动了该项目。
|
||||
|
||||
我期待看到在项目的下一个激动人心的阶段人们用 Wails 构建什么！
|
||||
|
||||
对了，最后一件事：如果您或您的公司发现 Wails 有用，可以考虑[赞助该项目](https://github.com/sponsors/leaanthony)。谢谢！
|
||||
|
||||
Lea.
|
||||
|
||||
PS：MacOS 和 Linux 用户不必感到被冷落了——移植到这个新基础上的工作正在积极进行中，大部分复杂的工作已经完成。坚持下去。。。
|
||||
PS：MacOS 和 Linux 用户不必感到被忽略了——移植到这个新基础上的工作正在积极进行中，大部分复杂的工作已经完成。坚持下去...
|
||||
|
||||
PPS：如果您或您的公司发现 Wails 有用，可以考虑[赞助该项目](https://github.com/sponsors/leaanthony)。谢谢！
|
||||
|
||||
@@ -26,5 +26,9 @@
|
||||
"sidebar.tutorialSidebar.category.Community": {
|
||||
"message": "社区交流",
|
||||
"description": "The label for category Community in sidebar tutorialSidebar"
|
||||
},
|
||||
"sidebar.tutorialSidebar.category.Showcase": {
|
||||
"message": "项目展示",
|
||||
"description": "The label for category Showcase in sidebar tutorialSidebar"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,9 +8,9 @@ sidebar_position: 1
|
||||
|
||||
## 概述
|
||||
|
||||
Wails 是一个可让你使用 Go 和 Web 技术编写桌面应用的项目。
|
||||
Wails 是一个可让您使用 Go 和 Web 技术编写桌面应用的项目。
|
||||
|
||||
将它看作为轻量快速的 “Electron for Go”。 你可以结合了丰富、现代的前端技术轻松地构建具有灵活性和强大功能的 Go 应用程序。
|
||||
将它看作为轻量快速的 “Electron for Go”。 您可以使用 Go 的灵活性和强大功能，结合丰富的现代前端，轻松的构建应用程序。
|
||||
|
||||
Wails 一点也不弱！这是 [xbar](https://xbarapp.com) - 一个使用 Wails 编写的 MacOS 桌面应用。它使用 Mac 的系统原生菜单，支持浅色和深色桌面主题，主窗口使用半透明，使其具有原生应用的
|
||||
“冰霜” 效果。
|
||||
@@ -21,12 +21,13 @@ Wails 一点也不弱！这是 [xbar](https://xbarapp.com) - 一个使用 Wails
|
||||
|
||||
## 原生元素
|
||||
|
||||
Wails 使用专门的库来处理原生元素，例如窗口、菜单、对话框等，因此你可以构建美观、功能丰富的桌面应用程序。 它不嵌入浏览器，因此性能高。相反，它使用平台的原生渲染引擎。在 Windows 上，是基于 Chromium 构建的新
|
||||
Microsoft Webview2 库。
|
||||
Wails 使用专门的库来处理原生元素，例如窗口、菜单、对话框等，因此您可以构建美观、功能丰富的桌面应用程序。
|
||||
|
||||
**它不嵌入浏览器**，因此性能高。相反，它使用平台的原生渲染引擎。在 Windows 上，是基于 Chromium 构建的新 Microsoft Webview2 库。
|
||||
|
||||
## Go 和 Javascript 互操作
|
||||
|
||||
Wails 自动使你的 Go 方法可用于 Javascript，因此你可以从前端按名称调用它们！它甚至会生成 Go 方法使用的结构的 Typescript 版本，因此你可以在 Go 和 Javascript 之间传递相同的数据结构。
|
||||
Wails 自动使您的 Go 方法可用于 Javascript，因此您可以从前端按名称调用它们！它甚至会生成 Go 方法使用的结构体的 Typescript 版本，因此您可以在 Go 和 Javascript 之间传递相同的数据结构。
|
||||
|
||||
## 运行时库
|
||||
|
||||
@@ -36,21 +37,21 @@ Wails 为 Go 和 Javascript 提供了一个运行时库，可以处理现代应
|
||||
|
||||
### 自动重新构建
|
||||
|
||||
当你在“dev”模式下运行你的应用程序时，Wails 会将你的应用程序构建为原生桌面应用程序，但会从磁盘读取你的资源。它将检测你的 Go 代码的任何更改，并自动重新构建和重新启动你的应用程序。
|
||||
当您在“dev”模式下运行您的应用程序时，Wails 会将您的应用程序构建为原生桌面应用程序，但会从磁盘读取您的资源。它将检测您的 Go 代码的任何更改，并自动重新构建和重新启动您的应用程序。
|
||||
|
||||
### 自动重新加载
|
||||
|
||||
当检测到你的应用程序资源发生更改时，你正在运行的应用程序将“重新加载”，几乎立即反馈你的更改。
|
||||
当检测到您的应用程序资源发生更改时，您正在运行的应用程序将“重新加载”，几乎立即反馈您的更改。
|
||||
|
||||
### 在浏览器中开发你的应用程序
|
||||
### 在浏览器中开发您的应用程序
|
||||
|
||||
如果你更喜欢在浏览器中调试和开发，那么我们可以满足你的需求。正在运行的应用程序还有一个网络服务器，它将在连接到它的任何浏览器中运行你的应用程序。当你的资源在磁盘上发生变化时，它会刷新。
|
||||
如果您更喜欢在浏览器中调试和开发，那么 Wails 可以满足您的需求。正在运行的应用程序还有一个网络服务器，它将在连接到它的任何浏览器中运行您的应用程序。当您的资源在磁盘上发生变化时，它会刷新。
|
||||
|
||||
## 生成原生二进制文件
|
||||
|
||||
当你准备好完成应用程序的最终构建时，CLI 会将其编译为单个可执行文件，并将所有资源打包到其中。在 Windows 和 MacOS
|
||||
上，可以创建用于分发的原生包。使用打包器后生成的资源（图标、info.plist、清单文件等）是你项目的一部分，可以自定义，让你完全控制应用程序的构建方式。
|
||||
当您准备好完成应用程序的最终构建时，CLI 会将其编译为单个可执行文件，并将所有资源打包到其中。在 Windows 和 MacOS
|
||||
上，可以创建用于分发的原生包。使用打包工具后生成的资源（图标、info.plist、清单文件等）是您项目的一部分，可以自定义，让您完全控制应用程序的构建方式。
|
||||
|
||||
## 工具
|
||||
|
||||
Wails CLI 提供了一种简单的方法来生成、构建和打包你的应用程序。可以从许多入门模板中进行选择，以快速启动和运行！
|
||||
Wails CLI 提供了一种简单的方法来生成、构建和打包您的应用程序。它将完成创建图标的繁重工作，使用最佳设置编译您的应用程序，并提供可分发的、可用于生产的二进制文件。可以从许多入门模板中进行选择，以快速启动和运行！
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
sidebar_position: 50
|
||||
---
|
||||
|
||||
# 社区模板
|
||||
|
||||
此页面用作社区支持的模板列表。请提交一个包含您的模板的 PR（点击页面底部的`编辑此页`）。要构建您自己的模板，请参考[模板](/docs/guides/templates)指南。
|
||||
|
||||
要使用这些模板，请运行 `wails init -n "你的项目名" -t [下面的链接]`
|
||||
|
||||
示例：`wails init -n "Your Project Name" -t https://github.com/misitebao/wails-template-vue`
|
||||
|
||||
:::warning 注意
|
||||
|
||||
仅安装你信任的远程模板。 如果你不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。 **Wails 项目对第 3 方模板不承担任何责任！**
|
||||
|
||||
:::
|
||||
|
||||
## Vue
|
||||
|
||||
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - 基于 Vue 和 Vue-Router 的 Wails 模板
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Community",
|
||||
"position": 5
|
||||
"position": 50
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
# EncryptEasy
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/encrypteasy.jpg"></img><br/>
|
||||
</p>
|
||||
|
||||
**[EncryptEasy](https://www.encrypteasy.app) is a simple and easy to use PGP encryption tool, managing all your and your contacts keys. Encryption should be simple. Developed with Wails.**
|
||||
|
||||
Encrypting messages using PGP is the industry standard. Everyone has a private and a public key. Your private key, well, needs to be kept private so only you can read messages. Your public key is distributed to anyone who wants to send you secret, encrypted messages. Managing keys, encrypting messages and decrypting messages should be a smooth experience. EncryptEasy is all about making it easy.
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
# FileHound Export Utility
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/filehound.jpg"></img><br/>
|
||||
</p>
|
||||
|
||||
|
||||
[FileHound Export Utility](https://www.filehound.co.uk/) FileHound is a cloud document management platform made for secure file retention, business process automation and SmartCapture capabilities.
|
||||
|
||||
The FileHound Export Utility allows FileHound Administrators the ability to run a secure document and data extraction tasks for alternative back-up and recovery purposes. This application will download all documents and/or meta data saved in FileHound based on the filters you choose. The metadata will be exported in both JSON and XML formats.
|
||||
|
||||
Backend built with:
|
||||
Go 1.15
|
||||
Wails 1.11.0
|
||||
go-sqlite3 1.14.6
|
||||
go-linq 3.2
|
||||
|
||||
Frontend with:
|
||||
Vue 2.6.11
|
||||
Vuex 3.4.0
|
||||
Typescript
|
||||
Tailwind 1.9.6
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
# Molley Wallet
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/mollywallet.png"></img><br/>
|
||||
</p>
|
||||
|
||||
[Molly Wallet](https://github.com/grvlle/constellation_wallet/) the official $DAG wallet of the Constellation Network. It'll let users interact with the Hypergraph Network in various ways, not limited to producing $DAG transactions.
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
# Optimus
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/optimus.png"></img><br/>
|
||||
</p>
|
||||
|
||||
[Optimus](https://github.com/splode/optimus) is a desktop image optimization application. It supports conversion and compression between WebP, JPEG, and PNG image formats.
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
# Portfall
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/portfall.gif"></img><br/>
|
||||
</p>
|
||||
|
||||
[Portfall](https://github.com/rekon-oss/portfall) - A desktop k8s port-forwarding portal for easy access to all your cluster UIs
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
# Surge
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/surge.png"></img><br/>
|
||||
</p>
|
||||
|
||||
[Surge](https://surge.rule110.io/) is a p2p filesharing app designed to utilize blockchain technologies to enable 100% anonymous file transfers. Surge is end-to-end encrypted, decentralized and open source.
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
|
||||
# Wally
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/wally.png"></img><br/>
|
||||
</p>
|
||||
|
||||
[Wally](https://ergodox-ez.com/pages/wally) is the official firmware flasher for [Ergodox](https://ergodox-ez.com/) keyboards. It looks great and is a fantastic example of what you can achieve with Wails: the ability to combine the power of Go and the rich graphical tools of the web development world.
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
# Wombat
|
||||
|
||||
<p style={{"text-align": "center"}}>
|
||||
<img src="/img/showcase/wombat.png"></img><br/>
|
||||
</p>
|
||||
|
||||
|
||||
[Wombat](https://github.com/rogchap/wombat) is a cross platform gRPC client.
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar_position: 1
|
||||
|
||||
此页面用作社区支持的模板列表。请提交一个包含您的模板的 PR（点击页面底部的`编辑此页`）。要构建您自己的模板，请参考[模板](/docs/guides/templates)指南。
|
||||
|
||||
要使用这些模板，请运行 `wails init -n "你的项目名" -t [下面的链接]`
|
||||
要使用这些模板，请运行 `wails init -n "您的项目名" -t [下面的链接]`
|
||||
|
||||
示例：`wails init -n "Your Project Name" -t https://github.com/misitebao/wails-template-vue`
|
||||
|
||||
@@ -14,10 +14,12 @@ sidebar_position: 1
|
||||
|
||||
**Wails 项目不维护也不对第 3 方模板负责**
|
||||
|
||||
如果你不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。
|
||||
如果您不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。
|
||||
|
||||
:::
|
||||
|
||||
## Vue
|
||||
|
||||
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - 基于 Vue 和 Vue-Router 的 Wails 模板
|
||||
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - 使用 Vite 的 Vue 3 TypeScript(以及添加功能的说明)
|
||||
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - 使用 Vite, Vuex, Vue Router, Sass, 和 ESLint + Prettier 的 Vue 3 TypeScript
|
||||
|
||||
@@ -5,7 +5,7 @@ sidebar_position: 99
|
||||
# 荣誉墙
|
||||
|
||||
- [Lea Anthony](https://github.com/leaanthony) - 项目所有者，首席开发人员
|
||||
- [Misitebao](https://github.com/misitebao) - 中文文档，Windows 测试，寻找漏洞
|
||||
- [Misitebao](https://github.com/misitebao) - 中文文档，Windows 测试，漏洞发现者
|
||||
- [Travis McLane](https://github.com/tmclane) - 处理交叉编译相关工作, MacOS 平台的测试
|
||||
- [Byron Chris](https://github.com/bh90210) - Linux 发行版指导，Linux 平台的测试
|
||||
|
||||
@@ -61,6 +61,12 @@ sidebar_position: 99
|
||||
<a href="https://github.com/marcus-crane" style="width:50px">
|
||||
<img src="https://github.com/marcus-crane.png?size=50" width="50"/>
|
||||
</a>
|
||||
<a href="https://github.com/codydbentley" style="width:65px">
|
||||
<img src="https://github.com/codydbentley.png?size=65" width="65"/>
|
||||
</a>
|
||||
<a href="https://github.com/bbergshaven" style="width:45px">
|
||||
<img src="https://github.com/bbergshaven.png?size=45" width="45"/>
|
||||
</a>
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Getting Started",
|
||||
"position": 2
|
||||
"position": 10
|
||||
}
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
---
|
||||
title: 编译你的项目
|
||||
title: 编译您的项目
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# 编译你的项目
|
||||
# 编译您的项目
|
||||
|
||||
从项目目录，运行`wails build`。 这将编译你的项目并将构建的二进制文件保存在 `build/bin` 目录中。
|
||||
从项目目录，运行`wails build`。 这将编译您的项目并将构建的可用于生产的二进制文件保存在 `build/bin` 目录中。
|
||||
|
||||
如果你运行二进制文件，你应该会看到默认应用程序：
|
||||
如果您运行二进制文件，您应该会看到默认应用程序：
|
||||
|
||||
待定
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/defaultproject.png"
|
||||
width="50%"
|
||||
style={{ "box-shadow": "rgb(255 255 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px" }}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
有关编译选项的更多详细信息，请参阅[构建命令](/docs/reference/cli#构建)。
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
---
|
||||
title: 开发你的应用程序
|
||||
title: 开发您的应用程序
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# 开发你的应用程序
|
||||
# 开发您的应用程序
|
||||
|
||||
你可以通过运行`wails dev`从项目目录在开发模式下运行你的应用程序。这将执行以下操作：
|
||||
您可以通过运行`wails dev`从项目目录在开发模式下运行您的应用程序。这将执行以下操作：
|
||||
|
||||
- 构建你的应用程序并运行它
|
||||
- 构建您的应用程序并运行它
|
||||
- 监听 Go 文件中的修改并在更改时重新构建/重新运行
|
||||
- 设置将通过浏览器为你的应用程序提供服务的[网络服务器](http://localhost:34115)。这允许你使用你喜欢的浏览器扩展。你甚至可以从控制台调用 Go 代码。
|
||||
- 设置将通过浏览器为您的应用程序提供服务的[网络服务器](http://localhost:34115)。这允许您使用您喜欢的浏览器扩展。您甚至可以从控制台调用 Go 代码。
|
||||
|
||||
首先，在项目目录中运行`wails dev`。可以在[此处](/docs/reference/cli#开发)找到有关这方面的更多信息。
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@ sidebar_position: 2
|
||||
|
||||
## 项目生成
|
||||
|
||||
现在 CLI 已安装，你可以使用该`wails init`命令生成一个新项目。
|
||||
现在 CLI 已安装，您可以使用该`wails init`命令生成一个新项目。
|
||||
|
||||
为了快速启动和运行，你可以通过运行`wails init -n myproject`生成一个默认项目。这将创建一个名为`myproject`的目录，并使用默认模板填充它。
|
||||
为了快速启动和运行，您可以通过运行`wails init -n myproject`生成一个默认项目。这将创建一个名为`myproject`的目录，并使用默认模板填充它。
|
||||
|
||||
其他项目模板也可用，可以使用 `wails init -l`列出。
|
||||
也可以使用 `wails init -l`列出其他可用模板。
|
||||
|
||||
要查看其他可用选项，你可以运行 `wails init -help`。 更多详细信息可以在 [初始化命令](/docs/reference/cli#初始化)中找到。
|
||||
要查看其他可用选项，您可以运行 `wails init -help`。 更多详细信息可以在 [初始化命令](/docs/reference/cli#初始化)中找到。
|
||||
|
||||
## 项目布局
|
||||
|
||||
@@ -26,6 +26,8 @@ Wails 项目具有以下布局：
|
||||
│ ├── darwin/
|
||||
│ └── windows/
|
||||
├── frontend/
|
||||
├── go.mod
|
||||
├── go.sum
|
||||
├── main.go
|
||||
└── wails.json
|
||||
```
|
||||
@@ -39,7 +41,11 @@ Wails 项目具有以下布局：
|
||||
- `/build/darwin/` - Mac 特定的项目文件
|
||||
- `/build/windows/` - Windows 特定的项目文件
|
||||
- `/wails.json` - 项目配置
|
||||
- `/go.mod` - Go 模块文件
|
||||
- `/go.sum` - Go 模块校验文件
|
||||
|
||||
`frontend`目录没有特定于 Wails 的内容，可以是您选择的任何前端项目。
|
||||
|
||||
`build`目录在构建过程中使用。这些文件可以更新以自定义您的构建。如果文件从构建目录中删除，将重新生成默认版本。
|
||||
|
||||
`go.mod`中的默认模块名称是“changeme”。您应该将其更改为更合适的内容。
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
title: 安装
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
@@ -15,27 +14,27 @@ sidebar_position: 1
|
||||
|
||||
Wails 有许多安装前需要的常见依赖项：
|
||||
|
||||
- Go 1.16+
|
||||
- npm LTS
|
||||
- Go 1.17+
|
||||
- npm (Node 14+)
|
||||
|
||||
### Go
|
||||
|
||||
从 [Go 下载页面](https://golang.org/dl/) 下载 Go。
|
||||
从[Go 下载页面](https://golang.org/dl/)下载 Go。
|
||||
|
||||
确保你遵守官方的 [Go 安装说明](https://golang.org/doc/install#install)。你还需要确保你的 `PATH` 环境变量包含你的 `~/go/bin` 目录路径。 重启终端并执行以下命令检查：
|
||||
确保您遵守官方的[Go 安装说明](https://golang.org/doc/install#install)。您还需要确保您的 `PATH` 环境变量包含您的 `~/go/bin` 目录路径。 重启终端并执行以下命令检查：
|
||||
|
||||
- 检查 Go 是否安装正确： `go version`
|
||||
- 检查 "~/go/bin" 是否在你的 PATH 变量中： `echo $PATH | grep go/bin`
|
||||
- 检查 "~/go/bin" 是否在您的 PATH 变量中： `echo $PATH | grep go/bin`
|
||||
|
||||
### npm
|
||||
|
||||
从 [Node 下载页面](https://nodejs.org/en/download/) 下载 Npm。最好使用最新版本，因为这是我们通常会测试的版本。
|
||||
从[Node 下载页面](https://nodejs.org/en/download/)下载 Npm。最好使用最新版本，因为这是我们通常会测试的版本。
|
||||
|
||||
运行 `npm --version` 进行校验。
|
||||
|
||||
## 平台指定依赖关系
|
||||
|
||||
你还需要安装指定平台的依赖项：
|
||||
您还需要安装指定平台的依赖项：
|
||||
|
||||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
@@ -51,7 +50,7 @@ import TabItem from "@theme/TabItem";
|
||||
<TabItem value="Windows">
|
||||
Wails 要求安装
|
||||
<a href="https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/">WebView2</a>
|
||||
运行时。一些 Windows 已经默认安装了这个。你可以使用 <code>wails doctor</code>
|
||||
运行时。一些 Windows 已经默认安装了这个。您可以使用 <code>wails doctor</code>
|
||||
命令进行检查（见下文）。
|
||||
</TabItem>
|
||||
<TabItem value="MacOS">即将推出...</TabItem>
|
||||
@@ -60,7 +59,7 @@ import TabItem from "@theme/TabItem";
|
||||
|
||||
## 可选依赖
|
||||
|
||||
- [UPX](https://upx.github.io/) 用于压缩你的应用程序。
|
||||
- [UPX](https://upx.github.io/) 用于压缩您的应用程序。
|
||||
|
||||
## 安装 Wails
|
||||
|
||||
@@ -68,4 +67,4 @@ import TabItem from "@theme/TabItem";
|
||||
|
||||
## 系统检查
|
||||
|
||||
运行 `wails doctor` 将检查你是否安装了正确的依赖项。如果没有，它会就缺少的内容提供建议并帮助纠正任何问题。
|
||||
运行 `wails doctor` 将检查您是否安装了正确的依赖项。如果没有，它会就缺少的内容提供建议并帮助纠正任何问题。
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Guides",
|
||||
"position": 4
|
||||
"position": 50
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# 应用开发
|
||||
|
||||
使用 Wails 开发应用程序没有硬性规定，但有一些基本准则。
|
||||
@@ -140,7 +136,7 @@ func main() {
|
||||
|
||||
## 资源
|
||||
|
||||
Wails v2 处理资源的方式的伟大之处在于它没有！你唯一需要给 Wails 的是一个 `embed.FS`， 如何做到这一点完全取决于你。您可以像 vanilla 模板一样使用 vanilla html/css/js 文件。你可能有一些复杂的构建系统，但这并不影响。
|
||||
Wails v2 处理资源的方式的伟大之处在于它没有！您唯一需要给 Wails 的是一个 `embed.FS`， 如何做到这一点完全取决于您。您可以像 vanilla 模板一样使用 vanilla html/css/js 文件。您可能有一些复杂的构建系统，但这并不影响。
|
||||
|
||||
当运行`wails build`时，它会检查项目根目录的`wails.json`文件。文件中有 2 个字段会被读取：
|
||||
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
sidebar_position: 99
|
||||
---
|
||||
|
||||
# 参与贡献
|
||||
|
||||
这个页面是关于如何贡献 Wails 项目的指南。
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# 无边框应用
|
||||
|
||||
Wails 支持无边框应用程序。这可以通过使用[应用程序参数选项](/docs/reference/options#应用程序参数选项)中的[无边框](/docs/reference/options#无边框)字段来实现。
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
# 前端
|
||||
|
||||
## 脚本注入
|
||||
|
||||
当 Wails 为您的`index.html`提供服务时，默认情况下，它会将 2 个脚本注入`<body>`标签以加载`/wails/bindings.js`和`/wails/runtime.js`。 这些文件分别安装绑定和运行时。
|
||||
|
||||
下面的代码显示了这些默认注入的位置：
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>injection example</title>
|
||||
<link rel="stylesheet" href="/main.css" />
|
||||
<!-- <script src="/wails/ipc.js"></script> -->
|
||||
<!-- <script src="/wails/runtime.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body data-wails-drag>
|
||||
<div class="logo"></div>
|
||||
<div class="result" id="result">Please enter your name below 👇</div>
|
||||
<div class="input-box" id="input" data-wails-no-drag>
|
||||
<input class="input" id="name" type="text" autocomplete="off" />
|
||||
<button class="btn" onclick="greet()">Greet</button>
|
||||
</div>
|
||||
|
||||
<script src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 覆盖默认脚本注入
|
||||
|
||||
为了给开发人员提供更大的灵活性，有一个`meta`标签可用于自定义此行为：
|
||||
|
||||
```html
|
||||
<meta name="wails-options" content="[options]" />
|
||||
```
|
||||
|
||||
选项如下：
|
||||
|
||||
| 值 | 描述 |
|
||||
| ------------------- | -------------------------------- |
|
||||
| noautoinjectruntime | 禁用自动注入 `/wails/runtime.js` |
|
||||
| noautoinjectipc | 禁用自动注入 `/wails/ipc.js` |
|
||||
| noautoinject | 禁用所有脚本自动注入 |
|
||||
|
||||
可以使用多个选项，前提是它们以逗号分隔。
|
||||
|
||||
此代码完全有效并且与自动注入版本的操作相同：
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>injection example</title>
|
||||
<meta name="wails-options" content="noautoinject" />
|
||||
<link rel="stylesheet" href="/main.css" />
|
||||
</head>
|
||||
|
||||
<body data-wails-drag>
|
||||
<div class="logo"></div>
|
||||
<div class="result" id="result">Please enter your name below 👇</div>
|
||||
<div class="input-box" id="input" data-wails-no-drag>
|
||||
<input class="input" id="name" type="text" autocomplete="off" />
|
||||
<button class="btn" onclick="greet()">Greet</button>
|
||||
</div>
|
||||
|
||||
<script src="/wails/ipc.js"></script>
|
||||
<script src="/wails/runtime.js"></script>
|
||||
<script src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,107 @@
|
||||
# 集成开发环境
|
||||
|
||||
Wails 旨在提供出色的开发体验。为此，我们现在支持生成 IDE 特定配置以提供更顺畅的项目设置。
|
||||
|
||||
目前，我们支持[Visual Studio Code](https://code.visualstudio.com/)，但我们希望尽快支持其他 IDE，例如 Goland。
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
<p className="text--center">
|
||||
<img src="/img/vscode.png" style={{ width: "75%" }}></img>
|
||||
</p>
|
||||
|
||||
使用`-ide vscode`标志生成项目时，IDE 文件将与其他项目文件一起创建。这些文件放置在`.vscode`目录中，并为调试应用程序提供正确的配置。
|
||||
|
||||
生成的 2 个文件是`tasks.json`和`launch.json`. 以下是为默认 vanilla 项目生成的文件：
|
||||
|
||||
```json title="tasks.json"
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "build",
|
||||
"type": "shell",
|
||||
"options": {
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
"command": "go",
|
||||
"args": ["build", "-tags", "dev", "-gcflags", "all=-N -l", "-o", "build/bin/myproject.exe"]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```json title="launch.json"
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Wails: Debug myproject",
|
||||
"type": "go",
|
||||
"request": "launch",
|
||||
"mode": "exec",
|
||||
"program": "${workspaceFolder}/build/bin/myproject.exe",
|
||||
"preLaunchTask": "build",
|
||||
"cwd": "${workspaceFolder}",
|
||||
"env": {},
|
||||
"args": ["-assetdir", "frontend/src"]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 配置安装和构建步骤
|
||||
|
||||
`tasks.json`文件对于默认项目很简单，因为不需要`npm install`或`npm run build`的步骤。对于具有前端构建步骤的项目，例如 svelte 模板，我们需要编辑`tasks.json`以添加安装和构建步骤：
|
||||
|
||||
```json title="tasks.json"
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "npm install",
|
||||
"type": "npm",
|
||||
"script": "install",
|
||||
"options": {
|
||||
"cwd": "${workspaceFolder}/frontend"
|
||||
},
|
||||
"presentation": {
|
||||
"clear": true,
|
||||
"panel": "shared",
|
||||
"showReuseMessage": false
|
||||
},
|
||||
"problemMatcher": []
|
||||
},
|
||||
{
|
||||
"label": "npm run build",
|
||||
"type": "npm",
|
||||
"script": "build",
|
||||
"options": {
|
||||
"cwd": "${workspaceFolder}/frontend"
|
||||
},
|
||||
"presentation": {
|
||||
"clear": true,
|
||||
"panel": "shared",
|
||||
"showReuseMessage": false
|
||||
},
|
||||
"problemMatcher": []
|
||||
},
|
||||
{
|
||||
"label": "build",
|
||||
"type": "shell",
|
||||
"options": {
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
"command": "go",
|
||||
"args": ["build", "-tags", "dev", "-gcflags", "all=-N -l", "-o", "build/bin/vscode.exe"],
|
||||
"dependsOn": ["npm install", "npm run build"]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
:::info 功能改善
|
||||
|
||||
在未来，我们希望生成一个自动包含安装和构建步骤的`tasks.json`。
|
||||
|
||||
:::
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
# 手动构建
|
||||
|
||||
Wails CLI 为项目做了很多繁重的工作，但有时需要手动构建项目。本文档将讨论 CLI 执行的不同操作以及如何以不同方式实现这一点。
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
---
|
||||
title: 从 v1 迁移
|
||||
sidebar_position: 98
|
||||
---
|
||||
|
||||
# 从 v1 迁移
|
||||
|
||||
## 概述
|
||||
@@ -126,9 +121,9 @@ func (a *App) startup(ctx context.Context) {
|
||||
|
||||
这意味着生成单个 JS 和 CSS 文件的责任在于开发人员。这本质上需要使用繁琐的打包程序，例如 webpack。
|
||||
|
||||
在 v2 中，Wails 不对你的前端资源做任何预设，就像网络服务器一样。你的所有应用程序资源都作为`embed.FS`.
|
||||
在 v2 中，Wails 不对您的前端资源做任何预设，就像网络服务器一样。您的所有应用程序资源都作为`embed.FS`.
|
||||
|
||||
**这意味着不需要打包你的资源、将图像编码为 Base64 或尝试使用奇葩的打包器配置来使用自定义字体。**
|
||||
**这意味着不需要打包您的资源、将图像编码为 Base64 或尝试使用奇葩的打包工具配置来使用自定义字体。**
|
||||
|
||||
在启动时，Wails 将扫描给定的`embed.FS`的`index.html`并将其位置用作所有其他应用程序资源的根路径 - 就像网络服务器一样。
|
||||
|
||||
@@ -161,7 +156,7 @@ func main() {
|
||||
}
|
||||
```
|
||||
|
||||
当然，如果你愿意，也可以使用打包器。唯一的要求是在 Wails 中使用`embed.FS`,将最终的程序资源目录传递给[应用程序参数选项](/docs/reference/options#应用程序参数选项)的`Assets`键。
|
||||
当然，如果您愿意，也可以使用打包工具。唯一的要求是在 Wails 中使用`embed.FS`,将最终的程序资源目录传递给[应用程序参数选项](/docs/reference/options#应用程序参数选项)的`Assets`键。
|
||||
|
||||
### 项目配置
|
||||
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
sidebar_position: 15
|
||||
---
|
||||
|
||||
# 模板
|
||||
|
||||
Wails 从预先创建的模板生成项目。在 v1 中，这是一组难以维护的项目，这些项目可能会过时。在 v2 中，为了增强社区的能力，为模板添加了一些新功能：
|
||||
@@ -79,7 +75,7 @@ Renaming package-lock.json -> package-lock.tmpl.json...
|
||||
- 一旦文件准备完毕，就可以通过运行命令来测试它：`wails init -n my-vue3-project -t .\wails-vue3-template\`
|
||||
- 要测试新项目，请运行：`cd my-vue3-project` then `wails build`
|
||||
- 项目编译完成后，运行它：`.\build\bin\my-vue3-project.exe`
|
||||
- 你应该有了一个功能齐全的 Vue3 应用程序：
|
||||
- 您应该有了一个功能齐全的 Vue3 应用程序：
|
||||
|
||||
<div className="text--center">
|
||||
<img src="/img/vue3-template.png" width="50%" />
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Windows 系统
|
||||
|
||||
此页面包含了在 Windows 上开发 Wails 应用程序相关的其他指南。
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
---
|
||||
title: 它如何工作
|
||||
sidebar_position: 3
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
# 它如何工作？
|
||||
|
||||
Wails 应用程序是一个标准的 Go 应用程序，带有一个 webkit 前端。Wails 应用程序的架构是：
|
||||
Wails 应用程序是一个带有一个 webkit 前端的标准的 Go 应用程序。 应用程序的 Go 部分由应用程序代码和一个运行时库组成，
|
||||
该库提供了许多有用的操作，例如控制应用程序窗口。 前端是一个 webkit 窗口，将显示前端资源。 前端还可以使用运行时库的 Javascript 版本。
|
||||
最后，可以将 Go 方法绑定到前端，这些将显示为可以调用的 Javascript 方法，就像它们是原生 Javascript 方法一样。
|
||||
|
||||
<div className="text--center">
|
||||
<img src="/img/architecture.svg" width="75%" />
|
||||
</div>
|
||||
|
||||
## 后端
|
||||
## 主应用程序
|
||||
|
||||
### 概述
|
||||
|
||||
主应用程序，通常称为“后端”，由对`wails.Run()`的调用组成. 它接收应用程序配置，该配置说明应用程序应该有多大尺寸，标题栏应该显示什么，使用什么资源等。一个基本的应用程序可能看起来像这样：
|
||||
主应用程序由对`wails.Run()`的调用组成. 它接受描述应用程序窗口大小、窗口标题、要使用的资源等的应用程序配置。基本应用程序可能如下所示：
|
||||
|
||||
```go title="main.go"
|
||||
package main
|
||||
@@ -82,12 +84,12 @@ func (b *App) Greet(name string) string {
|
||||
|
||||
#### 资源
|
||||
|
||||
`Assets` 选项是必须的，因为你不能拥有没有前端资源的 Wails 应用程序。这些资源可以是你希望在 Web 应用程序中找到的任何文件 - html、js、css、svg、png 等。
|
||||
不需要生成资源包- 纯文件即可。当应用程序启动时，它将尝试从你的资源中加载`index.html`，并且那时起前端基本上将作为浏览器工作。值得注意的是 embed.FS，
|
||||
文件所在的位置没有要求。嵌入路径很可能使用了相对于你的主应用程序代码的嵌套目录，例如 `frontend/dist`：
|
||||
`Assets` 选项是必须的，因为您不能拥有没有前端资源的 Wails 应用程序。这些资源可以是您希望在 Web 应用程序中找到的任何文件 - html、js、css、svg、png 等。
|
||||
**不需要生成资源包**- 纯文件即可。当应用程序启动时，它将尝试从您的资源中加载`index.html`，并且那时起前端基本上将作为浏览器工作。值得注意的是 embed.FS，
|
||||
文件所在的位置没有要求。嵌入路径很可能使用了相对于您的主应用程序代码的嵌套目录，例如 `frontend/dist`：
|
||||
|
||||
```go title="main.go"
|
||||
// go:embed frontend/dist
|
||||
//go:embed frontend/dist
|
||||
var assets embed.FS
|
||||
```
|
||||
|
||||
@@ -95,23 +97,30 @@ var assets embed.FS
|
||||
|
||||
由于生产二进制文件使用中包含在`embed.FS`的文件，因此应用程序不需要附带任何外部文件。
|
||||
|
||||
在`dev`模式下，资源从磁盘加载，任何更改都会导致“实时重新加载”。资源的位置需要传递给`dev`命令，并且很可能与嵌入路径相同。更多细节可以在[应用程序开发指南](/docs/guides/application-development)中找到。
|
||||
当使用`wails dev`命令在”dev“模式下，资源从磁盘加载，任何更改都会导致“实时重新加载”。资源的位置需要使用`-assetdir`传递给`wails dev`命令，并且很可能与嵌入路径相同。
|
||||
希望`embed.FS`将来我们可以从它本身计算出来。更多细节可以在[应用程序开发指南](/docs/guides/application-development)中找到。
|
||||
|
||||
#### 应用程序生命周期回调
|
||||
|
||||
在即将加载前端`index.html`之前，对 [应用启动回调](/docs/reference/options#应用启动回调) 中提供的函数进行回调。一个标准的 Go 上下文被传递给这个方法。
|
||||
调用运行时需要此上下文，因此标准模式是保存此时对它的引用。在应用程序关闭之前，以同样的方式调用 [应用退出回调](/docs/reference/options#应用退出回调) 回调，
|
||||
再次使用上下文。当前端加载所有资源时，还有一个 [前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调) 回调。
|
||||
再次使用上下文。当前端完成加载`index.html`中所有资源时，还有一个 [前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调) 回调，相当于 Javascript 中的`body onload`事件。
|
||||
|
||||
#### 方法绑定
|
||||
|
||||
`Bind`选项是 Wails 应用程序中最重要的参数选项之一。它指定向前端暴露哪些结构方法。当应用程序启动时，它会检查 `Bind` 中列出的结构实例，确定哪些方法是公开的（以大写字母开头），并将生成前端可以调用的那些方法的 Javascript 版本。
|
||||
`Bind`选项是 Wails 应用程序中最重要的参数选项之一。它指定向前端暴露哪些结构方法。当应用程序启动时，它会检查 `Bind` 中列出的结构实例，
|
||||
确定哪些方法是公开的（以大写字母开头），并将生成前端可以调用的那些方法的 Javascript 版本。
|
||||
|
||||
这些方法位于前端 `window.go.<packagename>.<struct>.<method>`。在上面的例子中，我们绑定 `app`，它有一个公开方法 `Greet`。这可以通过在 `Javascript` 中用 `window.go.main.App.Greet`调用。这些方法返回一个 Promise。成功的调用将导致 Go 调用的第一个返回值被传递给 resolve 处理程序。一个不成功的调用是将一个 Go 方法的第二个错误类型返回值传递回调用者。这是通过`reject`传回的。在上面的例子中，Greet 只返回一个字符串，所以 `Javascript` 调用永远不会`reject` - 除非将无效数据传递给它。
|
||||
这些方法位于前端 `window.go.<packagename>.<struct>.<method>`。在上面的例子中，我们绑定 `app`，它有一个公开方法 `Greet`。
|
||||
这可以通过在 `Javascript` 中用 `window.go.main.App.Greet`调用。这些方法返回一个 Promise。成功的调用将导致 Go 调用的第一个返回值被传递给 resolve 处理程序。
|
||||
一个不成功的调用是将一个 Go 方法的第二个错误类型返回值传递回调用者。这是通过`reject`传回的。在上面的例子中，Greet 只返回一个字符串，
|
||||
所以 `Javascript` 调用永远不会`reject` - 除非将无效数据传递给它。
|
||||
|
||||
所有数据类型都在 Go 和 Javascript 之间正确转换。包括结构体。如果你从 Go 调用返回一个结构体，它将作为 `Javascript` Map 返回到你的前端。注意：如果你想使用结构体，你必须为你的结构体字段定义`json` 标签！也可以将结构体发送回 Go。任何作为期望结构的参数传递的 Javascript Map 都将转换为该结构类型。为了使这个过程更容易，在 `dev`模式下，会生成一个 TypeScript 模块，定义绑定方法中使用的所有结构类型。使用此模块，可以构建原生 Javascript 对象并将其发送到 Go 代码。
|
||||
所有数据类型都在 Go 和 Javascript 之间正确转换。包括结构体。如果您从 Go 调用返回一个结构体，它将作为 `Javascript` Map 返回到您的前端。
|
||||
注意：如果您想使用结构体，您必须为您的结构体字段定义`json` 标签！也可以将结构体发送回 Go。任何作为期望结构的参数传递的 Javascript Map 都将转换为该结构类型。
|
||||
为了使这个过程更容易，在 `dev`模式下，会生成一个 TypeScript 模块，定义绑定方法中使用的所有结构类型。使用此模块，可以构建原生 Javascript 对象并将其发送到 Go 代码。
|
||||
|
||||
有关绑定的更多信息可以在[绑定示例](/docs/guides/application-development#binding-methods)页面中找到。
|
||||
关于绑定的更多信息可以在[应用程序开发指南](/docs/guides/application-development)的[绑定方法](/docs/guides/application-development#绑定方法)一节中找到。
|
||||
|
||||
## 前端
|
||||
|
||||
@@ -126,7 +135,8 @@ var assets embed.FS
|
||||
|
||||
### 调用绑定的 Go 方法
|
||||
|
||||
所有绑定的 Go 方法都可以在`window.go.<package>.<struct>.<method>`调用. 如上一节所述，这些方法返回一个 Promise，其中成功调用将值返回给 resolve 处理程序，错误将值返回给 reject 处理程序。
|
||||
所有绑定的 Go 方法都可以在`window.go.<package>.<struct>.<method>`调用. 如上一节所述，这些方法返回一个 Promise，
|
||||
其中成功调用将值返回给 resolve 处理程序，错误将值返回给 reject 处理程序。
|
||||
|
||||
```go title="mycode.js"
|
||||
window.go.main.App.Greet("Bill").then((result) => {
|
||||
@@ -251,7 +261,7 @@ export class Person {
|
||||
}
|
||||
```
|
||||
|
||||
只要你将 TypeScript 作为前端构建配置的一部分，你就可以通过以下方式使用这些模型：
|
||||
只要您将 TypeScript 作为前端构建配置的一部分，您就可以通过以下方式使用这些模型：
|
||||
|
||||
```js title="mycode.js"
|
||||
import go from "./wailsjs/go/bindings";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Reference",
|
||||
"position": 3
|
||||
"position": 40
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ Wails CLI 有许多用于管理项目的命令。所有命令都以此方式运
|
||||
| -l | 可用项目模板列表 | |
|
||||
| -q | 禁止输出到控制台 | |
|
||||
| -t "template name" | 要使用的项目模板。这可能是在 github 上托管的远程模板的 URL 的名称。 | vanilla |
|
||||
| -ide | 生成 IDE 项目文件 | |
|
||||
| -ide | 生成 IDE 项目文件 | |
|
||||
| -f | 强制构建应用 | false |
|
||||
|
||||
示例：
|
||||
@@ -41,13 +41,13 @@ Wails CLI 有许多用于管理项目的命令。所有命令都以此方式运
|
||||
|
||||
**Wails 项目不维护也不对第 3 方模板负责**
|
||||
|
||||
如果你不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。
|
||||
如果您不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。
|
||||
|
||||
:::
|
||||
|
||||
## 构建
|
||||
|
||||
`wails build`用于将你的项目编译为生产可用的二进制文件。
|
||||
`wails build`用于将您的项目编译为生产可用的二进制文件。
|
||||
|
||||
| 标志 | 描述 | 默认 |
|
||||
| :------------------- | :----------------------------------------------------- | :------- |
|
||||
@@ -68,7 +68,7 @@ Wails CLI 有许多用于管理项目的命令。所有命令都以此方式运
|
||||
|
||||
## 诊断检查
|
||||
|
||||
`wails doctor` 将运行诊断程序以确保你的系统已准备好进行开发。
|
||||
`wails doctor` 将运行诊断程序以确保您的系统已准备好进行开发。
|
||||
|
||||
示例:
|
||||
|
||||
@@ -103,15 +103,15 @@ Your system is ready for Wails development!
|
||||
|
||||
## 开发
|
||||
|
||||
`wails dev` 用于以 "实时开发" 模式运行你的应用。这意味着：
|
||||
`wails dev` 用于以 "实时开发" 模式运行您的应用。这意味着：
|
||||
|
||||
- 应用程序被编译并自动运行
|
||||
- 一个观察者被启动，如果它检测到你的 go 文件的变化，它将触发你的开发应用程序的重新构建
|
||||
- 启动一个网络服务器`http://localhost:34115`，通过 http 为你的应用程序（不仅仅是前端）提供服务。这允许你使用你喜欢的浏览器开发扩展
|
||||
- 一个观察者被启动，如果它检测到您的 go 文件的变化，它将触发您的开发应用程序的重新构建
|
||||
- 启动一个网络服务器`http://localhost:34115`，通过 http 为您的应用程序（不仅仅是前端）提供服务。这允许您使用您喜欢的浏览器开发扩展
|
||||
- 所有应用程序资源都从磁盘加载。如果它们被更改，应用程序将自动重新加载（而不是重新构建）。所有连接的浏览器也将重新加载
|
||||
- 生成的 JS 模块提供以下内容：
|
||||
- 带有自动生成的 JSDoc 的 Go 方法的 Javascript 包装器，提供代码提示
|
||||
- 的 Go 结构体的 TypeScript 版本，可以构造并传递给你的后端方法
|
||||
- 的 Go 结构体的 TypeScript 版本，可以构造并传递给您的后端方法
|
||||
- 生成第二个 JS 模块，为运行时提供包装器 + TS 声明
|
||||
|
||||
| 标志 | 描述 | 默认 |
|
||||
|
||||
@@ -210,7 +210,7 @@ func SubMenu(label string, menu *Menu) *MenuItem
|
||||
```
|
||||
|
||||
关于单选菜单组的说明:单选菜单组定义为菜单中相邻的多个单选菜单项。这意味着您不需要将项目分组在一起，因为它是自动的。
|
||||
然而，这也意味着你不能有两个相邻的单选菜单组-它们之间必须有一个非单选菜单项。
|
||||
然而，这也意味着您不能有两个相邻的单选菜单组-它们之间必须有一个非单选菜单项。
|
||||
|
||||
### 回调
|
||||
|
||||
|
||||
@@ -9,4 +9,4 @@ sidebar_position: 1
|
||||
|
||||
Go 运行时可通过导入`github.com/wailsapp/wails/v2/pkg/runtime`. 此包中的所有方法都将 context 作为第一个参数。这个 context 可以从[应用启动回调](/docs/reference/options#应用启动回调) 或[前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调)回调中获得。
|
||||
|
||||
Javascript 库可通过`window.runtime`提供给前端。使用 dev 模式时会生成一个运行时包，该包为运行时提供 Typescript 声明。这应该位于你的前端目录中的`wailsjs`目录中。
|
||||
Javascript 库可通过`window.runtime`提供给前端。使用 dev 模式时会生成一个运行时包，该包为运行时提供 Typescript 声明。这应该位于您的前端目录中的`wailsjs`目录中。
|
||||
|
||||
15652
website/package-lock.json
generated
15652
website/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user