github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 04:40:41 +08:00
Code Projects Activity

[v2] Docs update

Browse Source
This commit is contained in:
Lea Anthony 2021-09-27 19:35:30 +10:00
parent 511d0da2cb
commit 589eb3864f
150 changed files with 19195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
website/.github/deploy-to-wails.top-mirror.yml vendored Normal file
View File

@ -0,0 +1,34 @@
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"

20
website/.gitignore vendored Normal file
View File

@ -0,0 +1,20 @@
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

36
website/README.md Normal file
View File

@ -0,0 +1,36 @@
# Website
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
### Installation
```
$ yarn
```
### Local Development
```
$ yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without
having to restart the server.
### Build
```
$ yarn build
```
This command generates static content into the `build` directory and can be served using any static contents hosting
service.
### Deployment
```
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to
the `gh-pages` branch.

3
website/babel.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};

182
website/blog/2021-09-27-v2-beta1-release-notes.mdx Normal file
View File

@ -0,0 +1,182 @@
---
slug: wails-v2-beta-for-windows
title: Wails v2 Beta for Windows
authors: [leaanthony]
tags: [wails, v2]
---
<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/>
When I first announced Wails on Reddit, just over 2 years ago from a train in Sydney, I did not expect it to get much
attention. A few days later, a prolific tech vlogger released a tutorial video, gave it a positive review and from that
point on, interest in the project has skyrocketed.
It was clear that people were excited about adding web frontends to their Go projects, and almost immediately pushed the
project beyond the proof of concept that I had created.
At the time, Wails used the [webview](https://github.com/webview/webview) project to handle the frontend, and the only
option for Windows was the IE11 renderer. Many bug reports were rooted in this limitation: poor JavaScript/CSS support
and no dev tools to debug it. This was a frustrating development experience but there wasn't much that could have been
done to rectify it.
For a long time, I'd firmly believed that Microsoft would eventually have to sort out their browser situation.
The world was moving on, frontend development was booming and IE wasn't cutting it.
When Microsoft announced the move to using Chromium as the basis for their new browser direction, I knew it was only a
matter of time until Wails could use it, and move the Windows developer experience to the next level.
Today, I am pleased to announce: **Wails v2 Beta for Windows**! There's a huge amount to unpack in this release, so
grab a drink, take a seat and we'll begin...
### No CGO Dependency!
No, I'm not joking: *No* *CGO* *dependency* 🤯! The thing about Windows is that, unlike MacOS and Linux, it doesn't
come with a default compiler. In addition, CGO requires a mingw compiler and there's a ton of different installation
options. Removing the CGO requirement has massively simplified setup, as well as making debugging an awful lot easier.
Whilst I have put a fair bit of effort in getting this working, the majority of the
credit should go to [John Chadwick](https://github.com/jchv) for not only starting a couple of projects to make this
possible, but also being open to someone taking those projects and building on them. Credit also to
[Tad Vizbaras](https://github.com/tadvi) whose [winc](https://github.com/tadvi/winc) project started me down this path.
### WebView2 Chromium Renderer
<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/>
Finally, Windows developers get a first class rendering engine for their applications! Gone are the days of contorting
your frontend code to work on Windows. On top of that, you get a first-class developer tools experience!
The WebView2 component does, however, have a requirement to have the `WebView2Loader.dll` sitting alongside the binary.
This makes distribution just that little bit more painful than we gophers are used to. All solutions and libraries
(that I know of) that use WebView2 have this dependency.
However, I'm really excited to announce that Wails applications *have no such requirement*! Thanks to the wizardry of
[John Chadwick](https://github.com/jchv), we are able to bundle this dll inside the binary and get Windows to load it
as if it were present on disk.
Gophers rejoice! The single binary dream lives on!
### New Features
<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/>
There were a lot of requests for native menu support. Wails has finally got you covered. Application menus are now available
and include support for most native menu features. This includes standard menu items, checkboxes, radio groups, submenus
and separators.
There were a huge number of requests in v1 for the ability to have greater control of the window itself.
I'm happy to announce that there's new runtime APIs specifically for this.
It's feature-rich and supports multi-monitor configurations. There is also an improved dialogs API: Now, you can have modern, native
dialogs with rich configuration to cater for all your dialog needs.
There is now the option to generate IDE configuration along with your project. This means that if you open your project
in a supported IDE, it will already be configured for building and debugging your application. Currently VSCode is supported
but we hope to support other IDEs such as Goland soon.
<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/>
### No requirement to bundle assets
A huge pain-point of v1 was the need to condense your entire application down to single JS & CSS files. I'm happy to
announce that for v2, there is no requirement to bundle assets, in any way, shape or form. Want to load a local image? Use an
`<img>` tag with a local src path. Want to use a cool font? Copy it in and add the path to it in your CSS.
> Wow, that sounds like a webserver...
Yes, it works just like a webserver, except it isn't.
> So how do I include my assets?
You just pass a single `embed.FS` that contains all your assets into your application configuration.
They don't even need to be in the top directory - Wails will just work it out for you.
### New Development Experience
<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/>
Now that assets don't need to be bundled, it's enabled a whole new development experience. The new `wails dev`
command will build and run your application, but instead of using the assets in the `embed.FS`, it loads them directly
from disk.
It also provides the additional features:
- Hot reload - Any changes to frontend assets will trigger and auto reload of the application frontend
- Auto rebuild - Any changes to your Go code will rebuild and relaunch your application
In addition to this, a webserver will start on port 34115. This will serve your application to any browser that
connects to it. All connected web browsers will respond to system events like hot reload on asset change.
In Go, we are used to dealing with structs in our applications. It's often useful to send structs to our frontend
and use them as state in our application. In v1, this was a very manual process and a bit of a burden on the
developer. I'm happy to announce that in v2, any application run in dev mode will automatically generate Typescript
models for all structs that are input or output parameters to bound methods. This enables seamless interchange of data
models between the two worlds.
In addition to this, another JS module is dynamically generated wrapping all your bound methods. This provides
JSDoc for your methods, providing code completion and hinting in your IDE. It's really cool when you get data models
auto-imported when hitting tab in an auto-generated module wrapping your Go code!
### Remote Templates
<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/>
Getting an application up and running quickly was always a key goal for the Wails project. When we launched, we tried
to cover a lot of the modern frameworks at the time: react, vue and angular. The world of frontend development is very
opinionated, fast moving and hard to keep on top of! As a result, we found our base templates getting out of date pretty
quickly and this caused a maintenance headache. It also meant that we didn't have cool modern templates for the latest
and greatest tech stacks.
With v2, I wanted to empower the community by giving you the ability to create and host templates yourselves, rather
than rely on the Wails project. So now you can create projects using community supported templates! I hope this will
inspire developers to create a vibrant ecosystem of project templates. I'm really quite excited about what our developer
community can create!
### In Conclusion
Wails v2 represents a new foundation for the project.
The aim of this release is to get feedback on the new approach, and to iron out any bugs before a full release.
Your input would be most welcome. Please direct any feedback to the [v2 Beta](https://github.com/wailsapp/wails/discussions)
discussion board.
There were many twists and turns, pivots and u-turns to get to this point. This was due partly to early technical decisions
that needed changing, and partly because some core problems we had spent time building workarounds for were fixed upstream:
Go’s embed feature is a good example. Fortunately, everything came together at the right time, and today we have the
very best solution that we can have. I believe the wait has been worth it - this would not have been possible even 2
months ago.
I also need to give a huge thank you :pray: to the following people because without them, this release just wouldn't exist:
- [Misitebao](https://github.com/misitebao) - An absolute workhorse on the Chinese translations and an incredible bug finder.
- [John Chadwick](https://github.com/jchv) - His amazing work on [go-webview2](https://github.com/jchv/go-webview2) and
[go-winloader](https://github.com/jchv/go-winloader) have made the Windows version we have today possible.
- [Tad Vizbaras](https://github.com/tadvi) - Experimenting with his [winc](https://github.com/tadvi/winc) project was the first step down the path to a pure Go Wails.
- [Mat Ryer](https://github.com/matryer) - His support, encouragement and feedback has really helped drive the project forward.
And finally, I'd like to give a special thank you to all the [project sponsors](/docs/credits#sponsors), including [JetBrains](https://www.jetbrains.com?from=Wails),
whose support drive the project in many ways behind the scenes.
I look forward to seeing what people build with Wails in this next exciting phase of the project!
Lea.
PS: MacOS and Linux users need not feel left out - porting to this new foundation is actively under way and most of the hard work has already been done. Hang in there!
PPS: If you or your company find Wails useful, please consider [sponsoring the project](https://github.com/sponsors/leaanthony). Thanks!

11
website/blog/authors.yml Normal file
View File

@ -0,0 +1,11 @@
leaanthony:
name: Lea Anthony
title: Maintainer of Wails
url: https://github.com/leaanthony
image_url: https://github.com/leaanthony.png
misitebao:
name: Misitebao
title: Front-End Architect
url: https://github.com/misitebao
image_url: https://cdn.jsdelivr.net/gh/misitebao/CDN@main/gravatar.gif

70
website/docs/about.md Normal file
View File

@ -0,0 +1,70 @@
---
sidebar_position: 1
---
# About
## Overview
Wails is a project that enables you to write desktop apps using Go and web technologies.
Consider it a lightweight and fast Electron alternative for Go. You can easily build applications with the flexibility
and power of Go, combined with a rich, modern frontend.
Wails doesn't hold back with the eye candy either! This is [xbar](https://xbarapp.com) - a desktop application for MacOS
written using Wails. It has menus, supports light and dark desktop themes, and the main window uses translucency that
gives it that 'frosty' effect of a native app.
<p class="text--center">
<a href="https://xbarapp.com"><img src="/img/xbar-app-preview-2.png" width="75%"/></a>
</p>
## Native Elements
Wails uses a purpose built library for handling native elements such as Window, Menus, Dialogs, etc, so you can build
good-looking, feature rich desktop applications.
**It does not embed a browser**, so it is resource efficient. Instead, it uses the native rendering engine for the
platform. On Windows, this is the new Microsoft Webview2 library, built on Chromium.
## Go & Javascript Interoperability
Wails automatically makes your Go methods available to Javascript, so you can call them by name from your frontend!
It even generates Typescript versions of the structs used by your Go methods, so you can pass the same data structures
between Go and Javascript.
## Runtime Library
Wails provides a runtime library, for both Go and Javascript, that handles a lot of the things modern applications need,
like Eventing, Logging, Dialogs, etc.
## Live Development Experience
### Automatic Rebuilds
When you run your application in "dev" mode, Wails will build your application as a native desktop application, but will
read your assets from disk. It will detect any changes to your Go code and automatically rebuild and relaunch your
application.
### Automatic Reloads
When changes to your application assets are detected, your running application will "reload", reflecting your changes
almost immediately.
### Develop your application in a Browser
If you prefer to debug and develop in a browser then Wails has you covered. The running application also has a webserver
that will run your application in any browser that connects to it. It will even refresh when your assets change on disk.
## Production-ready Native Binaries
When you're ready to do the final build of your application, the CLI will compile it down to a single executable, with
all the assets bundled into it. On Windows and MacOS, it is possible to create a native package for distribution. The
assets used in packaging (icon, info.plist, manifest file, etc) are part of your project and may be customised, giving
you total control over how your applications are built.
## Tooling
The Wails CLI provides a hassle-free way to generate, build and bundle your applications. It will do the heavy lifting
of creating icons, compiling your application with optimal settings and delivering a distributable, production ready
binary. Choose from a number of starter templates to get up and running quickly!

4
website/docs/community/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Community",
"position": 50
}

19
website/docs/community/links.mdx Normal file
View File

@ -0,0 +1,19 @@
---
sidebar_position: 2
---
# Links
This page serves as a list for community related links. Please submit a PR (click `Edit this page` at the bottom)
to submit links.
## Support Channels
- [Gophers Slack Channel](https://gophers.slack.com/messages/CJ4P9F7MZ/)
- [Gophers Slack Channel Invite](https://invite.slack.golangbridge.org/)
- [Github Issues](https://github.com/wailsapp/wails/issues)
- [v2 Beta Discussion Board](https://github.com/wailsapp/wails/discussions)
## Social Media
- [Twitter](https://twitter.com/wailsapp)

4
website/docs/community/showcase/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Showcase",
"position": 1
}

BIN
website/docs/community/showcase/encrypteasy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

10
website/docs/community/showcase/encrypteasy.mdx Normal file
View File

@ -0,0 +1,10 @@
# EncryptEasy
<p style={{"text-align": "center"}}>
<img src="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.

BIN
website/docs/community/showcase/filehound.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

23
website/docs/community/showcase/filehound.mdx Normal file
View File

@ -0,0 +1,23 @@
# FileHound Export Utility
<p style={{"text-align": "center"}}>
<img src="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
website/docs/community/showcase/mollywallet.mdx Normal file
View File

@ -0,0 +1,9 @@
# Molley Wallet
<p style={{"text-align": "center"}}>
<img src="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.

BIN
website/docs/community/showcase/mollywallet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 KiB

9
website/docs/community/showcase/optimus.mdx Normal file
View File

@ -0,0 +1,9 @@
# Optimus
<p style={{"text-align": "center"}}>
<img src="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.

BIN
website/docs/community/showcase/optimus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
website/docs/community/showcase/portfall.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

9
website/docs/community/showcase/portfall.mdx Normal file
View File

@ -0,0 +1,9 @@
# Portfall
<p style={{"text-align": "center"}}>
<img src="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
website/docs/community/showcase/surge.mdx Normal file
View File

@ -0,0 +1,9 @@
# Surge
<p style={{"text-align": "center"}}>
<img src="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.

BIN
website/docs/community/showcase/surge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

9
website/docs/community/showcase/wally.mdx Normal file
View File

@ -0,0 +1,9 @@
# Wally
<p style={{"text-align": "center"}}>
<img src="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.

BIN
website/docs/community/showcase/wally.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

10
website/docs/community/showcase/wombat.mdx Normal file
View File

@ -0,0 +1,10 @@
# Wombat
<p style={{"text-align": "center"}}>
<img src="wombat.png"></img><br/>
</p>
[Wombat](https://github.com/rogchap/wombat) is a cross platform gRPC client.

BIN
website/docs/community/showcase/wombat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 KiB

25
website/docs/community/templates.mdx Normal file
View File

@ -0,0 +1,25 @@
---
sidebar_position: 1
---
# Templates
This page serves as a list for community supported templates. Please submit a PR (click `Edit this page` at the bottom)
to include your templates. To build your own template, please see the [Templates](/docs/guides/templates) guide.
To use these templates, run `wails init -n "Your Project Name" -t [the link below]`
Example: `wails init -n "Your Project Name" -t https://github.com/misitebao/wails-template-vue`
:::warning Attention
**The Wails project does not maintain, is not responsible nor liable for 3rd party templates!**
If you are unsure about a template, inspect `package.json` and `wails.json` for what scripts are run and what packages are installed.
:::
## Vue
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - A template using vue and vue-router

83
website/docs/credits.mdx Normal file
View File

@ -0,0 +1,83 @@
---
sidebar_position: 99
---
# Credits
- [Lea Anthony](https://github.com/leaanthony) - Project owner, lead developer
- [Misitebao](https://github.com/misitebao) - Chinese documentation, Windows testing, Bug finder general
- [Travis McLane](https://github.com/tmclane) - Cross-compilation work, MacOS testing
- [Byron Chris](https://github.com/bh90210) - Linux distro wizard, Linux testing
## Sponsors
<div
dangerouslySetInnerHTML={{
__html: `
<a href="https://github.com/sponsors/leaanthony" style="width:100px;">
<img src="/img/bronze%20sponsor.png" width="100"/>
</a>
<a href="https://github.com/snider" style="width:100px;">
<img src="https://github.com/snider.png?size=100" width="100"/>
</a>
<br/>
<br/>
<a href="https://github.com/matryer" style="width:100px">
<img src="https://github.com/matryer.png" width="100"/>
</a>
<a href="https://www.jetbrains.com?from=Wails" style="width:100px">
<img src="/img/jetbrains-grayscale.png" width="100"/>
</a>
<a href="https://github.com/tc-hib" style="width:55px">
<img src="https://github.com/tc-hib.png?size=55" width="55"/>
</a>
<a href="https://github.com/picatz" style="width:50px">
<img src="https://github.com/picatz.png?size=50" width="50"/>
</a>
<a href="https://github.com/tylertravisty" style="width:50px">
<img src="https://github.com/tylertravisty.png?size=50" width="50"/>
</a>
<a href="https://github.com/akhudek" style="width:50px">
<img src="https://github.com/akhudek.png?size=50" width="50"/>
</a>
<a href="https://github.com/trea" style="width:50px">
<img src="https://github.com/trea.png?size=50" width="50"/>
</a>
<a href="https://github.com/LanguageAgnostic" style="width:55px">
<img src="https://github.com/LanguageAgnostic.png?size=55" width="55"/>
</a>
<a href="https://github.com/fcjr" style="width:55px">
<img src="https://github.com/fcjr.png?size=55" width="55"/>
</a>
<a href="https://github.com/nickarellano" style="width:60px">
<img src="https://github.com/nickarellano.png?size=60" width="60"/>
</a>
<a href="https://github.com/bglw" style="width:65px">
<img src="https://github.com/bglw.png?size=65" width="65"/>
</a>
<a href="https://github.com/jugglingjsons" style="width:50px">
<img src="https://github.com/jugglingjsons.png?size=50" width="50"/>
</a>
<a href="https://github.com/marcus-crane" style="width:50px">
<img src="https://github.com/marcus-crane.png?size=50" width="50"/>
</a>
`,
}}
/>
## Contributors
import Contributors from "react-contributors";
<Contributors owner="wailsapp" repo="wails" />
## Special Mentions
- [John Chadwick](https://github.com/jchv) - His amazing work on [go-webview2](https://github.com/jchv/go-webview2) and
[go-winloader](https://github.com/jchv/go-winloader) have made the Windows version possible.
- [Tad Vizbaras](https://github.com/tadvi) - His winc project was the first step down the path to a pure Go Wails.
- [Mat Ryer](https://github.com/matryer) - For advice, support and bants.
- [Dustin Krysak](https://wiki.ubuntu.com/bashfulrobot) - His support and feedback has been invaluable.
- [Justen Walker](https://github.com/justenwalker/) - For helping wrangle COM issues which got v2 over the line.
- [Wang, Chi](https://github.com/patr0nus/) - The DeskGap project was a huge influence on the direction of Wails v2.
- [Serge Zaitsev](https://github.com/zserge) - Whilst Wails does not use the Webview project, it is still a source of inspiration.

4
website/docs/gettingstarted/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Getting Started",
"position": 10
}

19
website/docs/gettingstarted/building.mdx Normal file
View File

@ -0,0 +1,19 @@
---
sidebar_position: 6
---
# Compiling your Project
From the project directory, run `wails build`.
This will compile your project and save the production-ready binary in the `build/bin` directory.
If you run the binary, you should see the default application:
<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/>
For more details on compilation options, please refer to the [CLI Reference](/docs/reference/cli#build).

15
website/docs/gettingstarted/development.mdx Normal file
View File

@ -0,0 +1,15 @@
---
sidebar_position: 5
---
# Developing your Application
You can run your application in development mode by running `wails dev` from your project directory. This will do the following things:
- Build your application and run it
- Watch for modifications in your Go files and rebuild/re-run on change
- Sets up a [webserver](http://localhost:34115) that will serve your application over a browser. This allows you to use your favourite browser extensions. You can even call your Go code from the console.
To get started, run `wails dev` in the project directory. More information on this can be found [here](/docs/reference/cli#dev).
Coming soon: Tutorial

53
website/docs/gettingstarted/firstproject.mdx Normal file
View File

@ -0,0 +1,53 @@
---
sidebar_position: 2
---
# Creating a Project
## Project Generation
Now that the CLI is installed, you can generate a new project by using the `wails init` command.
To get up and running quickly, you can generate a default project by running `wails init -n myproject`. This will
create a directory called `myproject` and populate it with the default template.
Other project templates are available and can be listed using `wails init -l`.
To see the other options available, you can run `wails init -help`.
More details can be found in the [CLI Reference](/docs/reference/cli#init).
## Project Layout
Wails projects have the following layout:
```
.
├── build/
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json
```
### Project structure rundown
- `/main.go` - The main application
- `/frontend/` - Frontend project files
- `/build/` - Project build directory
- `/build/appicon.png` - The application icon
- `/build/darwin/` - Mac specific project files
- `/build/windows/` - Windows specific project files
- `/wails.json` - The project configuration
- `/go.mod` - Go module file
- `/go.sum` - Go module checksum file
The `frontend` directory has nothing specific to Wails and can be any frontend project of your choosing.
The `build` directory is used during the build process. These files may be updated to customise your builds. If
files are removed from the build directory, default versions will be regenerated.
The default module name in `go.mod` is "changeme". You should change this to something more appropriate.

71
website/docs/gettingstarted/installation.mdx Normal file
View File

@ -0,0 +1,71 @@
---
sidebar_position: 1
---
# Installation
## Supported Platforms
- 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
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`
### npm
Download NPM from the [Node Downloads Page](https://nodejs.org/en/download/). It is best to use the latest release as that is what we generally test against.
Run `npm --version` to verify.
## Platform Specific Dependencies
You will also need to install platform specific dependencies:
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>
<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...
</TabItem>
</Tabs>
## Optional Dependencies
- [UPX](https://upx.github.io/) for compressing your applications.
## Installing Wails
Run `go get github.com/wailsapp/wails/v2/cmd/wails` to install the Wails CLI.
## System Check
Running `wails doctor` will check if you have the correct dependencies installed. If not, it will advise on what is missing and help on how to rectify any problems.

4
website/docs/guides/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Guides",
"position": 50
}

179
website/docs/guides/application-development.mdx Normal file
View File

@ -0,0 +1,179 @@
# Application Development
There are no hard and fast rules for developing applications with Wails, but there are some basic guidelines.
## Application Setup
The pattern used by the default templates are that `main.go` is used for configuring and running the application, whilst
`app.go` is used for defining the application logic.
The `app.go` file will define a struct that has 2 methods which act as hooks into the main application:
```go title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
```
- The startup method is called as soon as Wails allocates the resources it needs and is a good place for creating resources,
setting up event listeners and anything else the application needs at startup.
It is given a `context.Context` which is usually saved in a struct field. This context is needed for calling the
[runtime](/docs/reference/runtime/intro). If this method returns an error, the application will terminate.
In dev mode, the error will be output to the console.
- The shutdown method will be called by Wails right at the end of the shutdown process. This is a good place to deallocate
memory and perform any shutdown tasks.
The `main.go` file generally consists of a single call to `wails.Run()`, which accepts the application configuration.
The pattern used by the templates is that before the call to `wails.Run()`, an instance of the struct we defined in
`app.go` is created and saved in a variable called `app`. This configuration is where we add our callbacks:
```go {3,9,10} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
})
if err != nil {
log.Fatal(err)
}
}
```
More information on application lifecycle hooks can be found [here](/docs/howdoesitwork#application-lifecycle-callbacks).
## Binding Methods
It is likely that you will want to call Go methods from the frontend. This is normally done by adding public methods to
the already defined struct in `app.go`:
```go {16-18} title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
func (a *App) Greet(name string) string {
return fmt.Printf("Hello %s!", name)
}
```
In the main application configuration, the `Bind` key is where we can tell Wails what we want to bind:
```go {11-13} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
This will bind all public methods in our `App` struct (it will never bind the startup and shutdown methods).
More information on Binding can be found [here](/docs/howdoesitwork#method-binding).
## Application Menu
Wails supports adding a menu to your application. This is done by passing a [Menu](/docs/reference/menus#menu) struct
to application config. It's common to use a method that returns a Menu, and even more common for that to be a method on
the `App` struct used for the lifecycle hooks.
```go {11} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Menu: app.menu(),
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
## Assets
The great thing about the way Wails v2 handles assets is that it doesn't! The only thing you need to give Wails is an
`embed.FS`. How you get to that is entirely up to you. You can use vanilla html/css/js files like the vanilla template.
You could have some complicated build system, it doesn't matter.
When `wails build` is run, it will check the `wails.json` project file at the project root. There are 2 keys in the
project file that are read:
- "frontend:install"
- "frontend:build"
The first, if given, will be executed in the `frontend` directory to install the node modules.
The second, if given, will be executed in the `frontend` directory to build the frontend project.
If these 2 keys aren't given, then Wails does absolutely nothing with the frontend. It is only expecting that `embed.FS`.
## Live Reloading
Running `wails dev` will start a file watcher in your project directory. By default, if any file changes, wails checks
if it was an application file (default: `.go`, configurable with `-e` flag). If it was, then it will rebuild your
application and relaunch it. If the changed file was in the `assetdir` directory, it will issue a reload.
Some frameworks come with their own live-reloading server, however they will not be able to take advantage of the Wails
Go bindings. In this scenario, it is best to run a watcher script that rebuilds the project into the build directory, which
Wails will be watching. For an example, see the default svelte template that uses [rollup](https://rollupjs.org/guide/en/).
For [create-react-app](https://create-react-app.dev/), it's possible to use
[this script](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd) to achieve a similar result.
## Go Module
The default Wails templates generate a `go.mod` file that contains the module name "changeme". You should change this
to something more appropriate after project generation.

39
website/docs/guides/developing-wails.mdx Normal file
View File

@ -0,0 +1,39 @@
# Contributing
This page is a guide on how to contribute to the Wails project.
First, a word of warning: Wails v2 has been through a number of iterations and pivots. There is a lot of code that
is either on hold or deprecated. Reading the whole project and trying to understand it may be confusing. This document
aims to focus on what is current and how to understand that.
## Bugs
For raising bugs, please open a ticket on GitHub and give it the \[v2\] label. Include the output of `wails doctor`
in the ticket to help us understand your environment.
For fixing bugs, please comment on a ticket that you'd like to take it on and we will put a label on the ticket.
It is best to use Windows as it is done in pure Go, making debugging much easier.
## Features
To request a new feature, raise a ticket so that it may be discussed. The ticket should be given the
"Feature Request" label. These will be discussed and if selected for development will be given the label
"Ready for Development".
To implement a new feature, raise a ticket as above or select a ticket with the "Ready for Development" label.
When raising a PR, be mindful to state what platforms the PR has been tested on. Any new feature will not be accepted unless it works
on all platforms (if it can).
:::warning What not to do
PRs for features with no tickets aren't helpful as there's no context to the PR and it will not be prioritised.
:::
## Documentation
Contributing to the documentation is easy by clicking on the "Edit this page" link on any of the pages. Documentation
updates can be done ad-hoc, without a ticket.

35
website/docs/guides/frameless.mdx Normal file
View File

@ -0,0 +1,35 @@
# Frameless Applications
Wails supports applications with no frame. This can be achieved by using the [frameless](/docs/reference/options#frameless)
field in [Application Options](/docs/reference/options#application-options).
Wails offers a simple solution for dragging the window: Any HTML element that has the attribute "data-wails-drag" will
act as a "drag handle". This property applies to all nested elements. If you need to indicate that a nested element
should not drag, then use the attribute 'data-wails-no-drag' on that element.
The default vanilla template uses this, even though it is not frameless. The whole `body` element is tagged as draggable.
The `<div id="input" data-wails-no-drag>` is tagged as being not draggable.
```html
<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>
<body data-wails-drag>
<div id="logo"></div>
<div id="input" data-wails-no-drag>
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>
<script src="/main.js"></script>
</body>
</html>
```
:::info Fullscreen
If you allow your application to go fullscreen, this drag functionality will be disabled.
:::

116
website/docs/guides/ides.mdx Normal file
View File

@ -0,0 +1,116 @@
# IDEs
Wails aims to provide a great development experience. To that aim, we now support generating IDE specific configuration
to provide smoother project setup.
Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but aim to support other IDEs such as Goland.
## Visual Studio Code
<p className="text--center">
<img src="/img/vscode.png" style={{"width": "75%"}}></img>
</p>
When generating a project using the `-vscode` flag, IDE files will be created alongside the other project files.
These files are placed into the `.vscode` directory and provide the correct configuration for debugging your application.
The 2 files generated are `tasks.json` and `launch.json`. Below are the files generated for the default vanilla project:
```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"]
},
]
}
```
### Configuring the install and build steps
The `tasks.json` file is simple for the default project as there is no `npm install` or `npm run build` step needed.
For projects that have a frontend build step, such as the svelte template, we would need to edit `tasks.json` to
add the install and build steps:
```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 Future Enhancement
In the future, we hope to generate a `tasks.json` that includes the install and build steps automatically.
:::

99
website/docs/guides/manual-builds.mdx Normal file
View File

@ -0,0 +1,99 @@
# Manual builds
The Wails CLI does a lot of heavy lifting for the project, but sometimes it's desirable to manually build your project.
This document will discuss the different operations the CLI does and how this may be achieved in different ways.
## Build Process
When either `wails build` or `wails dev` are used, the Wails CLI performs a common build process:
- Install frontend dependencies
- Build frontend project
- Generate build assets
- Compile application
- [optional] Compress application
### Install frontend dependencies
#### CLI Steps
- If the `-s` flag is given, this step is skipped
- Checks `wails.json` to see if there is an install command in the key `frontend:install`
- If there isn't, it skips this step
- If there is, it checks if `package.json` exists in the frontend directory. If it doesn't exist, it skips this step
- An MD5 sum is generated from the `package.json` file contents
- It checks for the existence of `package.json.md5` and if it exists, will compare the contents of it (an MD5 sum)
with the one generated to see if the contents have changed. If they are the same, this step is skipped
- If `package.json.md5` does not exist, it creates it using the generated MD5 sum
- If a build is now required, or `node_modules` does not exist, or the `-f` flag is given, the install command is
executed in the frontend directory
#### Manual Steps
This step could be done from the command line or a script with `npm install`.
### Build frontend project
#### Wails CLI
- If the `-s` flag is given, this step is skipped
- Checks `wails.json` to see if there is a build command in the key `frontend:build`
- If there isn't, it skips this step
- If there is, it is executed in the frontend directory
#### Manual Steps
This step could be done from the command line or a script with `npm run build` or whatever the frontend build script is.
### Generate assets
#### Wails CLI
- If `-nopackage` flag is set, this stage is skipped
- If the `build/appicon.png` file does not exist, a default one is created
- For Windows, see [Bundling for Windows](#windows)
- If `build/windows/icon.ico` does not exist, it will create it from the `build/appicon.png` image.
##### Windows
- It creates icon sizes of 256, 128, 64, 48, 32 and 16. This is done using [winicon](https://github.com/leaanthony/winicon).
- If the `build/windows/<projectname>.manifest` file does not exist, it creates it from a default version.
- Compiles the application as a production build (above)
- Uses [winres](https://github.com/tc-hib/winres) to bundle the icon and manifest into a `.syso` file ready for linking.
#### Manual Steps
- Create `icon.ico` using the [winicon](https://github.com/leaanthony/winicon) CLI tool (or any other tool).
- Create / Update a `.manifest` file for your application
- Use the [winres CLI](https://github.com/tc-hib/go-winres) to generate a `.syso` file.
### Compile application
#### Wails CLI
- If the `-clean` flag is provided, the `build` directory is deleted and recreated
- For `wails dev`, the following default Go flags are used: `-tags dev -gcflags "all=-N -l"`
- For `wails build`, the following default Go flags are used: `-tags desktop,production -ldflags "-w -s"`
- On Windows, `-ldflags "-w -h -H windowsgui"`
- Additional tags passed to the CLI using `-tags` are added to the defaults
- Additional ldflags passed to the CLI using `-ldflags` are added to the defaults
- The `-o` flag is passed through
- The Go compiler specified by `-compiler` will be used for compilation
#### Manual steps
- For dev build, the minimum command would be: `go build -tags dev -gcflags "all=-N -l"`
- For production build, the minimum command would be: `go build -tags desktop,production -ldflags "-w -s -H windowsgui"`
- Ensure that you compile in the same directory as the `.syso` file
### Compress application
#### Wails CLI
- If the `-upx` flag has been given, the `upx` program will be run to compress the application with the default settings
- If `-upxflags` is also passed, these flags are used instead of the default ones
#### Manual steps
- Run `upx [flags]` manually to compress the application.

205
website/docs/guides/migrating.mdx Normal file
View File

@ -0,0 +1,205 @@
# Migrating from v1
## Overview
Wails v2 is a significant change from v1. This document aims to highlight the changes and the steps in migrating an existing project.
### Creating the Application
In v1, the main application is created using `wails.CreateApp`, bindings are added with `app.Bind`, then the
application is run using `app.Run()`.
Example:
```go title="v1"
app := wails.CreateApp(&wails.AppConfig{
Title: "MyApp",
Width: 1024,
Height: 768,
JS: js,
CSS: css,
Colour: "#131313",
})
app.Bind(basic)
app.Run()
```
In v2, there is just a single method, `wails.Run()`, that accepts [application options](/docs/reference/options#application-options).
```go title="v2"
err := wails.Run(&options.App{
Title: "MyApp",
Width: 800,
Height: 600,
Assets: assets,
Bind: []interface{}{
basic,
},
})
```
### Binding
In v1, it was possible to bind both arbitrary functions and structs. In v2, this has been simplified to only binding structs.
The struct instances that were previously passed to the `Bind()` method in v1, are now specified in the `Bind` field of
the [application options](/docs/reference/options#application-options):
```go title="v1"
app := wails.CreateApp(/* options */)
app.Bind(basic)
```
```go title="v2"
err := wails.Run(&options.App{
/* other options */
Bind: []interface{}{
basic,
},
})
```
In v1, bound methods were available to the frontend at `window.backend`. This has changed to `window.go`.``
### Application Lifecycle
In v1, there were 2 special methods in a bound struct: `WailsInit()` and `WailsShutdown()`. These have
been replaced with 3 lifecycle hooks as part of the [application options](/docs/reference/options#application-options):
- [OnStartup](/docs/reference/options#onstartup)
- [OnShutdown](/docs/reference/options#onshutdown)
- [OnDomReady](/docs/reference/options#ondomready)
Note: [OnDomReady](/docs/reference/options#ondomready) replaces the `wails:ready` system event in v1.
These methods can be standard functions, but a common practice is to have them part of a struct:
```go title="v2"
basic := NewBasicApp()
err := wails.Run(&options.App{
/* Other Options */
OnStartup: basic.startup,
OnShutdown: basic.shutdown,
OnDomReady: basic.domready,
})
...
type Basic struct {
ctx context.Context
}
func (b *Basic) startup(ctx context.Context) {
b.ctx = ctx
}
...
```
### Runtime
The runtime in v2 is much richer than v1 with support for menus, window manipulation
and better dialogs. The signature of the methods has changed slightly - please refer
the the [Runtime Reference](/docs/reference/runtime/intro).
In v1, the [runtime](/docs/reference/runtime/intro) was available via a struct passed to `WailsInit()`.
In v2, the runtime has been moved out to its own package. Each method in the runtime takes the
`context.Context` that is passed to the [OnStartup](/docs/reference/options#onstartup) method.
```go title="Runtime Example"
package main
import "github.com/wailsapp/wails/v2/pkg/runtime"
type Basic struct {
ctx context.Context
}
// startup is called at application startup
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
runtime.LogInfo(ctx, "Application Startup called!")
}
```
### Assets
The _biggest_ change in v2 is how assets are handled.
In v1, assets were passed via 2 application options:
- `JS` - The application's Javascript
- `CSS` - The application's CSS
This meant that the responsibility of generating a single JS and CSS file was on the
developer. This essentially required the use of complicated packers such as webpack.
In v2, Wails makes no assumptions about your frontend assets, just like a webserver.
All of your application assets are passed to the application options as an `embed.FS`.
**This means there is no requirement to bundle your assets, encode images as Base64 or
attempt the dark art of bundler configuration to use custom fonts**.
At startup, Wails
will scan the given `embed.FS` for `index.html` and use its location as the root path
for all the other application assets - just like a webserver would.
Example: An application has the following project layout. All final assets are placed in the
`frontend/dist` directory:
```shell
.
├── build/
├── frontend/
│ └── dist/
│ ├── index.html
│ ├── main.js
│ ├── main.css
│ └── logo.svg
├── main.go
└── wails.json
```
Those assets may be used by the application by simply creating an `embed.FS`:
```go title="Assets Example"
//go:embed frontend/dist
var assets embed.FS
func main() {
err := wails.Run(&options.App{
/* Other Options */
Assets: assets,
})
}
```
Of course, bundlers can be used if you wish to. The only requirement is to pass
the final application assets directory to Wails using an `embed.FS` in the `Assets`
key of the [application options](/docs/reference/options#application-options).
### Project Configuration
In v1, the project configuration was stored in the `project.json` file in the project root.
In v2, the project configuration is stored in the `wails.json` file in the project root.
The format of the file is slightly different. Here is a comparison:
<p align="center">
| v1 | v2 | Notes |
| ------------------ | ---------------- | --------------------------------------------------- |
| name | name | |
| description | | Removed |
| author / name | author / name | |
| author / email | author / email | |
| version | version | |
| binaryname | outputfilename | Changed |
| frontend / dir | | Removed |
| frontend / install | frontend:install | Changed |
| frontend / build | frontend:build | Changed |
| frontend / bridge | | Removed |
| frontend / serve | | Removed |
| tags | | Removed |
| | wailsjsdir | The directory to generate wailsjs modules |
| | assetdir | The directory of the frontend assets for `dev` mode |
</p>

95
website/docs/guides/templates.mdx Normal file
View File

@ -0,0 +1,95 @@
# Templates
Wails generates projects from pre-created templates. In v1, this was a difficult to maintain set of projects that were
subject to going out of date. In v2, to empower the community, a couple of new features have been added for templates:
- Ability to generate projects from [Remote Templates](/docs/reference/cli#remote-templates)
- Tooling to help create your own templates
## Creating Templates
To create a template, you can use the `wails generate template` command. To generate a default template, run:
`wails generate template -name mytemplate `
This creates the directory "mytemplate" with default files:
```shell title=mytemplate/
.
|-- NEXTSTEPS.md
|-- README.md
|-- app.tmpl.go
|-- frontend
| `-- dist
| |-- assets
| | |-- fonts
| | | |-- OFL.txt
| | | `-- nunito-v16-latin-regular.woff2
| | `-- images
| | `-- logo-dark.svg
| |-- index.html
| |-- main.css
| `-- main.js
|-- go.mod.tmpl
|-- main.tmpl.go
|-- template.json
`-- wails.tmpl.json
```
### Template Overview
The default template consists of the following files and directories:
| Filename / Dir | Description |
| --------------- | -------------------------------------------- |
| NEXTSTEPS.md | Instructions on how to complete the template |
| README.md | The README published with the template |
| app.tmpl.go | `app.go` template file |
| frontend/ | The directory containing frontend assets |
| go.mod.tmpl | `go.mod` template file |
| main.tmpl.go | `main.go` template file |
| template.json | The template metadata |
| wails.tmpl.json | `wails.json` template file |
At this point it is advisable to follow the steps in `NEXTSTEPS.md`.
## Creating a Template from an Existing Project
It's possible to create a template from an existing frontend project by passing the path to the project when generating
the template. We will now walk through how to create a Vue 3 template:
- Install the vue cli: `npm install -g @vue/cli`
- Create the default project: `vue create vue3-base`
- Select `Default (Vue 3) ([Vue 3] babel, eslint)`
- After the project has been generated, run:
```shell
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
Extracting base template files...
Migrating existing project files to frontend directory...
Updating package.json data...
Renaming package.json -> package.tmpl.json...
Updating package-lock.json data...
Renaming package-lock.json -> package-lock.tmpl.json...
```
- The template may now be customised as specified in the `NEXTSTEPS.md` file
- Once the files are ready, it can be tested by running: `wails init -n my-vue3-project -t .\wails-vue3-template\`
- To test the new project, run: `cd my-vue3-project` then `wails build`
- Once the project has compiled, run it: `.\build\bin\my-vue3-project.exe`
- You should have a fully functioning Vue3 application:
<div className="text--center">
<img src="/img/vue3-template.png" width="50%" />
</div>
## Publishing Templates
Publishing a template is simply pushing the files to GitHub. The following best practice is encouraged:
- Remove any unwanted files and directories (such as `.git`) from your frontend directory
- Ensure that `template.json` is complete, especially `helpurl`
- Push the files to GitHub
- Create a PR on the [Community Templates](/docs/community/templates) page
- Announce the template on the [Template Announcement](https://github.com/wailsapp/wails/discussions/825) discussion board

37
website/docs/guides/windows.mdx Normal file
View File

@ -0,0 +1,37 @@
# Windows
This page has miscellaneous guides related to developing Wails applications for Windows.
## Handling the WebView2 Runtime Dependency
Wails applications built for Windows have a runtime requirement on the Microsoft [WebView2 Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/).
Windows 11 will have this installed by default, but some machines won't. Wails offers an easy approach to dealing with this dependency.
By using the `-webview2` flag when building, you can decide what your application will do when a suitable runtime is not detected (including if the installed runtime is too old).
The four options are:
1. Download
2. Embed
3. Browser
4. Error
### Download
This option will prompt the user that no suitable runtime has been found and then offer to download and run the official
bootstrapper from Microsoft's WebView2 site. If the user proceeds, the official bootstrapper will be downloaded and run.
### Embed
This option embeds the official bootstrapper within the application. If no suitable runtime has been found, the
application will offer to run the bootstrapper. This adds ~150k to the binary size.
### Browser
This option will prompt the user that no suitable runtime has been found and then offer to open a browser to the official
WebView2 page where the bootstrapper can be downloaded and installed. The application will then exit, leaving the installation
up to the user.
### Error
If no suitable runtime is found, an error is given to the user and no further action taken.

324
website/docs/howdoesitwork.mdx Normal file
View File

@ -0,0 +1,324 @@
---
sidebar_position: 20
---
# How does it work?
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
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.
<div className="text--center">
<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:
```go title="main.go"
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed frontend/dist
var assets embed.FS
func main() {
app := &App{}
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
Assets: &assets,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
type App struct {
ctx context.Context
}
func (b *App) startup(ctx context.Context) {
b.ctx = ctx
}
func (b *App) shutdown(ctx context.Context) {}
func (b *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
### Options rundown
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
A full list of application options can be found in the [Options Reference](/docs/reference/options).
#### Assets
The `Assets` option is mandatory as you can't have a Wails application without frontend assets. Those assets can be
any files you would expect to find in a web application - html, js, css, svg, png, etc. **There is no requirement to
generate asset bundles** - plain files will do. When the application starts, it will attempt to load `index.html`
from your assets and the frontend will essentially work as a browser from that point on. It is worth noting that
there is no requirement on where in the `embed.FS` the files live. It is likely that the embed path uses a nested
directory relative to your main application code, such as `frontend/dist`:
```go title="main.go"
// go:embed frontend/dist
var assets embed.FS
```
At startup, Wails will iterate the embedded files looking for the directory containing `index.html`. All other assets will be loaded relative
to this directory.
As production binaries use the files contained in `embed.FS`, there are no external files required to be shipped with
the application.
When running in development mode using the `wails dev` command, the assets are loaded off disk, and any changes result
in a "live reload". The location of the assets needs to be passed to the `wails dev` command using the `-assetdir` flag
and is likely to be the same as the embed path. It is hoped that in the future we can calculate this from the `embed.FS`
itself.
More details can be found in the [Application Development Guide](/docs/guides/appdev).
#### Application Lifecycle Callbacks
Just before the frontend is about to load `index.html`, a callback is made to the function provided in [OnStartup](/docs/reference/options#OnStartup).
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.
#### Method Binding
The `Bind` option is one of the most important options in a Wails application. It specifies which struct methods
to expose to the frontend. When the application starts, it examines the struct instances listed in `Bind`, determines
which methods are public (starts with an uppercase letter) and will generate Javascript versions of those methods that
can be called by the frontend code.
These methods are located in the frontend at `window.go.<packagename>.<struct>.<method>`.
In the example above, we bind `app`, which has one public method `Greet`.
This can be called in Javascript by calling `window.go.main.App.Greet`.
These 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
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
tags for your fields! It is also possible to send structs back to Go. Any Javascript map 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.
More information on Binding can be found in the [Binding Methods](/docs/guides/application-development#binding-methods)
section of the [Application Development Guide](/docs/guides/application-development).
## 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
All bound Go methods are available at `window.go.<package>.<struct>.<method>`. As stated in
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);
})
```
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
IDEs will process JSDoc to provide code completion and type hinting. This module is called `go`
and is generated in the directory specified by the `wailsjsdir` flag. In this module is a file
called `bindings.js` containing these wrappers. For the above example, the file contains the
following code:
```js title="bindings.js"
const go = {
"main": {
"App": {
/**
* Greet
* @param {Person} arg1 - Go Type: string
* @returns {Promise<string>} - Go Type: string
*/
"Greet": (arg1) => {
return window.go.main.App.Greet(arg1);
},
}
}
};
export default go;
```
#### Support for structs
There is also additional support for Go methods that use structs in their signature. All Go structs
specified by 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. These models align with the JSDoc annotations, empowering IDE code
completion.
Example: We update our `Greet` method to accept a `Person` instead of a string:
```go title="main.go"
type Person struct {
Name string `json:"name"`
Age uint8 `json:"age"`
Address *Address `json:"address"`
}
type Address struct {
Street string `json:"street"`
Postcode string `json:"postcode"`
}
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": {
/**
* Greet
* @param {Person} arg1 - Go Type: main.Person
* @returns {Promise<string>} - Go Type: string
*/
"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;
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"];
}
}
export class Person {
name: string;
age: number;
address?: Address;
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;
}
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;
}
}
```
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";
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);
});
}
```
The combination of JSDoc and TypeScript generated models makes for a powerful development environment.
### Calling runtime methods
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"
window.runtime.EventsEmit("my-event", 1);
```
More details about the JS runtime can be found in the [Runtime Reference](/docs/reference/runtime/intro).

4
website/docs/reference/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Reference",
"position": 40
}

178
website/docs/reference/cli.mdx Normal file
View File

@ -0,0 +1,178 @@
---
sidebar_position: 2
---
# CLI
The Wails CLI has a number of commands that are used for managing your projects. All commands are run in the following way:
`wails <command> <flags>`
## init
`wails init` is used for generating projects.
| Flag | Description | Default |
| :------------------- | :------------------------------------- | :------------------------- |
| -n "project name" | Name of the project. **Mandatory**. | |
| -d "project dir" | Project directory to create | Name of the project |
| -g | Initialise git repository | |
| -l | List available project templates | |
| -q | Suppress output to console | |
| -t "template name" | The project template to use. This can be the name of a default template or a URL to a remote template hosted on github. | vanilla |
| -vscode | Generate VSCode project files | |
| -f | Force build application | false |
Example:
`wails init -n test -d mytestproject -g -vscode -q`
This will generate a a project called "test" in the "mytestproject" directory, initialise git,
generate vscode project files and do so silently.
More information on using IDEs with Wails can be found [here](/docs/guides/ides).
### Remote Templates
Remote templates (hosted on GitHub) are supported and can be installed by using the template's project URL.
Example:
`wails init -n test -t https://github.com/leaanthony/testtemplate`
A list of community maintained templates can be found [here](/docs/community/templates)
:::warning Attention
**The Wails project does not maintain, is not responsible nor liable for 3rd party templates!**
If you are unsure about a template, inspect `package.json` and `wails.json` for what scripts are run and what packages are installed.
:::
## build
`wails build` is used for compiling your project to a production-ready binary.
| Flag | Description | Default |
| :------------------- | :-------------------------------------- | :------------------------- |
| -clean | Cleans the `build/bin` directory | |
| -compiler "compiler"| Use a different go compiler to build, eg go1.15beta1 | go |
| -ldflags "flags" | Additional ldflags to pass to the compiler | |
| -nopackage | Do not package application | |
| -o filename | Output filename | |
| -s | Skip building the frontend | |
| -f | Force build application | false |
| -tags "extra tags" | Build tags to pass to compiler (quoted and space separated) | |
| -upx | Compress final binary using "upx" | |
| -upxflags | Flags to pass to upx | |
| -v int | Verbosity level (0 - silent, 1 - default, 2 - verbose) | 1 |
| -webview2 | WebView2 installer strategy: download,embed,browser,error | download |
If you prefer to build using standard Go tooling, please consult the [Manual Builds](/docs/guides/manual-builds)
guide.
Example:
`wails build -clean -o myproject.exe`
## doctor
`wails doctor` will run diagnostics to ensure that your system is ready for development.
Example:
```
Wails CLI v2.0.0-beta
Scanning system - Please wait (this may take a long time)...Done.
System
------
OS: Windows 10 Pro
Version: 2009 (Build: 19043)
ID: 21H1
Go Version: go1.17
Platform: windows
Architecture: amd64
Dependency Package Name Status Version
---------- ------------ ------ -------
WebView2 N/A Installed 93.0.961.52
npm N/A Installed 6.14.15
*upx N/A Installed upx 3.96
* - Optional Dependency
Diagnosis
---------
Your system is ready for Wails development!
```
## dev
`wails dev` is used to run your application in a "live development" mode. This means:
- The application is compiled and run automatically
- A watcher is started and will trigger a rebuild of your dev app if it detects changes to your go files
- A webserver is started on `http://localhost:34115` which serves your application (not just frontend) over http. This allows you to use your favourite browser development extensions
- All application assets are loaded from disk. If they are changed, the application will automatically reload (not rebuild). All connected browsers will also reload
- A JS module is generated that provides the following:
- Javascript wrappers of your Go methods with autogenerated JSDoc, providing code hinting
- TypeScript versions of your Go structs, that can be constructed and passed to your go methods
- A second JS module is generated that provides a wrapper + TS declaration for the runtime
| Flag | Description | Default |
| :------------------- | :-------------------------------------- | :------------------------- |
| -assetdir "./path/to/assets" | The path to your compiled assets | Value in `wails.json` |
| -browser | Opens a browser to `http://localhost:34115` on startup | |
| -compiler "compiler"| Use a different go compiler to build, eg go1.15beta1 | go |
| -e | Extensions to trigger rebuilds (comma separated) | go |
| -ldflags "flags" | Additional ldflags to pass to the compiler | |
| -tags "extra tags" | Build tags to pass to compiler (quoted and space separated) | |
| -loglevel "loglevel"| Loglevel to use - Trace, Debug, Info, Warning, Error | Debug |
| -noreload | Disable automatic reload when assets change | |
| -v | Verbosity level (0 - silent, 1 - standard, 2 - verbose) | 1 |
| -wailsjsdir | The directory to generate the generated Wails JS modules | Value store in `wails.json` |
If the `-assetdir` or `-wailsjsdir` flags are provided on the command line, they are saved in `wails.json`, and become
the defaults for subsequent invocations.
Example:
`wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src -browser`
This command will do the following:
- Build the application and run it (more details [here](/docs/guides/manual-builds)
- Generate the Wails JS modules in `./frontend/src`
- Watch for updates to files in `./frontend/dist` and reload on any change
- Open a browser and connect to the application
There is more information on using this feature with existing framework scripts [here](/docs/guides/application-development#live-reloading).
## generate
### template
Wails uses templates for project generation. The `wails generate template` command helps scaffold a template so that
it may be used for generating projects.
| Flag | Description |
| :------------------- | :------------------------------------------- |
| -name | The template name (Mandatory) |
| -frontend "path" | Path to frontend project to use in template |
For more details on creating templates, consult the [Templates guide](/docs/guides/templates).
## update
`wails update` will update the version of the Wails CLI.
| Flag | Description |
| :------------------- | :-------------------------------------- |
| -pre | Update to latest pre-release version |
| -version "version" | Install a specific version of the CLI |
## version
`wails version` will simply output the current CLI version.

233
website/docs/reference/menus.mdx Normal file
View File

@ -0,0 +1,233 @@
---
sidebar_position: 4
---
# Menus
It is possible to add an application menu to Wails projects. This is achieved by defining a [Menu](#menu) struct and
calling the runtime method [MenuSetApplicationMenu](/docs/reference/runtime/menu#menusetapplicationmenu).
It is also possible to dynamically update the menu, by updating the menu struct and calling
[MenuUpdateApplicationMenu](/docs/reference/runtime/menu#menuupdateapplicationmenu).
Example:
```go
myMenu := menu.NewMenuFromItems(
menu.SubMenu("File", menu.NewMenuFromItems(
menu.Text("&Open", keys.CmdOrCtrl("o"), openFile),
menu.Separator(),
menu.Text("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
runtime.Quit()
}),
)),
)
runtime.MenuSetApplicationMenu(myMenu)
```
The example above uses helper methods, however it's possible to build the menu structs manually.
## Menu
A Menu is a collection of MenuItems:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
type Menu struct {
Items []*MenuItem
}
```
For the Application menu, each MenuItem represents a single menu such as "Edit".
A simple helper method is provided for building menus:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func NewMenuFromItems(first *MenuItem, rest ...*MenuItem) *Menu
```
This makes the layout of the code more like that of a menu without the need to add the menu items manually after creating them.
Alternatively, you can just create the menu items and add them to the menu manually.
## MenuItem
A MenuItem represents an item within a Menu.
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
// MenuItem represents a menu item contained in a menu
type MenuItem struct {
Label string
Role Role
Accelerator *keys.Accelerator
Type Type
Disabled bool
Hidden bool
Checked bool
SubMenu *Menu
Click Callback
}
```
| Field | Type | Notes |
| ---------------- | ---------------------------------- | ----------------------------------------------------- |
| Label | string | The menu text |
| Accelerator | [\*keys.Accelerator](#accelerator) | Key binding for this menu item |
| Type | [Type](#type) | Type of MenuItem |
| Disabled | bool | Disables the menu item |
| Hidden | bool | Hides this menu item |
| Checked | bool | Adds check to item (Checkbox & Radio types) |
| SubMenu | [\*Menu](#menu) | Sets the submenu |
| Click | [Callback](#callback) | Callback function when menu clicked |
### Accelerator
Accelerators (sometimes called keyboard shortcuts) define a binding between a keystroke and a menu item. Wails defines
an Accelerator as a combination or key + [Modifier](#modifier). They are available in the `"github.com/wailsapp/wails/v2/pkg/menu/keys"` package.
Example:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines cmd+o on Mac and ctrl-o on Window/Linux
myShortcut := keys.CmdOrCtrl("o")
```
Keys are any single character on a keyboard with the exception of `+`, which is defined as `plus`.
Some keys cannot be represented as characters so there are a set of named characters that may be used:
- `backspace`
- `tab`
- `return`
- `enter`
- `escape`
- `left`
- `right`
- `up`
- `down`
- `space`
- `delete`
- `home`
- `end`
- `page up`
- `page down`
- `f1`
- `f2`
- `f3`
- `f4`
- `f5`
- `f6`
- `f7`
- `f8`
- `f9`
- `f10`
- `f11`
- `f12`
- `f13`
- `f14`
- `f15`
- `f16`
- `f17`
- `f18`
- `f19`
- `f20`
- `f21`
- `f22`
- `f23`
- `f24`
- `f25`
- `f26`
- `f27`
- `f28`
- `f29`
- `f30`
- `f31`
- `f32`
- `f33`
- `f34`
- `f35`
- `numlock`
Wails also supports parsing accelerators using the same syntax as Electron. This is useful for storing accelerators in
config files.
Example:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines cmd+o on Mac and ctrl-o on Window/Linux
myShortcut, err := keys.Parse("Ctrl+Option+A")
```
#### Modifier
The following modifiers are keys that may be used in combination with the accelerator key:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
const (
// CmdOrCtrlKey represents Command on Mac and Control on other platforms
CmdOrCtrlKey Modifier = "cmdorctrl"
// OptionOrAltKey represents Option on Mac and Alt on other platforms
OptionOrAltKey Modifier = "optionoralt"
// ShiftKey represents the shift key on all systems
ShiftKey Modifier = "shift"
// ControlKey represents the control key on all systems
ControlKey Modifier = "ctrl"
)
```
A number of helper methods are available to create Accelerators using modifiers:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
func CmdOrCtrl(key string) *Accelerator
func OptionOrAlt(key string) *Accelerator
func Shift(key string) *Accelerator
func Control(key string) *Accelerator
```
Modifiers can be combined using `keys.Combo(key string, modifier1 Modifier, modifier2 Modifier, rest ...Modifier)`:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines "Ctrl+Option+A" on Mac and "Ctrl+Alt+A" on Window/Linux
myShortcut := keys.Combo("a", ControlKey, OptionOrAltKey)
```
### Type
Each menu item must have a type and there are 5 types available:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
const (
TextType Type = "Text"
SeparatorType Type = "Separator"
SubmenuType Type = "Submenu"
CheckboxType Type = "Checkbox"
RadioType Type = "Radio"
)
```
For convenience, helper methods are provided to quickly create a menu item:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func Text(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
func Separator() *MenuItem
func Radio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func Checkbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func SubMenu(label string, menu *Menu) *MenuItem
```
A note on radio groups: A radio group is defined as a number of radio menu items that are next to each other in the menu.
This means that you do not need to group items together as it is automatic. However, that also means you cannot have 2
radio groups next to each other - there must be a non-radio item between them.
### Callback
Each menu item may have a callback that is executed when the item is clicked:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
type Callback func(*CallbackData)
type CallbackData struct {
MenuItem *MenuItem
}
```
The function is given a `CallbackData` struct which indicates which menu item triggered the callback. This is useful when
using radio groups that may share a callback.

275
website/docs/reference/options.mdx Normal file
View File

@ -0,0 +1,275 @@
---
sidebar_position: 3
---
# Options
## Application Options
The `Options.App` struct contains the application configuration.
It is passed to the `wails.Run()` method:
```go title="Example"
import "github.com/wailsapp/wails/v2/pkg/options"
func main() {
err := wails.Run(&options.App{
Title: "Menus Demo",
Width: 800,
Height: 600,
DisableResize: false,
Fullscreen: false,
Frameless: true,
MinWidth: 400,
MinHeight: 400,
MaxWidth: 1280,
MaxHeight: 1024,
StartHidden: false,
HideWindowOnClose: false,
RGBA: &options.RGBA{R: 0, G: 0, B: 0, A: 255},
Assets: assets,
Menu: app.applicationMenu(),
Logger: nil,
LogLevel: logger.DEBUG,
OnStartup: app.startup,
OnDomReady: app.domready,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
Windows: &windows.Options{
WebviewIsTransparent: false,
WindowIsTranslucent: false,
DisableWindowIcon: false,
},
})
if err != nil {
log.Fatal(err)
}
}
```
### Title
Name: Title
Type: string
The text shown in the window's title bar.
### Width
Name: Width
Type: int
The initial width of the window.
Default: 1024.
### Height
Name: Height
Type: int
The initial height of the window.
Default: 768
### DisableResize
Name: DisableResize
Type: bool
By default, the main window is resizable. Setting this to `true` will keep it a fixed size.
### Fullscreen
Name: Fullscreen
Type: bool
Setting this to `true` will make the window fullscreen at startup.
### Frameless
Name: Frameless
Type: bool
When set to `true`, the window will have no borders or title bar.
Also see [Frameless Windows](/docs/guides/frameless).
### MinWidth
Name: MinWidth
Type: int
This sets the minimum width for the window. If the value given in `Width` is less than this value,
the window will be set to `MinWidth` by default.
### MinHeight
Name: MinHeight
Type: int
This sets the minimum height for the window. If the value given in `Height` is less than this value,
the window will be set to `MinHeight` by default.
### MaxWidth
Name: MaxWidth
Type: int
This sets the maximum width for the window. If the value given in `Width` is more than this value,
the window will be set to `MaxWidth` by default.
### MaxHeight
Name: MaxHeight
Type: int
This sets the maximum height for the window. If the value given in `Height` is more than this value,
the window will be set to `MaxHeight` by default.
### StartHidden
Name: StartHidden
Type: bool
When set to `true`, the application will be hidden until [WindowShow](/docs/reference/runtime/window#WindowShow)
is called.
### HideWindowOnClose
Name: HideWindowOnClose
Type: bool
By default, closing the window will close the application. Setting this to `true` means closing the window will
hide the window instead.
### RGBA
Name: RGBA
Type: int (0xRRGGBBAA)
Example: 0xFF000088 - Red at 50% transparency
This value is the RGBA value to set the window by default.
Default: 0xFFFFFFFF.
### Assets
Name: Assets
Type: \*embed.FS
The frontend assets to be used by the application. Requires an `index.html` file.
### Menu
Name: Menu
Type: \*menu.Menu
The menu to be used by the application. More details about Menus in the [Menu Reference](/docs/reference/runtime/menu).
### Logger
Name: Logger
Type: logger.Logger
Default: Logger to Stdout
The logger to be used by the application. More details about logging in the [Log Reference](/docs/reference/runtime/log).
### LogLevel
Name: LogLevel
Type: logger.LogLevel
Default: `Info` in dev mode, `Error` in production mode
The default log level. More details about logging in the [Log Reference](/docs/reference/runtime/log).
### OnStartup
Name: OnStartup
Type: func(ctx context.Context)
This callback is called after the frontend has been created, but before `index.html` has been loaded. It is given
the application context.
### OnDomReady
Name: OnDomReady
Type: func(ctx context.Context)
This callback is called after the frontend has loaded `index.html` and the DOM is ready. It is given
the application context.
### OnShutdown
Name: OnShutdown
Type: func(ctx context.Context)
This callback is called after the frontend has been destroyed, just before the application terminates. It is given
the application context.
### Bind
Name: Bind
Type: []interface{}
A slice of struct instances defining methods that need to be bound to the frontend.
### Windows
Name: Windows
Type: \*windows.Options
This defines [Windows specific options](#windows-specific-options).
## Windows Specific Options
### WebviewIsTransparent
Name: WebviewIsTransparent
Type: bool
Setting this to `true` will make the webview background transparent when an alpha value of `0` is used.
This means that if you use `rgba(0,0,0,0)`, the host window will show through.
Often combined with [WindowIsTranslucent](#WindowIsTranslucent) to make frosty-looking applications.
### WindowIsTranslucent
Name: WindowIsTranslucent
Type: bool
Setting this to `true` will make the window background translucent. Often combined
with [WebviewIsTransparent](#WebviewIsTransparent) to make frosty-looking applications.
### DisableWindowIcon
Name: DisableWindowIcon
Type: bool
Setting this to true will remove the icon in the top left corner of the title bar.

24
website/docs/reference/project-config.mdx Normal file
View File

@ -0,0 +1,24 @@
---
sidebar_position: 5
---
# Project Config
The project config resides in the `wails.json` file in the project directory. The structure of the config is:
```json
{
"name": "[The project name]",
"assetdir": "[Relative path to your assets directory]",
"frontend:install": "[The command to install node dependencies, run in the frontend directory - often `npm install`]",
"frontend:build": "[The command to build the assets, run in the frontend directory - often `npm run build`]",
"wailsjsdir": "[Relative path to the directory that the auto-generated JS modules will be created]",
"version": "[Project config version]",
"outputfilename": "[The name of the binary]"
}
```
This file is read by the Wails CLI when running `wails build` or `wails dev`.
The `assetdir` and `wailsjsdir` flags in `wails build/dev` will update the project config and thus become defaults for
subsequent runs.

4
website/docs/reference/runtime/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Runtime",
"position": 1
}

20
website/docs/reference/runtime/browser.mdx Normal file
View File

@ -0,0 +1,20 @@
---
sidebar_position: 7
---
# Browser
## Overview
These methods are related to the system browser.
### BrowserOpenURL
Go Signature: `BrowserOpenURL(ctx context.Context, url string)`
JS Signature: `BrowserOpenURL(url string)`
Opens the given URL in the system browser.

140
website/docs/reference/runtime/dialog.mdx Normal file
View File

@ -0,0 +1,140 @@
---
sidebar_position: 5
---
# Dialog
## Overview
This part of the runtime provides access to native dialogs, such as File Selectors and Message boxes.Context
:::info Javascript
Dialog is currently unsupported in the JS runtime.
:::
### OpenDirectoryDialog
Go Signature: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
Returns: Selected directory (blank if the user cancelled) or an error
Opens a dialog that prompts the user to select a directory. Can be customised using [OpenDialogOptions](#OpenDialogOptions).
### OpenFileDialog
Go Signature: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
Returns: Selected file (blank if the user cancelled) or an error
Opens a dialog that prompts the user to select a file. Can be customised using [OpenDialogOptions](#OpenDialogOptions).
### OpenMultipleFilesDialog
Go Signature: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`
Returns: Selected files (nil if the user cancelled) or an error
Opens a dialog that prompts the user to select multiple files. Can be customised using [OpenDialogOptions](#OpenDialogOptions).
### SaveFileDialog
Go Signature: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`
Returns: The selected file (blank if the user cancelled) or an error
Opens a dialog that prompts the user to select a filename for the purposes of saving. Can be customised using [SaveDialogOptions](#SaveDialogOptions).
### MessageDialog
Go Signature: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`
Returns: The text of the selected button or an error
Displays a message using a message dialog. Can be customised using [MessageDialogOptions](#MessageDialogOptions).
## Options
### OpenDialogOptions
```go
type OpenDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
AllowFiles bool // Mac Only
AllowDirectories bool // Mac Only
ShowHiddenFiles bool // Mac Only
CanCreateDirectories bool // Mac Only
ResolvesAliases bool // Mac Only
TreatPackagesAsDirectories bool // Mac Only
}
```
### SaveDialogOptions
```go
type SaveDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
ShowHiddenFiles bool // Mac Only
CanCreateDirectories bool // Mac Only
TreatPackagesAsDirectories bool // Mac Only
}
```
### MessageDialogOptions
```go
type MessageDialogOptions struct {
Type DialogType
Title string
Message string
Buttons []string
DefaultButton string // Mac Only
CancelButton string // Mac Only
Icon string // Mac Only
}
```
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">
Both "DefaultButton" and "CancelButton" should match a value in "Buttons".
</TabItem>
<TabItem value="Windows">
Windows has standard dialog types and the buttons are not customisable. The
value returned will be one of: "Ok", "Cancel", "Abort", "Retry", "Ignore", "Yes", "No", "Try Again" or "Continue"
</TabItem>
<TabItem value="Linux">
Coming Soon...
</TabItem>
</Tabs>
#### DialogType
```go
const (
InfoDialog DialogType = "info"
WarningDialog DialogType = "warning"
ErrorDialog DialogType = "error"
QuestionDialog DialogType = "question"
)
```
### FileFilter
```go
type FileFilter struct {
DisplayName string // Filter information EG: "Image Files (*.jpg, *.png)"
Pattern string // semi-colon separated list of extensions, EG: "*.jpg;*.png"
}
```

51
website/docs/reference/runtime/events.mdx Normal file
View File

@ -0,0 +1,51 @@
---
sidebar_position: 2
---
# Events
## Overview
The Wails runtime provides a unified events system, where events can be emitted or received by either Go or Javascript.
Optionally, data may be passed with the events. Listeners will receive the data in the local data types.
### EventsOn
Go Signature: `EventsOn(ctx context.Context, eventName string, callback func(optionalData ...interface{}))`
JS Signature: `EventsOn(eventName string, callback function(optionalData?: any))`
This method sets up a listener for the given event name. When an event of type `eventName` is [emitted](#EventsEmit),
the callback is triggered. Any additional data sent with the emitted event will be passed to the callback.
### EventsOff
Go Signature: `EventsOff(ctx context.Context, eventName string)`
JS Signature: `EventsOff(eventName string)`
This method unregisters the listener for the given event name.
### EventsOnce
Go Signature: `EventsOnce(ctx context.Context, eventName string, callback func(optionalData ...interface{}))`
JS Signature: `EventsOnce(eventName string, callback function(optionalData?: any))`
This method sets up a listener for the given event name, but will only trigger once.
### EventsOnMultiple
Go Signature: `EventsOnMultiple(ctx context.Context, eventName string, callback func(optionalData ...interface{}), counter int)`
JS Signature: `EventsOnMultiple(eventName string, callback function(optionalData?: any), counter int)`
This method sets up a listener for the given event name, but will only trigger a maximum of `counter` times.
### EventsEmit
Go Signature: `Events(ctx context.Context, eventName string, optionalData ...interface{})`
JS Signature: `Events(ctx context, optionalData function(optionalData?: any))`
This method emits the given event. Optional data may be passed with the event. This will trigger any event listeners.

16
website/docs/reference/runtime/intro.mdx Normal file
View File

@ -0,0 +1,16 @@
---
sidebar_position: 1
---
# Introduction
The runtime is a library that provides utility methods for your application. There is both a Go and Javascript runtime
and the aim is to try and keep them at parity where possible.
The Go Runtime is available through importing `github.com/wailsapp/wails/v2/pkg/runtime`. All methods in this package
take a context as the first parameter. This context can be obtained from the [OnStartup](/docs/reference/options#OnStartup)
or [OnDomReady](/docs/reference/options#OnDomReady) hooks.
The Javascript library is available to the frontend via the `window.runtime` map. There is a runtime package generated when using `dev`
mode that provides Typescript declarations for the runtime. This should be located in the `wailsjs` directory in your
frontend directory.

114
website/docs/reference/runtime/log.mdx Normal file
View File

@ -0,0 +1,114 @@
---
sidebar_position: 3
---
# Log
## Overview
The Wails runtime provides a logging mechanism that may be called from Go or Javascript. Like most
loggers, there are a number of log levels:
- Trace
- Debug
- Info
- Warning
- Error
- Fatal
The logger will output any log message at the current, or higher, log level. Example: The `Debug` log
level will output all messages except `Trace` messages.
### LogPrint
Go Signature: `LogPrint(ctx context.Context, message string)`
JS Signature: `LogPrint(message: string)`
Logs the given message as a raw message.
### LogTrace
Go Signature: `LogTrace(ctx context.Context, message string)`
JS Signature: `LogTrace(message: string)`
Logs the given message at the `Trace` log level.
### LogDebug
Go Signature: `LogDebug(ctx context.Context, message string)`
JS Signature: `LogDebug(message: string)`
Logs the given message at the `Debug` log level.
### LogInfo
Go Signature: `LogInfo(ctx context.Context, message string)`
JS Signature: `LogInfo(message: string)`
Logs the given message at the `Info` log level.
### LogWarning
Go Signature: `LogWarning(ctx context.Context, message string)`
JS Signature: `LogWarning(message: string)`
Logs the given message at the `Warning` log level.
### LogError
Go Signature: `LogError(ctx context.Context, message string)`
JS Signature: `LogError(message: string)`
Logs the given message at the `Error` log level.
### LogFatal
Go Signature: `LogFatal(ctx context.Context, message string)`
JS Signature: `LogFatal(message: string)`
Logs the given message at the `Fatal` log level.
### LogSetLogLevel
Go Signature: `LogSetLogLevel(ctx context.Context, level logger.LogLevel)`
JS Signature: `LogSetLogLevel(level: number)`
Sets the log level. In Javascript, the number relates to the following log levels:
| Value | Log Level |
| ----- | --------- |
| 1 | Trace |
| 2 | Debug |
| 3 | Info |
| 4 | Warning |
| 5 | Error |
## Using a Custom Logger
A custom logger may be used by providing it using the [Logger](/docs/reference/options#logger)
application option. The only requirement is that the logger implements the `logger.Logger` interface
defined in `github.com/wailsapp/wails/v2/pkg/logger`:
```go title="logger.go"
type Logger interface {
Print(message string)
Trace(message string)
Debug(message string)
Info(message string)
Warning(message string)
Error(message string)
Fatal(message string)
}
```

25
website/docs/reference/runtime/menu.mdx Normal file
View File

@ -0,0 +1,25 @@
---
sidebar_position: 6
---
# Menu
## Overview
These methods are related to the application menu.
:::info Javascript
Menu is currently unsupported in the JS runtime.
:::
### MenuSetApplicationMenu
Go Signature: `MenuSetApplicationMenu(ctx context.Context, menu *menu.Menu)`
Sets the application menu to the given [menu](/docs/reference/menus) .
### MenuUpdateApplicationMenu
Go Signature: `MenuUpdateApplicationMenu(ctx context.Context)`
Updates the application menu, picking up any changes to the menu passed to `MenuSetApplicationMenu`.

184
website/docs/reference/runtime/window.mdx Normal file
View File

@ -0,0 +1,184 @@
---
sidebar_position: 4
---
# Window
## Overview
These methods give control of the application window.
### WindowSetTitle
Go Signature: `WindowSetTitle(ctx context.Context, title string)`
JS Signature: `WindowSetTitle(title: string)`
Sets the text in the window title bar.
### WindowFullscreen
Go Signature: `WindowFullscreen(ctx context.Context)`
JS Signature: `WindowFullscreen()`
Makes the window full screen.
### WindowUnFullscreen
Go Signature: `WindowUnFullscreen(ctx context.Context)`
JS Signature: `WindowUnFullscreen()`
Restores the previous window dimensions and position prior to full screen.
### WindowCenter
Go Signature: `WindowCenter(ctx context.Context)`
JS Signature: `WindowCenter()`
Centers the window on the monitor the window is currently on.
### WindowReload
Go Signature: `WindowReload(ctx context.Context)`
JS Signature: `WindowReload()`
Performs a "reload" (Reloads index.html)
### WindowShow
Go Signature: `WindowShow(ctx context.Context)`
JS Signature: `WindowShow()`
Shows the window, if it is currently hidden.
### WindowHide
Go Signature: `WindowHide(ctx context.Context)`
JS Signature: `WindowHide()`
Hides the window, if it is currently visible.
### WindowSetSize
Go Signature: `WindowSetSize(ctx context.Context, width int, height int)`
JS Signature: `WindowSetSize(size: Size)`
Sets the width and height of the window.
### WindowGetSize
Go Signature: `WindowGetSize(ctx context.Context) (width int, height int)`
JS Signature: `WindowGetSize() : Size`
Gets the width and height of the window.
### WindowSetMinSize
Go Signature: `WindowSetMinSize(ctx context.Context, width int, height int)`
JS Signature: `WindowSetMinSize(size: Size)`
Sets the minimum window size.
Will resize the window if the window is currently smaller than the given dimensions.
Setting a size of `0,0` will disable this constraint.
### WindowSetMaxSize
Go Signature: `WindowSetMaxSize(ctx context.Context, width int, height int)`
JS Signature: `WindowSetMaxSize(size: Size)`
Sets the maximum window size.
Will resize the window if the window is currently larger than the given dimensions.
Setting a size of `0,0` will disable this constraint.
### WindowSetPosition
Go Signature: `WindowSetPosition(ctx context.Context, x int, y int)`
JS Signature: `WindowSetPosition(position: Position)`
Sets the window position relative to the monitor the window is currently on.
### WindowGetPosition
Go Signature: `WindowGetPosition(ctx context.Context) (x int, y int)`
JS Signature: `WindowGetPosition() : Position`
Gets the window position relative to the monitor the window is currently on.
### WindowMaximise
Go Signature: `WindowMaximise(ctx context.Context)`
JS Signature: `WindowMaximise()`
Maximises the window to fill the screen.
### WindowUnmaximise
Go Signature: `WindowUnmaximise(ctx context.Context)`
JS Signature: `WindowUnmaximise()`
Restores the window to the dimensions and position prior to maximising.
### WindowMinimise
Go Signature: `WindowMinimise(ctx context.Context)`
JS Signature: `WindowMinimise()`
Minimises the window.
### WindowUnminimise
Go Signature: `WindowUnminimise(ctx context.Context)`
JS Signature: `WindowUnminimise()`
Restores the window to the dimensions and position prior to minimising.
### WindowSetRGBA
Go Signature: `WindowSetRGBA(ctx context.Context, col *options.RGBA)`
JS Signature: `WindowSetRGBA(col: RGBA)`
Sets the background colour of the window to the given [RGBA](window#rgba) colour definition.
This colour will show through for all transparent pixels.
Valid values for R, G, B and A are 0-255.
:::info Windows
On Windows, only alpha values of 0 or 255 are supported.
Any value that is not 0 will be considered 255.
:::
## Typescript Object Definitions
### Position
```ts
interface Position {
x: number;
y: number;
}
```
### Size
```ts
interface Size {
w: number;
h: number;
}
```
### RGBA
```ts
interface RGBA {
r,
g,
b,
a: number;
}
```

24
website/docs/stats.mdx Normal file
View File

@ -0,0 +1,24 @@
---
sidebar_position: 100
---
# Website Stats
To enable us to understand how better to focus our efforts on translations and platform support,
we use [Plausible](https://plausible.io/privacy-focused-web-analytics) to gather **anonymous** stats like country and platform.
We chose Plausible because we believe in respecting the privacy of our users.
We also believe in transparency, therefore have made the dashboard public.
If you have any concerns or suggestions, please raise them in the projects github discussions.
<head>
<script async src="https://plausible.io/js/embed.host.js"></script>
</head>
export const NewComponent = () => (
<div>
<iframe plausible-embed="true" src="https://plausible.io/share/beta.wails.io?auth=wJa_HtqinG_eosqMjP-T1&embed=true&theme=system" scrolling="no" frameBorder={0} loading="lazy" style={{width: '1px', minWidth: '100%', height: '1600px'}} />
</div>
);
<NewComponent/>

162
website/docusaurus.config.js Normal file
View File

@ -0,0 +1,162 @@
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/palenight');
// With JSDoc @type annotations, IDEs can provide config autocompletion
/** @type {import('@docusaurus/types').DocusaurusConfig} */
(module.exports = {
title: 'Wails',
tagline: 'Build applications using Go + HTML + CSS + JS (BETA)',
url: 'https://wails.io',
baseUrl: '/',
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'wailsapp', // Usually your GitHub org/user name.
projectName: 'wails', // Usually your repo name.
// i18n
i18n: {
defaultLocale: 'en',
locales: ['en', 'zh-Hans'],
localeConfigs: {
en: {
label: 'English',
direction: 'ltr',
},
"zh-Hans": {
label: '简体中文',
direction: 'ltr',
},
},
},
plugins: [
[
'docusaurus-plugin-plausible',
{
domain: 'beta.wails.io',
},
],
],
presets: [
[
'@docusaurus/preset-classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl: 'https://github.com/wailsapp/wails/website',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/wailsapp/wails/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
announcementBar: {
id: 'beta-message',
content: 'Wails v2 is currently Beta for Windows. Mac & Linux in progress.',
backgroundColor: '#b00',
textColor: '#FFF',
isCloseable: false,
},
colorMode: {
respectPrefersColorScheme: true,
defaultMode: 'dark',
},
navbar: {
title: 'Wails',
logo: {
alt: 'Wails Logo',
src: 'img/wails-logo-horizontal.svg',
srcDark: 'img/wails-logo-horizontal-dark.svg',
},
items: [
{
type: 'docsVersionDropdown', //version
position: 'left',
dropdownActiveClassDisabled: true,
dropdownItemsAfter: [
// { to: 'https://v1.wails.app', label: '1.13.1', },
// { to: '/versions', label: 'All versions', }, //Can add custom pages
],
},
{
to: 'https://github.com/sponsors/leaanthony',
label: 'Sponsor',
position: 'left',
},
{
type: 'doc',
docId: 'about',
position: 'right',
label: 'About',
},
{to: '/blog', label: 'Blog', position: 'right'},
{type: 'localeDropdown', position: 'right',},
{
href: 'https://github.com/wailsapp/wails',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'About',
to: '/docs/about',
},
],
},
{
title: 'Community',
items: [
{
label: 'Github',
href: 'https://github.com/wailsapp/wails',
},
{
label: 'Twitter',
href: 'https://twitter.com/wailsapp',
},
{
label: 'Slack',
href: 'https://gophers.slack.com/messages/CJ4P9F7MZ/',
},
{
label: 'Slack invite',
href: 'https://invite.slack.golangbridge.org/',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: '/blog',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Lea Anthony. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
});

206
website/i18n/en/code.json Normal file
View File

@ -0,0 +1,206 @@
{
"theme.NotFound.title": {
"message": "Page Not Found",
"description": "The title of the 404 page"
},
"theme.NotFound.p1": {
"message": "We could not find what you were looking for.",
"description": "The first paragraph of the 404 page"
},
"theme.NotFound.p2": {
"message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
"description": "The 2nd paragraph of the 404 page"
},
"theme.AnnouncementBar.closeButtonAriaLabel": {
"message": "Close",
"description": "The ARIA label for close button of announcement bar"
},
"theme.blog.archive.title": {
"message": "Archive",
"description": "The page & hero title of the blog archive page"
},
"theme.blog.archive.description": {
"message": "Archive",
"description": "The page & hero description of the blog archive page"
},
"theme.blog.paginator.navAriaLabel": {
"message": "Blog list page navigation",
"description": "The ARIA label for the blog pagination"
},
"theme.blog.paginator.newerEntries": {
"message": "Newer Entries",
"description": "The label used to navigate to the newer blog posts page (previous page)"
},
"theme.blog.paginator.olderEntries": {
"message": "Older Entries",
"description": "The label used to navigate to the older blog posts page (next page)"
},
"theme.blog.post.readingTime.plurals": {
"message": "One min read|{readingTime} min read",
"description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.blog.post.readMore": {
"message": "Read More",
"description": "The label used in blog post item excerpts to link to full blog posts"
},
"theme.blog.post.paginator.navAriaLabel": {
"message": "Blog post page navigation",
"description": "The ARIA label for the blog posts pagination"
},
"theme.blog.post.paginator.newerPost": {
"message": "Newer Post",
"description": "The blog post button label to navigate to the newer/previous post"
},
"theme.blog.post.paginator.olderPost": {
"message": "Older Post",
"description": "The blog post button label to navigate to the older/next post"
},
"theme.blog.sidebar.navAriaLabel": {
"message": "Blog recent posts navigation",
"description": "The ARIA label for recent posts in the blog sidebar"
},
"theme.blog.post.plurals": {
"message": "One post|{count} posts",
"description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.blog.tagTitle": {
"message": "{nPosts} tagged with \"{tagName}\"",
"description": "The title of the page for a blog tag"
},
"theme.tags.tagsPageLink": {
"message": "View All Tags",
"description": "The label of the link targeting the tag list page"
},
"theme.CodeBlock.copyButtonAriaLabel": {
"message": "Copy code to clipboard",
"description": "The ARIA label for copy code blocks button"
},
"theme.CodeBlock.copied": {
"message": "Copied",
"description": "The copied button label on code blocks"
},
"theme.CodeBlock.copy": {
"message": "Copy",
"description": "The copy button label on code blocks"
},
"theme.docs.sidebar.expandButtonTitle": {
"message": "Expand sidebar",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
},
"theme.docs.sidebar.expandButtonAriaLabel": {
"message": "Expand sidebar",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
},
"theme.docs.paginator.navAriaLabel": {
"message": "Docs pages navigation",
"description": "The ARIA label for the docs pagination"
},
"theme.docs.paginator.previous": {
"message": "Previous",
"description": "The label used to navigate to the previous doc"
},
"theme.docs.paginator.next": {
"message": "Next",
"description": "The label used to navigate to the next doc"
},
"theme.docs.sidebar.collapseButtonTitle": {
"message": "Collapse sidebar",
"description": "The title attribute for collapse button of doc sidebar"
},
"theme.docs.sidebar.collapseButtonAriaLabel": {
"message": "Collapse sidebar",
"description": "The title attribute for collapse button of doc sidebar"
},
"theme.docs.tagDocListPageTitle.nDocsTagged": {
"message": "One doc tagged|{count} docs tagged",
"description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.docs.tagDocListPageTitle": {
"message": "{nDocsTagged} with \"{tagName}\"",
"description": "The title of the page for a docs tag"
},
"theme.docs.versions.unreleasedVersionLabel": {
"message": "This is unreleased documentation for {siteTitle} {versionLabel} version.",
"description": "The label used to tell the user that he's browsing an unreleased doc version"
},
"theme.docs.versions.unmaintainedVersionLabel": {
"message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.",
"description": "The label used to tell the user that he's browsing an unmaintained doc version"
},
"theme.docs.versions.latestVersionSuggestionLabel": {
"message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).",
"description": "The label used to tell the user to check the latest version"
},
"theme.docs.versions.latestVersionLinkLabel": {
"message": "latest version",
"description": "The label used for the latest version suggestion link label"
},
"theme.common.editThisPage": {
"message": "Edit this page",
"description": "The link label to edit the current page"
},
"theme.common.headingLinkTitle": {
"message": "Direct link to heading",
"description": "Title for link to heading"
},
"theme.lastUpdated.atDate": {
"message": " on {date}",
"description": "The words used to describe on which date a page has been last updated"
},
"theme.lastUpdated.byUser": {
"message": " by {user}",
"description": "The words used to describe by who the page has been last updated"
},
"theme.lastUpdated.lastUpdatedAtBy": {
"message": "Last updated{atDate}{byUser}",
"description": "The sentence used to display when a page has been last updated, and by who"
},
"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
"message": "← Back to main menu",
"description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
},
"theme.navbar.mobileVersionsDropdown.label": {
"message": "Versions",
"description": "The label for the navbar versions dropdown on mobile view"
},
"theme.common.skipToMainContent": {
"message": "Skip to main content",
"description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
},
"theme.tags.tagsListLabel": {
"message": "Tags:",
"description": "The label alongside a tag list"
},
"theme.TOCCollapsible.toggleButtonLabel": {
"message": "On this page",
"description": "The label used by the button on the collapsible TOC component"
},
"theme.tags.tagsPageTitle": {
"message": "Tags",
"description": "The title of the tag list page"
},
"homepage.Tagline": {
"message": "Build applications using Go + HTML + CSS + JS"
},
"homepage.ButtonText": {
"message": "Get Started"
},
"homepage.Features.Title1": {
"message": "Feature Rich"
},
"homepage.Features.Title2": {
"message": "Familiar"
},
"homepage.Features.Title3": {
"message": "Fast"
},
"homepage.Features.Description1": {
"message": "Build comprehensive cross-platform applications using native UI elements such as menus, dialogs, etc."
},
"homepage.Features.Description2": {
"message": "Use the technologies you already know to build amazing applications."
},
"homepage.Features.Description3": {
"message": "Quickly generate, build and package your projects using the Wails CLI."
}
}

14
website/i18n/en/docusaurus-plugin-content-blog/options.json Normal file
View File

@ -0,0 +1,14 @@
{
"title": {
"message": "Blog",
"description": "The title for the blog used in SEO"
},
"description": {
"message": "Blog",
"description": "The description for the blog used in SEO"
},
"sidebar.title": {
"message": "Recent posts",
"description": "The label for the left sidebar"
}
}

26
website/i18n/en/docusaurus-plugin-content-docs/current.json Normal file
View File

@ -0,0 +1,26 @@
{
"version.label": {
"message": "Beta Version",
"description": "The label for version current"
},
"sidebar.tutorialSidebar.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Examples": {
"message": "Examples",
"description": "The label for category Examples in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar tutorialSidebar"
}
}

42
website/i18n/en/docusaurus-theme-classic/footer.json Normal file
View File

@ -0,0 +1,42 @@
{
"link.title.Docs": {
"message": "Docs",
"description": "The title of the footer links column with title=Docs in the footer"
},
"link.title.Community": {
"message": "Community",
"description": "The title of the footer links column with title=Community in the footer"
},
"link.title.More": {
"message": "More",
"description": "The title of the footer links column with title=More in the footer"
},
"link.item.label.About": {
"message": "About",
"description": "The label of footer link with label=About linking to /docs/about"
},
"link.item.label.Github": {
"message": "Github",
"description": "The label of footer link with label=Github linking to https://github.com/wailsapp/wails"
},
"link.item.label.Twitter": {
"message": "Twitter",
"description": "The label of footer link with label=Twitter linking to https://twitter.com/wailsapp"
},
"link.item.label.Slack": {
"message": "Slack",
"description": "The label of footer link with label=Slack linking to https://gophers.slack.com/messages/CJ4P9F7MZ/"
},
"link.item.label.Slack invite": {
"message": "Slack invite",
"description": "The label of footer link with label=Slack invite linking to https://invite.slack.golangbridge.org/"
},
"link.item.label.Blog": {
"message": "Blog",
"description": "The label of footer link with label=Blog linking to /blog"
},
"copyright": {
"message": "Copyright © 2021 Lea Anthony. Built with Docusaurus.",
"description": "The footer copyright"
}
}

26
website/i18n/en/docusaurus-theme-classic/navbar.json Normal file
View File

@ -0,0 +1,26 @@
{
"title": {
"message": "",
"description": "The title in the navbar"
},
"item.label.About": {
"message": "About",
"description": "Navbar item with label About"
},
"item.label.Showcase": {
"message": "Showcase",
"description": "Navbar item with label Showcase"
},
"item.label.Blog": {
"message": "Blog",
"description": "Navbar item with label Blog"
},
"item.label.GitHub": {
"message": "GitHub",
"description": "Navbar item with label GitHub"
},
"item.label.Sponsor": {
"message": "Sponsor ❤",
"description": "Navbar item with label Sponsor"
}
}

206
website/i18n/zh-Hans/code.json Normal file
View File

@ -0,0 +1,206 @@
{
"theme.NotFound.title": {
"message": "找不到页面",
"description": "The title of the 404 page"
},
"theme.NotFound.p1": {
"message": "我们找不到您要找的页面。",
"description": "The first paragraph of the 404 page"
},
"theme.NotFound.p2": {
"message": "请联系原始链接来源网站的所有者，并告知他们链接已损坏。",
"description": "The 2nd paragraph of the 404 page"
},
"theme.AnnouncementBar.closeButtonAriaLabel": {
"message": "关闭",
"description": "The ARIA label for close button of announcement bar"
},
"theme.blog.archive.title": {
"message": "Archive",
"description": "The page & hero title of the blog archive page"
},
"theme.blog.archive.description": {
"message": "Archive",
"description": "The page & hero description of the blog archive page"
},
"theme.blog.paginator.navAriaLabel": {
"message": "博文列表分页导航",
"description": "The ARIA label for the blog pagination"
},
"theme.blog.paginator.newerEntries": {
"message": "较新的博文",
"description": "The label used to navigate to the newer blog posts page (previous page)"
},
"theme.blog.paginator.olderEntries": {
"message": "较旧的博文",
"description": "The label used to navigate to the older blog posts page (next page)"
},
"theme.blog.post.readingTime.plurals": {
"message": "{readingTime} 分钟阅读",
"description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.blog.post.readMore": {
"message": "阅读更多",
"description": "The label used in blog post item excerpts to link to full blog posts"
},
"theme.blog.post.paginator.navAriaLabel": {
"message": "博文分页导航",
"description": "The ARIA label for the blog posts pagination"
},
"theme.blog.post.paginator.newerPost": {
"message": "较新一篇",
"description": "The blog post button label to navigate to the newer/previous post"
},
"theme.blog.post.paginator.olderPost": {
"message": "较旧一篇",
"description": "The blog post button label to navigate to the older/next post"
},
"theme.blog.sidebar.navAriaLabel": {
"message": "最近博文导航",
"description": "The ARIA label for recent posts in the blog sidebar"
},
"theme.blog.post.plurals": {
"message": "{count} 篇博文",
"description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.blog.tagTitle": {
"message": "{nPosts} 含有标签「{tagName}」",
"description": "The title of the page for a blog tag"
},
"theme.tags.tagsPageLink": {
"message": "查看所有标签",
"description": "The label of the link targeting the tag list page"
},
"theme.CodeBlock.copyButtonAriaLabel": {
"message": "复制代码到剪贴板",
"description": "The ARIA label for copy code blocks button"
},
"theme.CodeBlock.copied": {
"message": "复制成功",
"description": "The copied button label on code blocks"
},
"theme.CodeBlock.copy": {
"message": "复制",
"description": "The copy button label on code blocks"
},
"theme.docs.sidebar.expandButtonTitle": {
"message": "展开侧边栏",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
},
"theme.docs.sidebar.expandButtonAriaLabel": {
"message": "展开侧边栏",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
},
"theme.docs.paginator.navAriaLabel": {
"message": "文档分页导航",
"description": "The ARIA label for the docs pagination"
},
"theme.docs.paginator.previous": {
"message": "上一页",
"description": "The label used to navigate to the previous doc"
},
"theme.docs.paginator.next": {
"message": "下一页",
"description": "The label used to navigate to the next doc"
},
"theme.docs.sidebar.collapseButtonTitle": {
"message": "收起侧边栏",
"description": "The title attribute for collapse button of doc sidebar"
},
"theme.docs.sidebar.collapseButtonAriaLabel": {
"message": "收起侧边栏",
"description": "The title attribute for collapse button of doc sidebar"
},
"theme.docs.tagDocListPageTitle.nDocsTagged": {
"message": "{count} 篇文档带有标签",
"description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.docs.tagDocListPageTitle": {
"message": "{nDocsTagged} 含有标签「{tagName}」",
"description": "The title of the page for a docs tag"
},
"theme.docs.versions.unreleasedVersionLabel": {
"message": "此为 {siteTitle} {versionLabel} 版尚未发行的文档。",
"description": "The label used to tell the user that he's browsing an unreleased doc version"
},
"theme.docs.versions.unmaintainedVersionLabel": {
"message": "此为 {siteTitle} {versionLabel} 版的文档，现已不再积极维护。",
"description": "The label used to tell the user that he's browsing an unmaintained doc version"
},
"theme.docs.versions.latestVersionSuggestionLabel": {
"message": "最新的文档请参阅 {latestVersionLink} ({versionLabel})。",
"description": "The label used to tell the user to check the latest version"
},
"theme.docs.versions.latestVersionLinkLabel": {
"message": "最新版本",
"description": "The label used for the latest version suggestion link label"
},
"theme.common.editThisPage": {
"message": "编辑此页",
"description": "The link label to edit the current page"
},
"theme.common.headingLinkTitle": {
"message": "标题的直接链接",
"description": "Title for link to heading"
},
"theme.lastUpdated.atDate": {
"message": "于 {date} ",
"description": "The words used to describe on which date a page has been last updated"
},
"theme.lastUpdated.byUser": {
"message": "由 {user} ",
"description": "The words used to describe by who the page has been last updated"
},
"theme.lastUpdated.lastUpdatedAtBy": {
"message": "最后{byUser}{atDate}更新",
"description": "The sentence used to display when a page has been last updated, and by who"
},
"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
"message": "← 回到主菜单",
"description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
},
"theme.navbar.mobileVersionsDropdown.label": {
"message": "选择版本",
"description": "The label for the navbar versions dropdown on mobile view"
},
"theme.common.skipToMainContent": {
"message": "跳到主要内容",
"description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
},
"theme.tags.tagsListLabel": {
"message": "标签：",
"description": "The label alongside a tag list"
},
"theme.TOCCollapsible.toggleButtonLabel": {
"message": "本页总览",
"description": "The label used by the button on the collapsible TOC component"
},
"theme.tags.tagsPageTitle": {
"message": "标签",
"description": "The title of the tag list page"
},
"homepage.Tagline": {
"message": "使用 Go + HTML + CSS + JS 构建桌面应用"
},
"homepage.ButtonText": {
"message": "开始使用"
},
"homepage.Features.Title1": {
"message": "功能丰富"
},
"homepage.Features.Title2": {
"message": "技术熟悉"
},
"homepage.Features.Title3": {
"message": "方便快捷"
},
"homepage.Features.Description1": {
"message": "使用原生UI元素(如菜单、对话框等)构建全面的跨平台应用程序。"
},
"homepage.Features.Description2": {
"message": "使用您已经知道的技术来构建出色的应用程序。"
},
"homepage.Features.Description3": {
"message": "使用Wails CLI快速生成，构建和打包项目。"
}
}

50
website/i18n/zh-Hans/docusaurus-plugin-content-blog/2021-09-27-v2-beta1-release-notes.mdx Normal file
View File

@ -0,0 +1,50 @@
---
slug: wails-v2-beta-for-windows
title: Windows 版的 Wails v2 公测啦
authors:
- name: Lea Anthony
title: Wails 项目作者
url: https://github.com/leaanthony
image_url: https://github.com/leaanthony.png
tags: [wails, v2]
---
两年多前，在悉尼的火车上，当我第一次在 Reddit 宣布 Wails 时，我没想到它会引起太多关注。几天后，一位多产的科技视频博主发布了一个教程视频，并给予了正面评价，从那时起，人们对这个项目的兴趣直线上升。
人们对在他们的 Go 项目中添加 web 前端感到兴奋，几乎立即在这个项目推送并超出了我创建这个项目的设想。当时，Wails 使用 [webview](https://github.com/webview/webview) 项目来处理前端，
Windows 的唯一选择是 IE11 渲染器。许多错误报告都因为受到它的限制：糟糕的 JavaScript/CSS 支持并且没有开发工具来调试它。这是一段令人沮丧的开发经历，但我们也没有采取什么措施去纠正它。
很长一段时间以来，我一直坚信微软最终会解决他们的浏览器问题。世界在不断进步，前端开发正在蓬勃发展，而 IE 并没有做到这一点。当微软宣布将 Chromium 作为其新浏览器方向的基础时，
我知道 Wails 能够使用它并将 Windows 开发者的体验提升到下一个水平只是时间问题。
今天，我很高兴地宣布：**适用于 Windows 的 Wails v2 公测啦**!
- 没有 CGO 依赖！不，我不是在开玩笑：_没有依赖 CGO_ 🤯！
- WebView2 （chromium） 渲染引擎！ 终于！
- 不需要在应用程序中附带任何 dll，包括`WebView2Loader.dll`。单个二进制文件的构想继续存在。
- 不需要打包资源（只需要提供一个 embed.FS，就像一个 web 服务器）
- 应用程序菜单支持
- 具有热重载和自动重新构建功能的新开发方式
- 用于控制应用程序窗口的运行时方法
- 现代化的原生对话框
Wails v2 代表了该项目的新基础。此版本的目的是获得有关新方式的反馈，并在完整版本发布之前解决所有错误。欢迎提出您的意见。请直接反馈到 [v2 测试版](https://github.com/wailsapp/wails/discussions)讨论板。
为了达到这一点，经历了许多曲折和坎坷。部分原因是早期的技术决策需要改变，另一部分原因是我们花时间构建的一些核心问题的变通方式已经在上游得到了解决:Go 的 embed 特性就是一个很好的例子。幸运的是，一切都刚刚好，今天我们有了我们所能拥有的最好的解决方案。我相信等待是值得的 - 这在两个月前是完全不可能的。
我还需要特别感谢 :pray: 以下人员，因为没有他们，这个版本就不会存在：
- [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 的第一步。
- [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 用户不必感到被冷落了——移植到这个新基础上的工作正在积极进行中，大部分复杂的工作已经完成。坚持下去。。。

14
website/i18n/zh-Hans/docusaurus-plugin-content-blog/options.json Normal file
View File

@ -0,0 +1,14 @@
{
"title": {
"message": "博客",
"description": "The title for the blog used in SEO"
},
"description": {
"message": "博客",
"description": "The description for the blog used in SEO"
},
"sidebar.title": {
"message": "最近文章",
"description": "The label for the left sidebar"
}
}

30
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json Normal file
View File

@ -0,0 +1,30 @@
{
"version.label": {
"message": "测试版本",
"description": "The label for version current"
},
"sidebar.tutorialSidebar.category.Getting Started": {
"message": "开始使用",
"description": "The label for category Getting Started in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Reference": {
"message": "参考",
"description": "The label for category Reference in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Runtime": {
"message": "运行时",
"description": "The label for category Runtime in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Examples": {
"message": "示例",
"description": "The label for category Examples in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Guides": {
"message": "指南",
"description": "The label for category Guides in sidebar tutorialSidebar"
},
"sidebar.tutorialSidebar.category.Community": {
"message": "社区交流",
"description": "The label for category Community in sidebar tutorialSidebar"
}
}

54
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/about.md Normal file
View File

@ -0,0 +1,54 @@
---
title: 关于 sidebar_position: 1
---
# 关于
## 概述
Wails 是一个可让你使用 Go 和 Web 技术编写桌面应用的项目。
将它看作为轻量快速的 “Electron for Go”。 你可以结合了丰富、现代的前端技术轻松地构建具有灵活性和强大功能的 Go 应用程序。
Wails 一点也不弱！这是 [xbar](https://xbarapp.com) - 一个使用 Wails 编写的 MacOS 桌面应用。它使用 Mac 的系统原生菜单，支持浅色和深色桌面主题，主窗口使用半透明，使其具有原生应用的
“冰霜” 效果。
<div class="text--center">
<a href="https://xbarapp.com"><img src="/img/xbar-app-preview-2.png"/></a>
</div>
## 原生元素
Wails 使用专门的库来处理原生元素，例如窗口、菜单、对话框等，因此你可以构建美观、功能丰富的桌面应用程序。 它不嵌入浏览器，因此性能高。相反，它使用平台的原生渲染引擎。在 Windows 上，是基于 Chromium 构建的新
Microsoft Webview2 库。
## Go 和 Javascript 互操作
Wails 自动使你的 Go 方法可用于 Javascript，因此你可以从前端按名称调用它们！它甚至会生成 Go 方法使用的结构的 Typescript 版本，因此你可以在 Go 和 Javascript 之间传递相同的数据结构。
## 运行时库
Wails 为 Go 和 Javascript 提供了一个运行时库，可以处理现代应用程序需要的很多东西，比如事件、日志记录、对话框等。
## 实时开发体验
### 自动重新构建
当你在“dev”模式下运行你的应用程序时，Wails 会将你的应用程序构建为原生桌面应用程序，但会从磁盘读取你的资源。它将检测你的 Go 代码的任何更改，并自动重新构建和重新启动你的应用程序。
### 自动重新加载
当检测到你的应用程序资源发生更改时，你正在运行的应用程序将“重新加载”，几乎立即反馈你的更改。
### 在浏览器中开发你的应用程序
如果你更喜欢在浏览器中调试和开发，那么我们可以满足你的需求。正在运行的应用程序还有一个网络服务器，它将在连接到它的任何浏览器中运行你的应用程序。当你的资源在磁盘上发生变化时，它会刷新。
## 生成原生二进制文件
当你准备好完成应用程序的最终构建时，CLI 会将其编译为单个可执行文件，并将所有资源打包到其中。在 Windows 和 MacOS
上，可以创建用于分发的原生包。使用打包器后生成的资源（图标、info.plist、清单文件等）是你项目的一部分，可以自定义，让你完全控制应用程序的构建方式。
## 工具
Wails CLI 提供了一种简单的方法来生成、构建和打包你的应用程序。可以从许多入门模板中进行选择，以快速启动和运行！

21
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/community-templates.mdx Normal file
View File

@ -0,0 +1,21 @@
---
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 模板

4
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/community/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Community",
"position": 5
}

19
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/community/links.mdx Normal file
View File

@ -0,0 +1,19 @@
---
sidebar_position: 2
---
# 链接
此页面用于列出社区相关的链接。请提交 PR（点击页面底部的`编辑此页`）增加链接。
## 支持的通道
- [Gophers Slack Channel](https://gophers.slack.com/messages/CJ4P9F7MZ/)
- [Gophers Slack Channel Invite](https://invite.slack.golangbridge.org/)
- [Github Issues](https://github.com/wailsapp/wails/issues)
- [v2 Beta Discussion Board](https://github.com/wailsapp/wails/discussions)
## 社交媒体
- [Twitter](https://twitter.com/wailsapp)
- [Wails 中文社区 QQ 群](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - 群号：1067173054

4
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/community/showcase/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Showcase",
"position": 1
}

23
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/community/templates.mdx Normal file
View File

@ -0,0 +1,23 @@
---
sidebar_position: 1
---
# 模板
此页面用作社区支持的模板列表。请提交一个包含您的模板的 PR（点击页面底部的`编辑此页`）。要构建您自己的模板，请参考[模板](/docs/guides/templates)指南。
要使用这些模板，请运行 `wails init -n "你的项目名" -t [下面的链接]`
示例：`wails init -n "Your Project Name" -t https://github.com/misitebao/wails-template-vue`
:::warning 注意
**Wails 项目不维护也不对第 3 方模板负责**
如果你不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。
:::
## Vue
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - 基于 Vue 和 Vue-Router 的 Wails 模板

83
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/credits.mdx Normal file
View File

@ -0,0 +1,83 @@
---
sidebar_position: 99
---
# 荣誉墙
- [Lea Anthony](https://github.com/leaanthony) - 项目所有者，首席开发人员
- [Misitebao](https://github.com/misitebao) - 中文文档，Windows 测试，寻找漏洞
- [Travis McLane](https://github.com/tmclane) - 处理交叉编译相关工作, MacOS 平台的测试
- [Byron Chris](https://github.com/bh90210) - Linux 发行版指导，Linux 平台的测试
## 赞助商
<div
dangerouslySetInnerHTML={{
__html: `
<a href="https://github.com/sponsors/leaanthony" style="width:100px;">
<img src="/img/bronze%20sponsor.png" width="100"/>
</a>
<a href="https://github.com/snider" style="width:100px;">
<img src="https://github.com/snider.png?size=100" width="100"/>
</a>
<br/>
<br/>
<a href="https://github.com/matryer" style="width:100px">
<img src="https://github.com/matryer.png" width="100"/>
</a>
<a href="https://www.jetbrains.com?from=Wails" style="width:100px">
<img src="/img/jetbrains-grayscale.png" width="100"/>
</a>
<a href="https://github.com/tc-hib" style="width:55px">
<img src="https://github.com/tc-hib.png?size=55" width="55"/>
</a>
<a href="https://github.com/picatz" style="width:50px">
<img src="https://github.com/picatz.png?size=50" width="50"/>
</a>
<a href="https://github.com/tylertravisty" style="width:50px">
<img src="https://github.com/tylertravisty.png?size=50" width="50"/>
</a>
<a href="https://github.com/akhudek" style="width:50px">
<img src="https://github.com/akhudek.png?size=50" width="50"/>
</a>
<a href="https://github.com/trea" style="width:50px">
<img src="https://github.com/trea.png?size=50" width="50"/>
</a>
<a href="https://github.com/LanguageAgnostic" style="width:55px">
<img src="https://github.com/LanguageAgnostic.png?size=55" width="55"/>
</a>
<a href="https://github.com/fcjr" style="width:55px">
<img src="https://github.com/fcjr.png?size=55" width="55"/>
</a>
<a href="https://github.com/nickarellano" style="width:60px">
<img src="https://github.com/nickarellano.png?size=60" width="60"/>
</a>
<a href="https://github.com/bglw" style="width:65px">
<img src="https://github.com/bglw.png?size=65" width="65"/>
</a>
<a href="https://github.com/jugglingjsons" style="width:50px">
<img src="https://github.com/jugglingjsons.png?size=50" width="50"/>
</a>
<a href="https://github.com/marcus-crane" style="width:50px">
<img src="https://github.com/marcus-crane.png?size=50" width="50"/>
</a>
`,
}}
/>
## 贡献者
import Contributors from "react-contributors";
<Contributors owner="wailsapp" repo="wails" />
## 特别提及
- [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 的第一步。
- [Mat Ryer](https://github.com/matryer) - 寻求建议和支持。
- [Dustin Krysak](https://wiki.ubuntu.com/bashfulrobot) - 提供了巨大的的支持和反馈。
- [Justen Walker](https://github.com/justenwalker/) - 帮助解决 v2 上线要解决的问题。
- [Wang, Chi](https://github.com/patr0nus/) - DeskGap 项目对 Wails v2 的方向产生了巨大影响。
- [Serge Zaitsev](https://github.com/zserge) - 虽然 Wails 没有使用 Webview 项目，但它仍然是一个灵感来源。

4
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/gettingstarted/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Getting Started",
"position": 2
}

14
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/gettingstarted/building.mdx Normal file
View File

@ -0,0 +1,14 @@
---
title: 编译你的项目
sidebar_position: 6
---
# 编译你的项目
从项目目录，运行`wails build`。 这将编译你的项目并将构建的二进制文件保存在 `build/bin` 目录中。
如果你运行二进制文件，你应该会看到默认应用程序：
待定
有关编译选项的更多详细信息，请参阅[构建命令](/docs/reference/cli#构建)。

16
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/gettingstarted/development.mdx Normal file
View File

@ -0,0 +1,16 @@
---
title: 开发你的应用程序
sidebar_position: 5
---
# 开发你的应用程序
你可以通过运行`wails dev`从项目目录在开发模式下运行你的应用程序。这将执行以下操作：
- 构建你的应用程序并运行它
- 监听 Go 文件中的修改并在更改时重新构建/重新运行
- 设置将通过浏览器为你的应用程序提供服务的[网络服务器](http://localhost:34115)。这允许你使用你喜欢的浏览器扩展。你甚至可以从控制台调用 Go 代码。
首先，在项目目录中运行`wails dev`。可以在[此处](/docs/reference/cli#开发)找到有关这方面的更多信息。
即将提供：教程

45
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/gettingstarted/firstproject.mdx Normal file
View File

@ -0,0 +1,45 @@
---
title: 创建项目
sidebar_position: 2
---
# 创建项目
## 项目生成
现在 CLI 已安装，你可以使用该`wails init`命令生成一个新项目。
为了快速启动和运行，你可以通过运行`wails init -n myproject`生成一个默认项目。这将创建一个名为`myproject`的目录，并使用默认模板填充它。
其他项目模板也可用，可以使用 `wails init -l`列出。
要查看其他可用选项，你可以运行 `wails init -help`。 更多详细信息可以在 [初始化命令](/docs/reference/cli#初始化)中找到。
## 项目布局
Wails 项目具有以下布局：
```
.
├── build/
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/
├── main.go
└── wails.json
```
### 项目结构概要
- `/main.go` - 主应用
- `/frontend/` - 前端项目文件
- `/build/` - 项目构建目录
- `/build/appicon.png` - 应用程序图标
- `/build/darwin/` - Mac 特定的项目文件
- `/build/windows/` - Windows 特定的项目文件
- `/wails.json` - 项目配置
`frontend`目录没有特定于 Wails 的内容，可以是您选择的任何前端项目。
`build`目录在构建过程中使用。这些文件可以更新以自定义您的构建。如果文件从构建目录中删除，将重新生成默认版本。

71
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/gettingstarted/installation.mdx Normal file
View File

@ -0,0 +1,71 @@
---
title: 安装
sidebar_position: 1
---
# 安装
## 支持的平台
- Windows 10
- MacOS x64 & arm64 (due October '21)
- Linux (due December '21)
## 依赖
Wails 有许多安装前需要的常见依赖项：
- Go 1.16+
- npm LTS
### Go
从 [Go 下载页面](https://golang.org/dl/) 下载 Go。
确保你遵守官方的 [Go 安装说明](https://golang.org/doc/install#install)。你还需要确保你的 `PATH` 环境变量包含你的 `~/go/bin` 目录路径。 重启终端并执行以下命令检查：
- 检查 Go 是否安装正确： `go version`
- 检查 "~/go/bin" 是否在你的 PATH 变量中： `echo $PATH | grep go/bin`
### npm
从 [Node 下载页面](https://nodejs.org/en/download/) 下载 Npm。最好使用最新版本，因为这是我们通常会测试的版本。
运行 `npm --version` 进行校验。
## 平台指定依赖关系
你还需要安装指定平台的依赖项：
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="Windows">
Wails 要求安装
<a href="https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/">WebView2</a>
运行时。一些 Windows 已经默认安装了这个。你可以使用 <code>wails doctor</code>
命令进行检查（见下文）。
</TabItem>
<TabItem value="MacOS">即将推出...</TabItem>
<TabItem value="Linux">即将推出...</TabItem>
</Tabs>
## 可选依赖
- [UPX](https://upx.github.io/) 用于压缩你的应用程序。
## 安装 Wails
运行 `go get github.com/wailsapp/wails/v2/cmd/wails` 安装 Wails CLI。
## 系统检查
运行 `wails doctor` 将检查你是否安装了正确的依赖项。如果没有，它会就缺少的内容提供建议并帮助纠正任何问题。

4
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Guides",
"position": 4
}

152
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/application-development.mdx Normal file
View File

@ -0,0 +1,152 @@
---
sidebar_position: 1
---
# 应用开发
使用 Wails 开发应用程序没有硬性规定，但有一些基本准则。
## 应用程序设置
默认模板使用 `main.go` 配置和运行应用程序, 同时`app.go`用于定义应用程序逻辑.
该`app.go`文件将定义一个结构体，该结构体有 2 个方法作为主应用程序的回调：
```go title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
```
- `startup`方法会在 Wails 分配它需要的资源后立即调用，这是创建资源、设置事件侦听器以及应用程序在启动时需要的任何其他内容的好地方。它提供了一个`context.Context`，
通常保存在结构字段中。调用[运行时](/docs/reference/runtime/intro)需要此`context.Context`。如果此方法返回错误，则应用程序将终止。在开发模式下，错误会输出到控制台。
- `shutdown`方法会在应用程序关闭进程时调用，这是释放内存和执行任何关闭任务的好地方。
`main.go`文件通常由对`wails.Run()`的单个调用组成，它接受应用程序配置。模板使用的模式是，在调用`wails.Run()`之前，
我们创建并保存一个在`app.go`中定义的结构体的实例在名`app`的变量中。这个配置是我们添加回调的地方：
```go {3,9,10} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
})
if err != nil {
log.Fatal(err)
}
}
```
可以在[此处](/docs/howdoesitwork#应用程序生命周期回调)找到有关应用程序生命周期回调的更多信息。
## 绑定方法
您可能希望从前端调用 Go 方法。这通常是通过向`app.go`中已经定义的结构体中添加公共方法来实现的：
```go {16-18} title="app.go"
type App struct {
ctx context.Context
}
func NewApp() *App {
return &App{}
}
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
func (a *App) shutdown(ctx context.Context) {
}
func (a *App) Greet(name string) string {
return fmt.Printf("Hello %s!", name)
}
```
在主应用程序中，`Bind`字段告诉我们 Wails 想要绑定什么：
```go {11-13} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
这将绑定`App`结构中的所有公共方法(它永远不会绑定 startup 和 shutdown 方法)。
可以在[此处](/docs/howdoesitwork#方法绑定)找到有关绑定的更多信息。
## 应用程序菜单
Wails 支持向您的应用程序添加菜单。 这是通过将 [菜单](/docs/reference/menus#菜单) 结构体传递给应用程序配置来完成的。
常见做法是使用一个返回菜单的方法，更常见的是用作生命周期回调的 `App` 结构体上的方法。
```go {11} title="main.go"
func main() {
app := NewApp()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Menu: app.menu(),
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
```
## 资源
Wails v2 处理资源的方式的伟大之处在于它没有！你唯一需要给 Wails 的是一个 `embed.FS`， 如何做到这一点完全取决于你。您可以像 vanilla 模板一样使用 vanilla html/css/js 文件。你可能有一些复杂的构建系统，但这并不影响。
当运行`wails build`时，它会检查项目根目录的`wails.json`文件。文件中有 2 个字段会被读取：
- "frontend:install"
- "frontend:build"
第一个，如果有给定，将在`frontend`目录中执行以安装 node 模块。第二个，如果有给定，将在`frontend`目录中执行以构建前端项目。
如果没有给出这两个字段，那么 Wails 不会对前端做任何操作。它仅仅被用作`embed.FS`。

33
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/developing-wails.mdx Normal file
View File

@ -0,0 +1,33 @@
---
sidebar_position: 99
---
# 参与贡献
这个页面是关于如何贡献 Wails 项目的指南。
首先，有一个警告：Wails v2 已经经历了多次迭代和调整。有很多代码要么被搁置要么被弃用。阅读整个项目并试图理解它可能会令人困惑。本文档旨在关注当前的内容以及如何理解当前内容。
## 漏洞
对于提出漏洞，请在 GitHub 上打开一个 Issue 并给出[v2]标签。wails doctor 在 Issue 中包含`wails doctor`的输出以帮助我们了解您的环境。
对于修复漏洞，请在您想要接受的 Issue 上发表评论，我们将在 Issue 上贴上标签。最好使用 Windows，因为它是使用纯 Go 中完成的，调试更容易。
## 功能
要请求新功能，请提出一个 Issue 以便讨论。Issue 应带有“Feature Request”标签。这些将被讨论，如果被选中进行开发，将被贴上“Ready for Development”的标签。
要实现新功能，请按上述方式提出 Issue 或选择带有“Ready for Development”标签的工单。
在提出 PR 时，请注意说明 PR 已在哪些平台上进行过测试。除非它适用于所有平台（如果可以）,否则任何新功能都不会被接受。
:::warning 不应该做的
没有 Issue 的新功能 PR 是没有帮助的，因为 PR 没有上下文，也不会被优先考虑。
:::
## 文档
通过单击任何页面上的“编辑此页”链接，可以轻松地为文档做出贡献。文档更新可以随时完成，无需 Issue。

31
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/frameless.mdx Normal file
View File

@ -0,0 +1,31 @@
---
sidebar_position: 10
---
# 无边框应用
Wails 支持无边框应用程序。这可以通过使用[应用程序参数选项](/docs/reference/options#应用程序参数选项)中的[无边框](/docs/reference/options#无边框)字段来实现。
Wails 为拖动窗口提供了一个简单的解决方案：任何具有“data-wails-drag”属性的 HTML 元素都将充当“拖动手柄”。
此属性适用于所有嵌套元素。如果您需要指定不应该拖动的嵌套元素，请在该元素上使用属性“data-wails-no-drag”。
默认的 vanilla 模板使用它，即使它不是无边框的。整个 body 元素被标记为可拖动。`<div id="input" data-wails-no-drag>`元素被标记为不可拖动。
```html
<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>
<body data-wails-drag>
<div id="logo"></div>
<div id="input" data-wails-no-drag>
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>
<script src="/main.js"></script>
</body>
</html>
```

99
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/manual-builds.mdx Normal file
View File

@ -0,0 +1,99 @@
---
sidebar_position: 20
---
# 手动构建
Wails CLI 为项目做了很多繁重的工作，但有时需要手动构建项目。本文档将讨论 CLI 执行的不同操作以及如何以不同方式实现这一点。
## 构建过程
当使用`wails build`或`wails dev`时，Wails CLI 会执行一个通用的构建过程：
- 安装前端依赖
- 构建前端项目
- 生成构建资源
- 编译应用程序
- [可选]压缩应用程序
### 安装前端依赖
#### 命令行步骤
- 如果给出了`-s`标志，则跳过此步骤
- 检查`wails.json`中是否有安装命令`frontend:install`
- 如果没有，则跳过此步骤
- 如果有，则检查前端目录中是否存在`package.json`。如果不存在，则跳过这一步
- 从`package.json`文件内容生成 MD5
- 它检查`package.json.md5`是否存在，如果存在，则将其内容（MD5 sum）与生成的内容进行比较，以查看内容是否已更改。如果相同，则跳过此步骤
- 如果`package.json.md5`不存在，则使用生成的 MD5 sum 创建它
- 如果现在需要构建，或者`node_modules`不存在，或者给出了`-f`标志，则在前端目录中执行安装命令
#### 手动步骤
这一步可以从命令行或带有`npm install`的前端脚本完成.
### 构建前端项目
#### Wails 命令行
- 如果给出了`-s`标志，则跳过此步骤
- 检查`wails.json`中是否有构建命令`frontend:build`
- 如果没有，则跳过此步骤
- 如果有，就在 frontend 目录下执行它
#### 手动步骤
这一步可以从命令行或带有前端构建脚本`npm run build`的脚本或任何前端构建脚本完成。
### 生成资源
#### Wails 命令行
- 如果设置了`-nopackage`标志，则跳过此阶段
- 如果`build/appicon.png`文件不存在，则创建一个默认文件
- 对于 Windows，请参阅[Windows](#windows)
- 如果`build/windows/icon.ico`不存在，它将从`build/appicon.png`图像创建它。
##### Windows
- 它创建的图标大小有 256、128、64、48、32 和 16。这是使用[winicon](https://github.com/leaanthony/winicon)完成的。
- 如果`build/windows/<projectname>.manifest`文件不存在，它会从默认版本创建它。
- 将应用程序编译为生产版本（如上所述）。
- 使用[winres](https://github.com/tc-hib/winres)将 icon 和 manifest 打包到一个`.syso`文件。
#### 手动步骤
- 使用[winicon](https://github.com/leaanthony/winicon)命令行工具或者其他工具创建`icon.ico`
- 为您的应用程序创建或者更新`.manifest`文件
- 使用[winres 命令行](https://github.com/tc-hib/go-winres)生成一个`.syso`文件
### 编译应用程序
#### Wails 命令行
- 如果提供了`-clean`标志，则删除并重新创建`build`目录
- 对于`wails dev`，使用以下默认 Go 标志：`-tags dev -gcflags "all=-N -l"`
- 对于`wails build`，使用以下默认 Go 标志：`-tags desktop,production -ldflags "-w -s"`
- 在 Windows 上， `-ldflags "-w -h -H windowsgui"`
- 使用`-tags`传递给命令行的其他`tags`被添加到默认值中
- 使用`-ldflags`传递给命令行的其他`ldflags`将添加到默认值中
- 传递`-o`标志
- 指定的`-compiler`将用于 Go 编译器
#### 手动步骤
- 开发环境构建，最简单的命令是： `go build -tags dev -gcflags "all=-N -l"`
- 生产环境构建，最简单的命令是：`go build -tags desktop,production -ldflags "-w -s -H windowsgui"`
- 确保在与`.syso`文件相同的目录中进行编译
### 压缩应用程序
#### Wails 命令行
- 如果已给出`-upx`标志，则`upx`程序将运行以使用默认设置压缩应用程序
- 如果也传递了`-upxflags`标志，则使用这些标志而不是默认
#### 手动步骤
- 手动运行`upx [flags]`以压缩应用程序。

192
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/migrating.mdx Normal file
View File

@ -0,0 +1,192 @@
---
title: 从 v1 迁移
sidebar_position: 98
---
# 从 v1 迁移
## 概述
Wails v2 与 v1 相比有重大变化。本文档旨在重点介绍迁移现有项目的更改和步骤。
### 创建应用程序
在 v1 中，使用`wails.CreateApp`来创建主应用程序，使用`app.Bind`来添加绑定，然后使用`app.Run()`运行应用程序。
示例：
```go title="v1"
app := wails.CreateApp(&wails.AppConfig{
Title: "MyApp",
Width: 1024,
Height: 768,
JS: js,
CSS: css,
Colour: "#131313",
})
app.Bind(basic)
app.Run()
```
在 v2 中，只有一个方法`wails.Run()`接受[应用程序参数选项](/docs/reference/options#应用程序参数选项)。
```go title="v2"
err := wails.Run(&options.App{
Title: "MyApp",
Width: 800,
Height: 600,
Assets: assets,
Bind: []interface{}{
basic,
},
})
```
### 绑定
在 v1 中，可以绑定任意函数和结构。在 v2 中，这已被简化为仅绑定结构。以前传递给 v1`Bind()`中的方法的结构实例现在在[应用程序参数选项](/docs/reference/options#应用程序参数选项)`Bind`字段中指定：
```go title="v1"
app := wails.CreateApp(/* options */)
app.Bind(basic)
```
```go title="v2"
err := wails.Run(&options.App{
/* other options */
Bind: []interface{}{
basic,
},
})
```
在 v1 中，绑定方法在`window.backend`中。 这已更改为`window.go`。
### 应用程序生命周期
在 v1 中，绑定结构中有 2 个特殊方法：`WailsInit()`和`WailsShutdown()`. 这些已被替换为 3 个生命周期回调，作为[应用程序参数选项](/docs/reference/options#应用程序参数选项)的一部分：
- [应用启动回调](/docs/reference/options#应用启动回调)
- [应用退出回调](/docs/reference/options#应用退出回调)
- [前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调)
注意：[前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调)替换了 v1 中的 `wails:ready` 系统事件。
这些方法可以是标准函数，但通常的做法是将它们作为结构的一部分：
```go title="v2"
basic := NewBasicApp()
err := wails.Run(&options.App{
/* Other Options */
OnStartup: basic.startup,
OnShutdown: basic.shutdown,
OnDomReady: basic.domready,
})
...
type Basic struct {
ctx context.Context
}
func (b *Basic) startup(ctx context.Context) {
b.ctx = ctx
}
...
```
### 运行时
v2 中的运行时比 v1 丰富得多，支持菜单、窗口操作和更好的对话框。方法的签名略有变化 - 请参阅[运行时](/docs/reference/runtime/intro)。
在 v1 中，[运行时](/docs/reference/runtime/intro)可通过传递给`WailsInit()`. 在 v2 中，运行时已移出到它自己的包。运行时中的每个方法都采用`context.Context`传递给了[应用启动回调](/docs/reference/options#应用启动回调)方法。
```go title="运行时示例"
package main
import "github.com/wailsapp/wails/v2/pkg/runtime"
type Basic struct {
ctx context.Context
}
// startup is called at application startup
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
runtime.LogInfo(ctx, "Application Startup called!")
}
```
### 资源
在 v2 最大的变化是资源的处理方式。
在 v1 中，资源通过 2 个应用程序参数选项传递：
- `JS` - 应用程序的 Javascript
- `CSS` - 应用程序的 CSS
这意味着生成单个 JS 和 CSS 文件的责任在于开发人员。这本质上需要使用繁琐的打包程序，例如 webpack。
在 v2 中，Wails 不对你的前端资源做任何预设，就像网络服务器一样。你的所有应用程序资源都作为`embed.FS`.
**这意味着不需要打包你的资源、将图像编码为 Base64 或尝试使用奇葩的打包器配置来使用自定义字体。**
在启动时，Wails 将扫描给定的`embed.FS`的`index.html`并将其位置用作所有其他应用程序资源的根路径 - 就像网络服务器一样。
示例：应用程序具有以下项目布局。所有最终资源都放在 `frontend/dist`目录中：
```shell
.
├── build/
├── frontend/
│ └── dist/
│ ├── index.html
│ ├── main.js
│ ├── main.css
│ └── logo.svg
├── main.go
└── wails.json
```
应用程序可以通过简单地创建一个`embed.FS`来使用这些资源：
```go title="资源示例"
//go:embed frontend/dist
var assets embed.FS
func main() {
err := wails.Run(&options.App{
/* Other Options */
Assets: assets,
})
}
```
当然，如果你愿意，也可以使用打包器。唯一的要求是在 Wails 中使用`embed.FS`,将最终的程序资源目录传递给[应用程序参数选项](/docs/reference/options#应用程序参数选项)的`Assets`键。
### 项目配置
在 v1 中，项目配置存储在项目根的 `project.json` 文件中。
在 v2 中，项目配置存储在项目根部的 `wails.json` 文件中。
文件的格式略有不同。下面是区别：
<p align="center">
| v1 | v2 | 笔记 |
| ------------------ | ---------------- | ---------------------------- |
| name | name | |
| description | | 移除 |
| author / name | author / name | |
| author / email | author / email | |
| version | version | |
| binaryname | outputfilename | 变更 |
| frontend / dir | | 移除 |
| frontend / install | frontend:install | 变更 |
| frontend / build | frontend:build | 变更 |
| frontend / bridge | | 移除 |
| frontend / serve | | 移除 |
| tags | | 移除 |
| | wailsjsdir | 生成 wailsjs 模块的目录 |
| | assetdir | `dev` 模式下前端资源文件目录 |
</p>

95
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/templates.mdx Normal file
View File

@ -0,0 +1,95 @@
---
sidebar_position: 15
---
# 模板
Wails 从预先创建的模板生成项目。在 v1 中，这是一组难以维护的项目，这些项目可能会过时。在 v2 中，为了增强社区的能力，为模板添加了一些新功能：
- 能够从[远程模板](/docs/reference/cli#远程模板)生成项目
- 帮助创建自己的模板的工具
## 创建模板
要创建模板，您可以使用`wails generate template`命令。要生成默认模板，请运行：
`wails generate template -name mytemplate `
这将使用默认文件创建“mytemplate”目录：
```shell title=mytemplate/
.
|-- NEXTSTEPS.md
|-- README.md
|-- app.tmpl.go
|-- frontend
| `-- dist
| |-- assets
| | |-- fonts
| | | |-- OFL.txt
| | | `-- nunito-v16-latin-regular.woff2
| | `-- images
| | `-- logo-dark.svg
| |-- index.html
| |-- main.css
| `-- main.js
|-- go.mod.tmpl
|-- main.tmpl.go
|-- template.json
`-- wails.tmpl.json
```
### 模板概述
默认模板包含以下文件和目录：
| 文件名 / 目录 | 描述 |
| --------------- | ---------------------- |
| NEXTSTEPS.md | 有关如何完成模板的说明 |
| README.md | 随模板发布的 README |
| app.tmpl.go | `app.go` 模板文件 |
| frontend/ | 包含前端资源的目录 |
| go.mod.tmpl | `go.mod` 模板文件 |
| main.tmpl.go | `main.go` 模板文件 |
| template.json | 模板元数据 |
| wails.tmpl.json | `wails.json` 模板文件 |
此时，建议按照`NEXTSTEPS.md`中的步骤操作。
## 从现有项目创建模板
通过在生成模板时将路径传递给项目，可以从现有的前端项目创建模板。我们现在将介绍如何创建 Vue 3 模板：
- 安装 vue cli： `npm install -g @vue/cli`
- 创建默认项目：`vue create vue3-base`
- 选择 `Default (Vue 3) ([Vue 3] babel, eslint)`
- 项目生成后，运行：
```shell
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
Extracting base template files...
Migrating existing project files to frontend directory...
Updating package.json data...
Renaming package.json -> package.tmpl.json...
Updating package-lock.json data...
Renaming package-lock.json -> package-lock.tmpl.json...
```
- 现在可以按照`NEXTSTEPS.md`中指定的方式定制模板。
- 一旦文件准备完毕，就可以通过运行命令来测试它：`wails init -n my-vue3-project -t .\wails-vue3-template\`
- 要测试新项目，请运行：`cd my-vue3-project` then `wails build`
- 项目编译完成后，运行它：`.\build\bin\my-vue3-project.exe`
- 你应该有了一个功能齐全的 Vue3 应用程序：
<div className="text--center">
<img src="/img/vue3-template.png" width="50%" />
</div>
## 发布模板
发布模板只是将文件推送到 GitHub。鼓励以下最佳实践：
- 从前端目录中删除任何不需要的文件和目录（例如：.git）
- 确保`template.json`完整，尤其是`helpurl`
- 将文件推送到 GitHub
- 在[社区模板](/docs/community/templates)页面上创建 PR

35
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/windows.mdx Normal file
View File

@ -0,0 +1,35 @@
---
sidebar_position: 2
---
# Windows 系统
此页面包含了在 Windows 上开发 Wails 应用程序相关的其他指南。
## 处理 WebView2 运行时依赖
为 Windows 构建 Wails 应用程序时对 Microsoft [WebView2 运行时](https://developer.microsoft.com/en-us/microsoft-edge/webview2/)有要求。
默认情况下，Windows 11 会安装它，但有些机器不会。Wails 提供了一种简单的方法来处理这种依赖关系。
通过在构建时使用`-webview2`标志,您可以决定在未检测到合适的运行时的时候（包括安装的运行时是否太旧）应用程序将执行的操作。四个选项是：
1. 下载
2. 内嵌
3. 浏览器
4. 错误
### 下载
此选项将提示用户在未找到合适的运行时时，提供从 Microsoft 的 WebView2 官方站点下载并运行引导程序。如果用户继续，官方引导程序将被下载并运行。
### 内嵌
此选项将官方引导程序嵌入到应用程序中。如果没有找到合适的运行时，应用程序将提供并运行引导程序。这将使二进制大小增加约 150k。
### 浏览器
此选项将提示用户没有找到合适的运行时时，提供打开浏览器到 WebView2 官方页面，可以下载和安装引导程序。然后应用程序将会退出，安装的操作留给用户。
### 错误
如果未找到合适的运行时间，则会向用户显示错误并且不采取进一步措施。

282
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/howdoesitwork.mdx Normal file
View File

@ -0,0 +1,282 @@
---
title: 它如何工作
sidebar_position: 3
---
# 它如何工作？
Wails 应用程序是一个标准的 Go 应用程序，带有一个 webkit 前端。Wails 应用程序的架构是：
<div className="text--center">
<img src="/img/architecture.svg" width="75%" />
</div>
## 后端
### 概述
主应用程序，通常称为“后端”，由对`wails.Run()`的调用组成. 它接收应用程序配置，该配置说明应用程序应该有多大尺寸，标题栏应该显示什么，使用什么资源等。一个基本的应用程序可能看起来像这样：
```go title="main.go"
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed frontend/dist
var assets embed.FS
func main() {
app := &App{}
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
Assets: &assets,
OnStartup: app.startup,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
type App struct {
ctx context.Context
}
func (b *App) startup(ctx context.Context) {
b.ctx = ctx
}
func (b *App) shutdown(ctx context.Context) {}
func (b *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
### 选项概要
此示例设置了以下选项：
- `Title` - 应该出现在窗口标题栏中的文本
- `Width&Height`- 窗口的尺寸
- `Assets` - 应用程序的前端资源
- `OnStartup` - 创建窗口并即将开始加载前端资源时的回调
- `OnShutdown` - 应用程序即将退出时的回调
- `Bind` - 我们希望向前端暴露的一部分结构体实例
完整的应用程序参数选项列表可以在[参数选项](/docs/reference/options)中找到。
#### 资源
`Assets` 选项是必须的，因为你不能拥有没有前端资源的 Wails 应用程序。这些资源可以是你希望在 Web 应用程序中找到的任何文件 - html、js、css、svg、png 等。
不需要生成资源包- 纯文件即可。当应用程序启动时，它将尝试从你的资源中加载`index.html`，并且那时起前端基本上将作为浏览器工作。值得注意的是 embed.FS，
文件所在的位置没有要求。嵌入路径很可能使用了相对于你的主应用程序代码的嵌套目录，例如 `frontend/dist`：
```go title="main.go"
// go:embed frontend/dist
var assets embed.FS
```
启动时，Wails 将遍历嵌入的文件，寻找包含的`index.html`. 所有其他资源将相对于该目录加载。
由于生产二进制文件使用中包含在`embed.FS`的文件，因此应用程序不需要附带任何外部文件。
在`dev`模式下，资源从磁盘加载，任何更改都会导致“实时重新加载”。资源的位置需要传递给`dev`命令，并且很可能与嵌入路径相同。更多细节可以在[应用程序开发指南](/docs/guides/appdev)中找到。
#### 应用程序生命周期回调
在即将加载前端`index.html`之前，对 [应用启动回调](/docs/reference/options#应用启动回调) 中提供的函数进行回调。一个标准的 Go 上下文被传递给这个方法。
调用运行时需要此上下文，因此标准模式是保存此时对它的引用。在应用程序关闭之前，以同样的方式调用 [应用退出回调](/docs/reference/options#应用退出回调) 回调，
再次使用上下文。当前端加载所有资源时，还有一个 [前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调) 回调。
#### 方法绑定
`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` - 除非将无效数据传递给它。
所有数据类型都在 Go 和 Javascript 之间正确转换。包括结构体。如果你从 Go 调用返回一个结构体，它将作为 `Javascript` Map 返回到你的前端。注意：如果你想使用结构体，你必须为你的结构体字段定义`json` 标签！也可以将结构体发送回 Go。任何作为期望结构的参数传递的 Javascript Map 都将转换为该结构类型。为了使这个过程更容易，在 `dev`模式下，会生成一个 TypeScript 模块，定义绑定方法中使用的所有结构类型。使用此模块，可以构建原生 Javascript 对象并将其发送到 Go 代码。
有关绑定的更多信息可以在[绑定示例](/docs/examples/binding)页面中找到。
## 前端
### 概述
前端是由 webkit 渲染的文件集合。这就像浏览器和网络服务器合二为一。您可以使用的框架或库[^1]几乎没有限制。前端和 Go 代码之间的主要交互点是：
- 调用绑定的 Go 方法
- 调用运行时方法
[^1]: 有一小部分库使用了 WebView 中不支持的功能。对于这种情况，通常有替代方案和解决方法。
### 调用绑定的 Go 方法
所有绑定的 Go 方法都可以在`window.go.<package>.<struct>.<method>`调用. 如上一节所述，这些方法返回一个 Promise，其中成功调用将值返回给 resolve 处理程序，错误将值返回给 reject 处理程序。
```go title="mycode.js"
window.go.main.App.Greet("Bill").then((result) => {
console.log("The greeting is: " + result);
})
```
在`dev`模式下运行应用程序时，会生成一个 javascript 模块，用 JSDoc 注释包装这些方法。这确实有助于开发，尤其是因为大多数 IDE 将处理 JSDoc 以提供代码完成和类型提示。该模块名为`go` 并在`wailsjsdir`标志指定的目录中生成。在这个模块中有一个`bindings.js`的文件，其中包含这些包装器。对于上面的示例，该文件包含以下代码：
```js title="bindings.js"
const go = {
main: {
App: {
/**
* Greet
* @param {Person} arg1 - Go Type: string
* @returns {Promise<string>} - Go Type: string
*/
Greet: (arg1) => {
return window.go.main.App.Greet(arg1);
},
},
},
};
export default go;
```
#### 支持结构体
还额外支持在其签名中使用结构的 Go 方法。所有由绑定方法指定的 Go 结构体（作为参数或返回类型）都将自动生成 Typescript 版本作为 Go 代码包装器模块的一部分。
使用这些，可以在 Go 和 Javascript 之间共享相同的数据模型。这些模型与 JSDoc 注释一致，支持 IDE 代码自动完成。
示例：我们更新我们的`Gree`方法以接受一个`Person`而不是字符串：
```go title="main.go"
type Person struct {
Name string `json:"name"`
Age uint8 `json:"age"`
Address *Address `json:"address"`
}
type Address struct {
Street string `json:"street"`
Postcode string `json:"postcode"`
}
func (a *App) Greet(p Person) string {
return fmt.Sprintf("Hello %s (Age: %d)!", p.Name, p.Age)
}
```
我们的`bindings.js`文件现已更新以反映更改：
```js title="bindings.js"
const go = {
main: {
App: {
/**
* Greet
* @param {Person} arg1 - Go Type: main.Person
* @returns {Promise<string>} - Go Type: string
*/
Greet: (arg1) => {
return window.go.main.App.Greet(arg1);
},
},
},
};
export default go;
```
此外`bindings.js`，还有一个名为`models.ts`的文件. 这包含我们的 TypeScript 形式的 Go 结构：
```ts title="models.ts"
export class Address {
street: string;
postcode: string;
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"];
}
}
export class Person {
name: string;
age: number;
address?: Address;
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;
}
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;
}
}
```
只要你将 TypeScript 作为前端构建配置的一部分，你就可以通过以下方式使用这些模型：
```js title="mycode.js"
import go from "./wailsjs/go/bindings";
import { Person } from "./wailsjs/go/models";
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);
});
}
```
JSDoc 和 TypeScript 生成模型的组合构成了一个强大的开发环境。
### 调用运行时方法
Javascript 运行时位于`window.runtime`并包含许多方法来执行各种任务，例如发出事件或执行日志记录操作：
```js title="mycode.js"
window.runtime.EventsEmit("my-event", 1);
```
可以在[运行时参考](/docs/reference/runtime/intro)中找到有关 JS 运行时的更多详细信息。

4
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Reference",
"position": 3
}

167
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/cli.mdx Normal file
View File

@ -0,0 +1,167 @@
---
title: 命令行
sidebar_position: 2
---
# 命令行
Wails CLI 有许多用于管理项目的命令。所有命令都以此方式运行：
`wails <command> <flags>`
## 初始化
`wails init` 用于生成项目。
| 标志 | 描述 | 默认 |
| :----------------- | :------------------------------------------------------------------ | :------ |
| -n "project name" | 项目名. **强制必填**. | |
| -d "project dir" | 要创建的项目目录 | 项目名 |
| -g | 初始化 git 存储库 | |
| -l | 可用项目模板列表 | |
| -q | 禁止输出到控制台 | |
| -t "template name" | 要使用的项目模板。这可能是在 github 上托管的远程模板的 URL 的名称。 | vanilla |
| -vscode | 生成 VSCode 项目文件 | |
| -f | 强制构建应用 | false |
示例：
`wails init -n test -d mytestproject -g -vscode -q`
这将在 "mytestproject" 目录生成一个名为 "test" 的项目，初始化 git，生成 vscode 项目文件并静默执行。
### 远程模板
支持远程模板（托管在 GitHub 上）并且可以使用模板的项目 URL 进行安装。
示例： `wails init -n test -t https://github.com/leaanthony/testtemplate`
可以在[此处](/docs/community/templates)找到社区维护的模板列表
:::warning 注意
**Wails 项目不维护也不对第 3 方模板负责**
如果你不确定某个模板，请检查 `package.json` 中运行的脚本和安装的模块。
:::
## 构建
`wails build`用于将你的项目编译为生产可用的二进制文件。
| 标志 | 描述 | 默认 |
| :------------------- | :----------------------------------------------------- | :------- |
| -clean | 清理`build/bin`目录 | |
| -compiler "compiler" | 使用不同的 go 编译器来构建，例如 go1.15beta1 | go |
| -ldflags "flags" | 传递给编译器的额外 ldflags | |
| -nopackage | 不打包应用程序 | |
| -o filename | 输出文件名 | |
| -s | 跳过前端构建 | |
| -f | 强制构建应用 | false |
| -tags "extra tags" | 传递给编译器构建标签（引号和空格分隔） | |
| -upx | 使用“upx”压缩最终二进制文件 | |
| -upxflags | 传递给 upx 的 flags | |
| -v int | 详细级别 (0 - silent, 1 - default, 2 - verbose) | 1 |
| -webview2 | WebView2 安装程序策略：: download,embed,browser,error. | download |
如果您更喜欢使用标准 Go 工具进行构建，请参阅[手动构建](/docs/guides/manual-builds)指南。
## 诊断检查
`wails doctor` 将运行诊断程序以确保你的系统已准备好进行开发。
示例:
```
Wails CLI v2.0.0-beta
Scanning system - Please wait (this may take a long time)...Done.
System
------
OS: Windows 10 Pro
Version: 2009 (Build: 19043)
ID: 21H1
Go Version: go1.17
Platform: windows
Architecture: amd64
Dependency Package Name Status Version
---------- ------------ ------ -------
WebView2 N/A Installed 93.0.961.52
npm N/A Installed 6.14.15
*upx N/A Installed upx 3.96
*docker N/A Installed 20.10.6
* - Optional Dependency
Diagnosis
---------
Your system is ready for Wails development!
```
## 开发
`wails dev` 用于以 "实时开发" 模式运行你的应用。这意味着：
- 应用程序被编译并自动运行
- 一个观察者被启动，如果它检测到你的 go 文件的变化，它将触发你的开发应用程序的重新构建
- 启动一个网络服务器`http://localhost:34115`，通过 http 为你的应用程序（不仅仅是前端）提供服务。这允许你使用你喜欢的浏览器开发扩展
- 所有应用程序资源都从磁盘加载。如果它们被更改，应用程序将自动重新加载（而不是重新构建）。所有连接的浏览器也将重新加载
- 生成的 JS 模块提供以下内容：
- 带有自动生成的 JSDoc 的 Go 方法的 Javascript 包装器，提供代码提示
- 的 Go 结构体的 TypeScript 版本，可以构造并传递给你的后端方法
- 生成第二个 JS 模块，为运行时提供包装器 + TS 声明
| 标志 | 描述 | 默认 |
| :--------------------------- | :---------------------------------------------------- | :-------------------------- |
| -assetdir "./path/to/assets" | 编译资源的路径 | Value in `wails.json` |
| -browser | `http://localhost:34115`在启动时打开浏览器 | |
| -compiler "compiler" | 使用不同的 go 编译器来构建，例如 go1.15beta1 | go |
| -e | 触发重建的扩展（逗号分隔） | go |
| -ldflags "flags" | 传递给编译器的额外 ldflags | |
| -tags "extra tags" | 构建标签以传递给编译器（引号和空格分隔） | |
| -loglevel "loglevel" | 要使用的日志级别 - Trace, Debug, Info, Warning, Error | Debug |
| -noreload | 资源更改时禁用自动重新加载 | |
| -v | 详细级别 (0 - silent, 1 - standard, 2 - verbose) | 1 |
| -wailsjsdir | 生成生成的 Wails JS 模块的目录 | Value store in `wails.json` |
如果在命令行上提供了`-assetdir`或`-wailsjsdir`标志，它们将保存在`wails.json`中，并成为后续调用的默认值。
示例：
`wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src -browser`
此命令将执行以下操作：
- 构建应用程序并运行它（更多细节在[这里](/docs/guides/manual-builds)）
- 生成 Wails JS 模块 ``./frontend/src`
- 注意文件的更新`./frontend/dist`并在任何更改时重新加载
- 打开浏览器并连接到应用程序
## 生成
### 模板
Wails 使用模板来生成项目。`wails generate template`命令有助于构建模板，以使它可以用于生成项目。
| 标志 | 描述 |
| :--------------- | :----------------------------- |
| -name | 模板名称（必填） |
| -frontend "path" | 要在模板中使用的前端项目的路径 |
有关创建模板的更多详细信息，请参阅[模板指南](/docs/guides/templates)。
## 更新
`wails update` 将更新 Wails CLI 的版本。
| 标志 | 描述 |
| :----------------- | :--------------------- |
| -pre | 更新到最新的预发布版本 |
| -version "version" | 安装指定版本的 CLI |
## 版本
`wails version` 将简单地输出当前的 CLI 版本。

227
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/menus.mdx Normal file
View File

@ -0,0 +1,227 @@
---
sidebar_position: 4
---
# 应用菜单
可以通过定义[菜单](#菜单)结构类型并调用运行时方法[设置应用程序菜单](/docs/reference/runtime/menu#设置应用程序菜单)向 Wails 项目添加应用程序菜单。
也可以通过更新菜单结构并调用[更新应用程序菜单](/docs/reference/runtime/menu#更新应用程序菜单)来动态更新菜单 。
示例:
```go
myMenu := menu.NewMenuFromItems(
menu.SubMenu("File", menu.NewMenuFromItems(
menu.Text("&Open", keys.CmdOrCtrl("o"), openFile),
menu.Separator(),
menu.Text("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
runtime.Quit()
}),
)),
)
runtime.MenuSetApplicationMenu(myMenu)
```
上面的示例使用快捷方法，但是可以手动构建菜单结构。
## 菜单
菜单是菜单项的集合：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
type Menu struct {
Items []*MenuItem
}
```
对于应用程序菜单，每个菜单项代表一个菜单，例如“编辑”。
提供了一个简单的快捷方法来构建菜单：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func NewMenuFromItems(first *MenuItem, rest ...*MenuItem) *Menu
```
这使得代码的布局更像是菜单的布局，而无需在创建菜单项后手动添加它们。或者，您可以只创建菜单项并手动将它们添加到菜单中。
## 菜单项
菜单项表示菜单中的一个项目。
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
// MenuItem represents a menu item contained in a menu
type MenuItem struct {
Label string
Role Role
Accelerator *keys.Accelerator
Type Type
Disabled bool
Hidden bool
Checked bool
SubMenu *Menu
Click Callback
}
```
| 字段 | 类型 | 笔记 |
| ----------- | ----------------------------- | ----------------------------------- |
| Label | string | 菜单文字 |
| Accelerator | [\*keys.Accelerator](#加速器) | 此菜单项的键绑定 |
| Type | [Type](#类型) | 菜单项的类型 |
| Disabled | bool | 禁用菜单项 |
| Hidden | bool | 隐藏此菜单项 |
| Checked | bool | 向菜单项设置选中 (复选框和单选类型) |
| SubMenu | [\*Menu](#菜单) | 设置子菜单 |
| Click | [Callback](#回调) | 单击菜单时的回调函数 |
### 加速器
加速器（有时称为键盘快捷键）定义了按键和菜单项之间的绑定。 Wails 将加速器定义为一个组合或键 + [修饰符](#修饰符)。
它们在`"github.com/wailsapp/wails/v2/pkg/menu/keys"`包中可用。
示例:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines cmd+o on Mac and ctrl-o on Window/Linux
myShortcut := keys.CmdOrCtrl("o")
```
键是键盘上除了`+`的任何字符，它被定义为`加号`。有些键不能表示为字符，因此可以使用一组命名字符：
- `backspace`
- `tab`
- `return`
- `enter`
- `escape`
- `left`
- `right`
- `up`
- `down`
- `space`
- `delete`
- `home`
- `end`
- `page up`
- `page down`
- `f1`
- `f2`
- `f3`
- `f4`
- `f5`
- `f6`
- `f7`
- `f8`
- `f9`
- `f10`
- `f11`
- `f12`
- `f13`
- `f14`
- `f15`
- `f16`
- `f17`
- `f18`
- `f19`
- `f20`
- `f21`
- `f22`
- `f23`
- `f24`
- `f25`
- `f26`
- `f27`
- `f28`
- `f29`
- `f30`
- `f31`
- `f32`
- `f33`
- `f34`
- `f35`
- `numlock`
Wails 还支持使用与 Electron 相同的语法来解析加速器。 这对于在配置文件中存储加速器很有用。
示例:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines cmd+o on Mac and ctrl-o on Window/Linux
myShortcut, err := keys.Parse("Ctrl+Option+A")
```
#### 修饰符
以下修饰符是可以与加速键组合使用的键：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
const (
// CmdOrCtrlKey represents Command on Mac and Control on other platforms
CmdOrCtrlKey Modifier = "cmdorctrl"
// OptionOrAltKey represents Option on Mac and Alt on other platforms
OptionOrAltKey Modifier = "optionoralt"
// ShiftKey represents the shift key on all systems
ShiftKey Modifier = "shift"
// ControlKey represents the control key on all systems
ControlKey Modifier = "ctrl"
)
```
许多快捷方法可用于使用修饰符创建加速器：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
func CmdOrCtrl(key string) *Accelerator
func OptionOrAlt(key string) *Accelerator
func Shift(key string) *Accelerator
func Control(key string) *Accelerator
```
修饰符可以结合`keys.Combo(key string, modifier1 Modifier, modifier2 Modifier, rest ...Modifier)`使用：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
// Defines "Ctrl+Option+A" on Mac and "Ctrl+Alt+A" on Window/Linux
myShortcut := keys.Combo("a", ControlKey, OptionOrAltKey)
```
### 类型
每个菜单项必须有一个类型，有 5 种类型可用：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
const (
TextType Type = "Text"
SeparatorType Type = "Separator"
SubmenuType Type = "Submenu"
CheckboxType Type = "Checkbox"
RadioType Type = "Radio"
)
```
为方便起见，提供了快捷方法来快速创建菜单项：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func Text(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
func Separator() *MenuItem
func Radio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func Checkbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func SubMenu(label string, menu *Menu) *MenuItem
```
关于单选菜单组的说明:单选菜单组定义为菜单中相邻的多个单选菜单项。这意味着您不需要将项目分组在一起，因为它是自动的。
然而，这也意味着你不能有两个相邻的单选菜单组-它们之间必须有一个非单选菜单项。
### 回调
每个菜单项都可能有一个回调，在单击该项时会执行该回调：
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
type Callback func(*CallbackData)
type CallbackData struct {
MenuItem *MenuItem
}
```
给函数一个`CallbackData`结构体，它指示哪个菜单项触发了回调。这在使用可能共享回调的单选菜单组时很有用。

254
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/options.mdx Normal file
View File

@ -0,0 +1,254 @@
---
title: 参数选项
sidebar_position: 3
---
# 参数选项
## 应用程序参数选项
该`Options.App`结构包含应用程序配置。它被传递给`wails.Run()`方法：
```go title="Example"
import "github.com/wailsapp/wails/v2/pkg/options"
func main() {
err := wails.Run(&options.App{
Title: "Menus Demo",
Width: 800,
Height: 600,
DisableResize: false,
Fullscreen: false,
Frameless: true,
MinWidth: 400,
MinHeight: 400,
MaxWidth: 1280,
MaxHeight: 1024,
StartHidden: false,
HideWindowOnClose: false,
RGBA: &options.RGBA{R: 0, G: 0, B: 0, A: 255},
Assets: assets,
Menu: app.applicationMenu(),
Logger: nil,
LogLevel: logger.DEBUG,
OnStartup: app.startup,
OnDomReady: app.domready,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
Windows: &windows.Options{
WebviewIsTransparent: false,
WindowIsTranslucent: false,
DisableWindowIcon: false,
},
})
if err != nil {
log.Fatal(err)
}
}
```
### 标题
名称：Title
类型：string
窗口标题栏中显示的文本。
### 宽度
名称：Width
类型：int
窗口的初始宽度。默认值：1024。
### 高度
名称：Height
类型：int
窗口的初始高度。默认值：768
### 禁用调整窗口尺寸
名称：DisableResize
类型：bool
默认情况下，主窗口可调整大小。将此设置为 true 将使其保持固定大小。
### 全屏
名称：Fullscreen
类型：bool
将此设置为 true 将在启动时使窗口全屏。
### 无边框
名称：Frameless
类型：bool
设置为 时 true，窗口将没有边框或标题栏。另请参阅[无边框窗口](/docs/guides/frameless)。
### 最小宽度
名称：MinWidth
类型：int
这将设置窗口的最小宽度。如果给出的值`Width`小于这个值，窗口将被设置为`MinWidth`默认值。
### 最小高度
名称：MinHeight
类型：int
这将设置窗口的最小高度。如果给出的值`Height`小于这个值，窗口将被设置为`MinHeight`默认值。
### 最大宽度
名称：MaxWidth
类型：int
这将设置窗口的最大宽度。如果给出的值`Width`大于这个值，窗口将被设置为`MaxWidth`默认值。
### 最大高度
名称：MaxHeight
类型：int
这将设置窗口的最大高度。如果给出的值`Height`大于这个值，窗口将被设置为`MaxHeight`默认值。
### 启动时隐藏窗口
名称：StartHidden
类型：bool
设置为 时`true`，应用程序将被隐藏，直到调用[显示窗口](/docs/reference/runtime/window#显示窗口)。
### 关闭时隐藏窗口
名称：HideWindowOnClose
类型：bool
默认情况下，关闭窗口将关闭应用程序。将此设置为`true`意味着关闭窗口将隐藏窗口。
### RGBA
名称：RGBA
类型：int (0xRRGGBBAA) 示例：0xFF000088 - 透明度为 50% 的红色
该值是默认设置窗口的 RGBA 值。默认值：0xFFFFFFFF。
### 资源
名称：Assets
类型：\*embed.FS
应用程序要使用的前端资源。需要一个`index.html`文件。
### 菜单
名称：Menu
类型：\*menu.Menu
应用程序要使用的菜单。[菜单参考](/docs/reference/runtime/menu)中有关菜单的更多详细信息。
### 日志
名称：Logger
类型：logger.Logger 默认值：Logger to Stdout
应用程序要使用的记录器。有关日志记录的更多详细信息，请参阅[日志参考](/docs/reference/runtime/log)。
### 日志级别
名称：LogLevel
类型：logger.LogLevel 默认值：Info 在开发模式下，Error 在生产模式下
默认日志级别。有关日志记录的更多详细信息，请参阅[设置日志等级](/docs/reference/runtime/log#设置日志等级)。
### 应用启动回调
名称：OnStartup
类型：func(ctx context.Context)
此回调在前端创建之后调用，但在`index.html`加载之前调用。它给出了应用程序上下文。
### 前端 Dom 加载完成回调
名称：OnDomReady
类型：func(ctx context.Context)
在前端加载`index.html`完毕并且 DOM 准备就绪后调用此回调。它给出了应用程序上下文。
### 应用退出回调
名称：OnShutdown
类型：func(ctx context.Context)
在前端被销毁之后，就在应用程序终止之前，调用此回调。它给出了应用程序上下文。
### 绑定
名称：Bind
类型： []interface{}
定义需要绑定到前端的方法的一部分结构实例。
### 窗口
名称：Windows
类型：\*windows.Options
这定义了[Windows 特定的选项](#windows-特定选项).。
## Windows 特定选项
### 网页透明
名称：WebviewIsTransparent
类型：bool
将此设置为 true 将使 webview 背景透明，其中没有其他颜色呈现。通常与[窗口半透明](#窗口半透明)结合使用 以制作外观现代的应用程序。
### 窗口半透明
名称：WindowIsTranslucent
类型：bool
将此设置为 true 将使窗口半透明。通常与[网页透明](#网页透明) 结合使用以制作外观现代的应用程序。
### 禁用窗口图标
名称：DisableWindowIcon
类型：bool
将此设置为 true 将删除标题栏左上角的图标。

23
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/project-config.mdx Normal file
View File

@ -0,0 +1,23 @@
---
sidebar_position: 5
---
# 项目配置
项目配置在项目目录中的`wails.json`文件中。配置的结构是：
```json
{
"name": "[项目名称]",
"assetdir": "[资源目录的相对路径]",
"frontend:install": "[安装node依赖的命令，在frontend目录下运行 - 通常是 `npm install`]",
"frontend:build": "[构建资源的命令，在frontend目录下运行 - 通常是 `npm run build`]",
"wailsjsdir": "[自动生成的JS模块将被创建的目录的相对路径]",
"version": "[项目配置版本]",
"outputfilename": "[二进制文件的名称]"
}
```
该文件将在运行`wails build`或`wails dev`时，由 Wails CLI 读取。
`wails build/dev`命令中的`assetdir`和`wailsjsdir`标志将覆盖项目配置并作为后续运行的默认值。

4
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/_category_.json Normal file
View File

@ -0,0 +1,4 @@
{
"label": "Runtime",
"position": 1
}

17
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/browser.mdx Normal file
View File

@ -0,0 +1,17 @@
---
sidebar_position: 7
---
# 浏览器
## 概述
这些方法与系统浏览器相关。
### 浏览器打开 URL
Go 方法签名: `BrowserOpenURL(ctx context.Context, url string)`
JS 方法签名: `BrowserOpenURL(url string)`
使用系统默认浏览器打开给定的 URL。

140
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/dialog.mdx Normal file
View File

@ -0,0 +1,140 @@
---
title: 对话框
sidebar_position: 5
---
# 对话框
## 概述
运行时的这一部分提供对原生对话框的调用，例如文件选择器和消息框。上下文
:::info Javascript
JS 运行时当前不支持 Dialog。
:::
### 打开选择目录对话框
Go 方法签名: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
返回值: 所选目录（如果用户取消则为空白）或错误
打开一个对话框，提示用户选择目录。可以使用 [打开选择文件对话框参数选项](#打开选择文件对话框参数选项)进行自定义。
### 打开选择文件对话框
Go 方法签名: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
返回值: 所选文件（如果用户取消则为空白）或错误
打开一个对话框，提示用户选择文件。可以使用[打开选择文件对话框参数选项](#打开选择文件对话框参数选项)进行自定义。
### 打开选择多个文件对话框
Go 方法签名: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`
返回值: 选定的文件（如果用户取消则为零）或错误
打开一个对话框，提示用户选择多个文件。可以使用[打开选择文件对话框参数选项](#打开选择文件对话框参数选项)进行自定义。
### 保存文件对话框
Go 方法签名: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`
返回值: 所选文件（如果用户取消则为空白）或错误
打开一个对话框，提示用户选择文件名以进行保存。可以使用[保存文件对话框参数选项](#保存文件对话框参数选项)自定义。
### 消息对话框
Go 方法签名: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`
返回值: 所选按钮的文本或错误
使用消息对话框显示消息。可以使用[消息对话框参数选项](#消息对话框参数选项)进行自定义。
## 参数选项
### 打开选择文件对话框参数选项
```go
type OpenDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
AllowFiles bool // Mac Only
AllowDirectories bool // Mac Only
ShowHiddenFiles bool // Mac Only
CanCreateDirectories bool // Mac Only
ResolvesAliases bool // Mac Only
TreatPackagesAsDirectories bool // Mac Only
}
```
### 保存文件对话框参数选项
```go
type SaveDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
ShowHiddenFiles bool // Mac Only
CanCreateDirectories bool // Mac Only
TreatPackagesAsDirectories bool // Mac Only
}
```
### 消息对话框参数选项
```go
type MessageDialogOptions struct {
Type DialogType
Title string
Message string
Buttons []string
DefaultButton string // Mac Only
CancelButton string // Mac Only
Icon string // Mac Only
}
```
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="Windows">
Windows
具有标准对话框类型并且按钮不可定制。返回的值将是以下之一：“确定”、“取消”、“中止”、“重试”、“忽略”、“是”、“否”、“再试一次”或“继续”
</TabItem>
<TabItem value="MacOS">“DefaultButton”和“CancelButton”都应与“Buttons”中的值匹配。</TabItem>
<TabItem value="Linux">即将推出...</TabItem>
</Tabs>
#### 对话框类型
```go
const (
InfoDialog DialogType = "info"
WarningDialog DialogType = "warning"
ErrorDialog DialogType = "error"
QuestionDialog DialogType = "question"
)
```
### 文件过滤
```go
type FileFilter struct {
DisplayName string // Filter information EG: "Image Files (*.jpg, *.png)"
Pattern string // semi-colon separated list of extensions, EG: "*.jpg;*.png"
}
```

50
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/events.mdx Normal file
View File

@ -0,0 +1,50 @@
---
title: 事件
sidebar_position: 2
---
# 事件
## 概述
Wails 运行时提供了一个统一的事件系统，其中事件可以由 Go 或 Javascript 发出或接收。可选地，数据可以与事件一起传递。侦听器将接收本地数据类型中的数据。
### 添加事件侦听器
Go 方法签名: `EventsOn(ctx context.Context, eventName string, callback func(optionalData ...interface{}))`
JS 方法签名: `EventsOn(eventName string, callback function(optionalData?: any))`
此方法为给定的事件名称设置一个侦听器。当一个`eventName`类型的事件被[触发指定事件](#触发指定事件)时，回调被触发。与触发事件一起发送的任何其他数据都将传递给回调。
### 移除事件侦听器
Go 方法签名: `EventsOff(ctx context.Context, eventName string)`
JS 方法签名: `EventsOff(eventName string)`
此方法取消注册给定事件名称的侦听器。
### 添加只触发一次的事件侦听器
Go 方法签名: `EventsOnce(ctx context.Context, eventName string, callback func(optionalData ...interface{}))`
JS 方法签名: `EventsOnce(eventName string, callback function(optionalData?: any))`
此方法为给定的事件名称设置一个侦听器，但只会触发一次。
### 添加指定对多触发次数的事件侦听器
Go 方法签名: `EventsOnMultiple(ctx context.Context, eventName string, callback func(optionalData ...interface{}), counter int)`
JS 方法签名: `EventsOnMultiple(eventName string, callback function(optionalData?: any), counter int)`
此方法为给定的事件名称设置一个侦听器，但最多只能触发`counter`次。
### 触发指定事件
Go 方法签名: `Events(ctx context.Context, eventName string, optionalData ...interface{})`
JS 方法签名: `Events(ctx context, optionalData function(optionalData?: any))`
此方法触发指定的事件。可选数据可以与事件一起传递。这将触发任何事件侦听器。

12
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/intro.mdx Normal file
View File

@ -0,0 +1,12 @@
---
title: 介绍
sidebar_position: 1
---
# 介绍
运行时是一个为应用程序提供实用方法的库。有 Go 和 Javascript 运行时，目的是在可能的情况下尝试使它们保持一致。
Go 运行时可通过导入`github.com/wailsapp/wails/v2/pkg/runtime`. 此包中的所有方法都将 context 作为第一个参数。这个 context 可以从[应用启动回调](/docs/reference/options#应用启动回调) 或[前端 Dom 加载完成回调](/docs/reference/options#前端-dom-加载完成回调)回调中获得。
Javascript 库可通过`window.runtime`提供给前端。使用 dev 模式时会生成一个运行时包，该包为运行时提供 Typescript 声明。这应该位于你的前端目录中的`wailsjs`目录中。

107
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/log.mdx Normal file
View File

@ -0,0 +1,107 @@
---
title: 日志
sidebar_position: 3
---
# 日志
## 概述
Wails 运行时提供了一种可以从 Go 或 Javascript 调用的日志记录机制。像大多数记录器一样，有许多日志级别：
- Trace
- Debug
- Info
- Warning
- Error
- Fatal
记录器将输出当前或更高日志级别的任何日志消息。示例：`Debug`日志级别将输出除`Trace`消息之外的所有消息。
### 打印日志
Go 方法签名: `LogPrint(ctx context.Context, message string)`
JS 方法签名: `LogPrint(message: string)`
将给定的消息记录为原始消息。
### Trace 日志
Go 方法签名: `LogTrace(ctx context.Context, message string)`
JS 方法签名: `LogTrace(message: string)`
在`Trace`日志级别记录给定的消息。
### Debug 日志
Go 方法签名: `LogDebug(ctx context.Context, message string)`
JS 方法签名: `LogDebug(message: string)`
在`Debug`日志级别记录给定的消息。
### Info 日志
Go 方法签名: `LogInfo(ctx context.Context, message string)`
JS 方法签名: `LogInfo(message: string)`
在`Info`日志级别记录给定的消息。
### Warning 日志
Go 方法签名: `LogWarning(ctx context.Context, message string)`
JS 方法签名: `LogWarning(message: string)`
在`Warning`日志级别记录给定的消息。
### Error 日志
Go 方法签名: `LogError(ctx context.Context, message string)`
JS 方法签名: `LogError(message: string)`
在`Error`日志级别记录给定的消息。
### Fatal 日志
Go 方法签名: `LogFatal(ctx context.Context, message string)`
JS 方法签名: `LogFatal(message: string)`
在`Fatal`日志级别记录给定的消息。
### 设置日志级别
Go 方法签名: `LogSetLogLevel(ctx context.Context, level logger.LogLevel)`
JS 方法签名: `LogSetLogLevel(level: number)`
设置日志级别。在 Javascript 中，该数字与以下日志级别有关：
| 值 | 日志等级 |
| --- | -------- |
| 1 | Trace |
| 2 | Debug |
| 3 | Info |
| 4 | Warning |
| 5 | Error |
## 使用自定义日志
可以通过使用应用程序参数选项 [日志](/docs/reference/options#日志) 提供自定义记录器来使用它。唯一的要求是记录器实现了在`github.com/wailsapp/wails/v2/pkg/logger`里`logger.Logger`定义的接口：
```go title="logger.go"
type Logger interface {
Print(message string)
Trace(message string)
Debug(message string)
Info(message string)
Warning(message string)
Error(message string)
Fatal(message string)
}
```

28
website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/runtime/menu.mdx Normal file
View File

@ -0,0 +1,28 @@
---
title: 菜单
sidebar_position: 6
---
# 菜单
## 概述
这些方法与应用程序菜单相关。
:::info Javascript
JS 运行时当前不支持菜单。
:::
### 设置应用程序菜单
Go 方法签名: `MenuSetApplicationMenu(ctx context.Context, menu *menu.Menu)`
将应用程序菜单设置为给定的[应用菜单](/docs/reference/menus)。
### 更新应用程序菜单
Go 方法签名: `MenuUpdateApplicationMenu(ctx context.Context)`
更新应用程序菜单，选取对传递给`MenuSetApplicationMenu`的菜单所做的任何更改。

Some files were not shown because too many files have changed in this diff Show More