mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
Merge pull request #852 from misitebao/synchronize-chinese-documents
feat(website): synchronize chinese documents
This commit is contained in:
Lea Anthony
@@ -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
@@ -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.
|
||||
|
||||
+126
-17
@@ -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
-1
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Community",
|
||||
"position": 5
|
||||
"position": 50
|
||||
}
|
||||
|
||||
+10
@@ -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.
|
||||
+23
@@ -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
|
||||
+9
@@ -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.
|
||||
|
||||
+9
@@ -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.
|
||||
|
||||
+9
@@ -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
|
||||
|
||||
+9
@@ -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.
|
||||
|
||||
+9
@@ -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.
|
||||
|
||||
+10
@@ -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
-1
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Getting Started",
|
||||
"position": 2
|
||||
"position": 10
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user