5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 15:11:53 +08:00

Release/v2.1.0 (#1988)

* Add changelog. Fix zoom docs. Add Info.dev.plist info

* Update build assets README.md

* Update changelog

* actions/checkout@v2 => v3

* Docs
This commit is contained in:
Lea Anthony 2022-10-18 07:21:07 +11:00 committed by GitHub
parent 96fa18846c
commit a5fba5b218
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
228 changed files with 11741 additions and 369 deletions

View File

@ -18,7 +18,7 @@ jobs:
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v2 uses: actions/checkout@v3
with: with:
ref: "master" ref: "master"
submodules: true submodules: true

View File

@ -17,7 +17,7 @@ jobs:
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v2 uses: actions/checkout@v3
- name: Install linux dependencies - name: Install linux dependencies
if: matrix.os == 'ubuntu-latest' if: matrix.os == 'ubuntu-latest'
@ -43,7 +43,7 @@ jobs:
go-version: [ 1.18, 1.19 ] go-version: [ 1.18, 1.19 ]
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v2 uses: actions/checkout@v3
- name: Setup Go - name: Setup Go
uses: actions/setup-go@v3 uses: actions/setup-go@v3

View File

@ -9,7 +9,7 @@ jobs:
if: github.repository == 'wailsapp/wails' if: github.repository == 'wailsapp/wails'
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Verify Changed files - name: Verify Changed files
uses: tj-actions/verify-changed-files@v11.1 uses: tj-actions/verify-changed-files@v11.1

View File

@ -10,7 +10,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
if: github.repository == 'wailsapp/wails' if: github.repository == 'wailsapp/wails'
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Set node - name: Set node
uses: actions/setup-node@v2 uses: actions/setup-node@v2

View File

@ -28,7 +28,7 @@ jobs:
steps: steps:
- name: Checkout code - name: Checkout code
uses: actions/checkout@v2 uses: actions/checkout@v3
- name: Install linux dependencies - name: Install linux dependencies
if: matrix.os == 'ubuntu-latest' if: matrix.os == 'ubuntu-latest'

View File

@ -10,7 +10,7 @@ jobs:
name: Rebuild the runtime name: Rebuild the runtime
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- uses: actions/setup-node@v2 - uses: actions/setup-node@v2
with: with:
node-version: 14.17.6 node-version: 14.17.6

View File

@ -1 +1 @@
v2.0.0 v2.1.0

View File

@ -4,58 +4,32 @@ The build directory is used to house all the build files and assets for your app
The structure is: The structure is:
* bin - Output directory * bin - Output directory
* dialog - Icons for dialogs * darwin - macOS specific files
* tray - Icons for the system tray * windows - Windows specific files
* mac - MacOS specific files
* linux - Linux specific files
* windows - Windows specific files
## Dialog Icons
Place any PNG file in this directory to be able to use them in message dialogs.
The files should have names in the following format: `name[-(light|dark)][2x].png`
Examples:
* `mypic.png` - Standard definition icon with ID `mypic`
* `mypic-light.png` - Standard definition icon with ID `mypic`, used when system theme is light
* `mypic-dark.png` - Standard definition icon with ID `mypic`, used when system theme is dark
* `mypic2x.png` - High definition icon with ID `mypic`
* `mypic-light2x.png` - High definition icon with ID `mypic`, used when system theme is light
* `mypic-dark2x.png` - High definition icon with ID `mypic`, used when system theme is dark
### Order of preference
Icons are selected with the following order of preference:
For High Definition displays:
* name-(theme)2x.png
* name2x.png
* name-(theme).png
* name.png
For Standard Definition displays:
* name-(theme).png
* name.png
## Tray
Place any PNG file in this directory to be able to use them as tray icons.
The name of the filename will be the ID to reference the image.
Example:
* `mypic.png` - May be referenced using `runtime.Tray.SetIcon("mypic")`
## Mac ## Mac
The `darwin` directory holds files specific to Mac builds, such as `Info.plist`. The `darwin` directory holds files specific to Mac builds.
These may be customised and used as part of the build. To return these files to the default state, simply delete them and These may be customised and used as part of the build. To return these files to the default state, simply delete them
build with the `-package` flag. and
build with `wails build`.
## Windows The directory contains the following files:
The `windows` directory contains the manifest and rc files used when building with the `-package` flag. - `Info.plist` - the main plist file used for Mac builds. It is used when building using `wails build`.
- `Info.dev.plist` - same as the main plist file but used when building using `wails dev`.
## Windows
The `windows` directory contains the manifest and rc files used when building with `wails build`.
These may be customised for your application. To return these files to the default state, simply delete them and These may be customised for your application. To return these files to the default state, simply delete them and
build with the `-package` flag. build with `wails build`.
- `icon.ico` - The icon used for the application. This is used when building using `wails build`. If you wish to
use a different icon, simply replace this file with your own. If it is missing, a new `icon.ico` file
will be created using the `appicon.png` file in the build directory.
- `installer/*` - The files used to create the Windows installer. These are used when building using `wails build`.
- `info.json` - Application details used for Windows builds. The data here will be used by the Windows installer,
as well as the application itself (right click the exe -> properties -> details)
- `wails.exe.manifest` - The main application manifest file.

View File

@ -38,7 +38,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -125,7 +125,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -203,7 +203,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -351,7 +351,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -84,6 +84,10 @@ Example:
`wails build -clean -o myproject.exe` `wails build -clean -o myproject.exe`
:::Info
On Mac, the application will be bundled with `Info.plist`, not `Info.dev.plist`.
:::
:::info UPX on Apple Silicon :::info UPX on Apple Silicon
There are [issues](https://github.com/upx/upx/issues/446) with using UPX with Apple Silicon. There are [issues](https://github.com/upx/upx/issues/446) with using UPX with Apple Silicon.

View File

@ -363,21 +363,6 @@ Indicates what value the `CSSDragProperty` style should have to drag the window.
Name: CSSDragValue<br/> Name: CSSDragValue<br/>
Type: `string` Type: `string`
### ZoomFactor
Name: ZoomFactor<br/>
Type: `float64`
This defines the zoom factor for the WebView2. This is the option matching the Edge user activated zoom in or out.
### IsZoomControlEnabled
Name: IsZoomControlEnabled<br/>
Type: `bool`
This enables the zoom factor to be changed by the user. Please note that the zoom factor can be set in the options while
disallowing the user to change it at runtime (f.e. for a kiosk application or similar).
### Bind ### Bind
A slice of struct instances defining methods that need to be bound to the frontend. A slice of struct instances defining methods that need to be bound to the frontend.
@ -473,6 +458,21 @@ Important information about distribution of fixed version runtime:
Name: WebviewBrowserPath<br/> Name: WebviewBrowserPath<br/>
Type: `string` Type: `string`
### ZoomFactor
Name: ZoomFactor<br/>
Type: `float64`
This defines the zoom factor for the WebView2. This is the option matching the Edge user activated zoom in or out.
### IsZoomControlEnabled
Name: IsZoomControlEnabled<br/>
Type: `bool`
This enables the zoom factor to be changed by the user. Please note that the zoom factor can be set in the options while
disallowing the user to change it at runtime (f.e. for a kiosk application or similar).
#### Theme #### Theme
Minimum Windows Version: Windows 10 2004/20H1 Minimum Windows Version: Windows 10 2004/20H1

View File

@ -0,0 +1,38 @@
{
"version.label": {
"message": "v2.1.0",
"description": "The label for version v2.1.0"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar docs"
},
"sidebar.docs.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar docs"
},
"sidebar.docs.category.Community": {
"message": "Community",
"description": "The label for category Community in sidebar docs"
},
"sidebar.docs.category.Showcase": {
"message": "Showcase",
"description": "The label for category Showcase in sidebar docs"
},
"sidebar.docs.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar docs"
},
"sidebar.docs.category.Tutorials": {
"message": "Tutorials",
"description": "The label for category Tutorials in sidebar docs"
},
"sidebar.docs.link.Contributing": {
"message": "Contributing",
"description": "The label for link Contributing in sidebar docs, linking to /community-guide#ways-of-contributing"
}
}

View File

@ -24,7 +24,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -107,7 +107,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -182,7 +182,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -327,7 +327,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -106,7 +106,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -181,7 +181,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -326,7 +326,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -106,7 +106,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -181,7 +181,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -326,7 +326,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -0,0 +1,38 @@
{
"version.label": {
"message": "v2.1.0",
"description": "The label for version v2.1.0"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar docs"
},
"sidebar.docs.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar docs"
},
"sidebar.docs.category.Community": {
"message": "Community",
"description": "The label for category Community in sidebar docs"
},
"sidebar.docs.category.Showcase": {
"message": "Showcase",
"description": "The label for category Showcase in sidebar docs"
},
"sidebar.docs.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar docs"
},
"sidebar.docs.category.Tutorials": {
"message": "Tutorials",
"description": "The label for category Tutorials in sidebar docs"
},
"sidebar.docs.link.Contributing": {
"message": "Contributing",
"description": "The label for link Contributing in sidebar docs, linking to /community-guide#ways-of-contributing"
}
}

View File

@ -0,0 +1,26 @@
---
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.
## Awesome Wails
The [definitive list](https://github.com/wailsapp/awesome-wails) of links related to Wails.
## 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/828)
## Social Media
- [Twitter](https://twitter.com/wailsapp)
- [Wails Chinese Community QQ Group](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - Group number: 1067173054
## Other Tutorials and Articles
- [Building of Bulletin Board](https://blog.customct.com/building-bulletin-board)

View File

@ -1,8 +1,10 @@
# EmailIt # EmailIt
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/emailit.webp").default} /> <img src={require("@site/static/img/showcase/emailit.webp").default} />
<br /> <br />
</p> </p>
```
[EmailIt](https://github.com/raguay/EmailIt/) is a Wails 2 program that is a markdown based email sender only with nine notepads, scripts to manipulate the text, and templates. It also has a builtin [Node-Red](https://nodered.org/) server, scripts terminal, and the [ScriptBar](https://github.com/raguay/ScriptBarApp) program for displaying results from Node-Red or a script on your system. Documentation is very scarce, but the programs works. Its built using Wails2 and Svelte, and the download is a universal macOS application. [EmailIt](https://github.com/raguay/EmailIt/) is a Wails 2 program that is a markdown based email sender only with nine notepads, scripts to manipulate the text, and templates. It also has a builtin [Node-Red](https://nodered.org/) server, scripts terminal, and the [ScriptBar](https://github.com/raguay/ScriptBarApp) program for displaying results from Node-Red or a script on your system. Documentation is very scarce, but the programs works. Its built using Wails2 and Svelte, and the download is a universal macOS application.

View File

@ -1,9 +1,11 @@
# EncryptEasy # EncryptEasy
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/encrypteasy.webp").default} /> <img src={require("@site/static/img/showcase/encrypteasy.webp").default} />
<br /> <br />
</p> </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.** **[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.**

View File

@ -0,0 +1,16 @@
# FileHound Export Utility
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/filehound.webp").default} />
<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

View File

@ -1,10 +1,14 @@
# Minecraft Updater # Minecraft Updater
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img <img
src={require("@site/static/img/showcase/minecraft-mod-updater.webp").default} src={
require("@site/static/img/showcase/minecraft-mod-updater.webp").default
}
/> />
<br /> <br />
</p> </p>
```
[Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater) is a utility tool to update and synchronize Minecraft mods for your userbase. Its built using Wails2 and React with [antd](https://ant.design/) as frontend framework. [Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater) is a utility tool to update and synchronize Minecraft mods for your userbase. Its built using Wails2 and React with [antd](https://ant.design/) as frontend framework.

View File

@ -1,11 +1,13 @@
# Modal File Manager # Modal File Manager
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img <img
src={require("@site/static/img/showcase/modalfilemanager.webp").default} src={require("@site/static/img/showcase/modalfilemanager.webp").default}
/> />
<br /> <br />
</p> </p>
```
[Modal File Manager](https://github.com/raguay/ModalFileManager) is a dual pane file manager using web technologies. My original design was based on NW.js and can be found [here](https://github.com/raguay/ModalFileManager-NWjs). This version uses the same Svelte based frontend code (but it has be greatly modified since the departure from NW.js), but the backend is a [Wails 2](https://wails.io/) implementation. By using this implementation, I no longer use command line `rm`, `cp`, etc. commands. It is fully coded using Go and runs much faster than the previous versions. [Modal File Manager](https://github.com/raguay/ModalFileManager) is a dual pane file manager using web technologies. My original design was based on NW.js and can be found [here](https://github.com/raguay/ModalFileManager-NWjs). This version uses the same Svelte based frontend code (but it has be greatly modified since the departure from NW.js), but the backend is a [Wails 2](https://wails.io/) implementation. By using this implementation, I no longer use command line `rm`, `cp`, etc. commands. It is fully coded using Go and runs much faster than the previous versions.

View File

@ -1,8 +1,10 @@
# Molley Wallet # Molley Wallet
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/mollywallet.webp").default} /> <img src={require("@site/static/img/showcase/mollywallet.webp").default} />
<br /> <br />
</p> </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. [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.

View File

@ -1,9 +1,11 @@
# October # October
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/october.webp").default} /> <img src={require("@site/static/img/showcase/october.webp").default} />
<br /> <br />
</p> </p>
```
[October](https://october.utf9k.net) is a small Wails application that makes it really easy to extract highlights from [Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader) and then forward them to [Readwise](https://readwise.io). [October](https://october.utf9k.net) is a small Wails application that makes it really easy to extract highlights from [Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader) and then forward them to [Readwise](https://readwise.io).

View File

@ -1,8 +1,10 @@
# Optimus # Optimus
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/optimus.webp").default} /> <img src={require("@site/static/img/showcase/optimus.webp").default} />
<br /> <br />
</p> </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. [Optimus](https://github.com/splode/optimus) is a desktop image optimization application. It supports conversion and compression between WebP, JPEG, and PNG image formats.

View File

@ -1,8 +1,10 @@
# Portfall # Portfall
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/portfall.webp").default} /> <img src={require("@site/static/img/showcase/portfall.webp").default} />
<br /> <br />
</p> </p>
```
[Portfall](https://github.com/rekon-oss/portfall) - A desktop k8s port-forwarding portal for easy access to all your cluster UIs [Portfall](https://github.com/rekon-oss/portfall) - A desktop k8s port-forwarding portal for easy access to all your cluster UIs

View File

@ -1,10 +1,12 @@
# Restic Browser # Restic Browser
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img <img
src={require("@site/static/img/showcase/restic-browser-2.png").default} src={require("@site/static/img/showcase/restic-browser-2.png").default}
/> />
<br /> <br />
</p> </p>
```
[Restic-Browser](https://github.com/emuell/restic-browser) - A simple, cross-platform [restic](https://github.com/restic/restic) backup GUI for browsing and restoring restic repositories. [Restic-Browser](https://github.com/emuell/restic-browser) - A simple, cross-platform [restic](https://github.com/restic/restic) backup GUI for browsing and restoring restic repositories.

View File

@ -1,9 +1,11 @@
# RiftShare # RiftShare
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/riftshare-main.webp").default} /> <img src={require("@site/static/img/showcase/riftshare-main.webp").default} />
<br /> <br />
</p> </p>
```
Easy, Secure, and Free file sharing for everyone. Learn more at [Riftshare.app](https://riftshare.app) Easy, Secure, and Free file sharing for everyone. Learn more at [Riftshare.app](https://riftshare.app)

View File

@ -1,8 +1,10 @@
# ScriptBar # ScriptBar
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/scriptbar.webp").default} /> <img src={require("@site/static/img/showcase/scriptbar.webp").default} />
<br /> <br />
</p> </p>
```
[ScriptBar](https://GitHub.com/raguay/ScriptBarApp) is a program to show the output of the embedded [Node-Red](https://nodered.org) server in the [EmailIt](https://GitHub.com/raguay/EmailIt) application. It also displays the output of scripts on your system. ScriptBar doesn't put them in the menubar, but has them all in a convient window for easy viewing. You can have multiple tabs to have many different things show. You can also keep the links to your most visited web sites. [ScriptBar](https://GitHub.com/raguay/ScriptBarApp) is a program to show the output of the embedded [Node-Red](https://nodered.org) server in the [EmailIt](https://GitHub.com/raguay/EmailIt) application. It also displays the output of scripts on your system. ScriptBar doesn't put them in the menubar, but has them all in a convient window for easy viewing. You can have multiple tabs to have many different things show. You can also keep the links to your most visited web sites.

View File

@ -1,8 +1,10 @@
# Surge # Surge
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/surge.png").default} /> <img src={require("@site/static/img/showcase/surge.png").default} />
<br /> <br />
</p> </p>
```
[Surge](https://getsurge.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. [Surge](https://getsurge.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.

View File

@ -1,8 +1,10 @@
# Wally # Wally
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/wally.webp").default} /> <img src={require("@site/static/img/showcase/wally.webp").default} />
<br /> <br />
</p> </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. [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.

View File

@ -1,8 +1,10 @@
# Wombat # Wombat
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/wombat.webp").default} /> <img src={require("@site/static/img/showcase/wombat.webp").default} />
<br /> <br />
</p> </p>
```
[Wombat](https://github.com/rogchap/wombat) is a cross platform gRPC client. [Wombat](https://github.com/rogchap/wombat) is a cross platform gRPC client.

View File

@ -1,8 +1,10 @@
# Ytd # Ytd
```mdx-code-block
<p style={{ "text-align": "center" }}> <p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/ytd.webp").default} /> <img src={require("@site/static/img/showcase/ytd.webp").default} />
<br /> <br />
</p> </p>
```
[Ytd](https://github.com/marcio199226/ytd/tree/v2-wails) is an app for downloading tracks from youtube, creating offline playlists and share them with your friends, your friends will be able to playback your playlists or download them for offline listening, has an built-in player. [Ytd](https://github.com/marcio199226/ytd/tree/v2-wails) is an app for downloading tracks from youtube, creating offline playlists and share them with your friends, your friends will be able to playback your playlists or download them for offline listening, has an built-in player.

View File

@ -0,0 +1,56 @@
---
sidebar_position: 1
---
# テンプレート
このページでは、コミュニティがサポートしているテンプレートを紹介しています。 このページに新たにテンプレートを含めたい場合は、このページの下側にある`このページを編集`をクリックして、プルリクエストを出してください。 独自テンプレートの作成方法については、[テンプレート](../guides/templates.mdx)ガイドをご覧ください。
これらのテンプレートを使用するには、`wails init -n "プロジェクト名" -t [テンプレートのリンク[@バージョン]]`コマンドを実行してください。
バージョンサフィックスが無い場合は、デフォルトで、メインブランチのコードテンプレートが使用されます。 バージョンサフィックスがある場合は、当該バージョンのタグに対応するコードテンプレートが使用されます。
例: `wails init -n "プロジェクト名" -t https://github.com/misitebao/wails-template-vue`
:::warning 注意
**Wailsプロジェクトでは、サードパーティ製テンプレートのメンテナンスは行っておらず、責任も負いません!**
テンプレートについてよく分からない場合は、`package.json`および`wails.json`を確認し、どのようなスクリプトが実行されるのかや、どのようなパッケージがインストールされるのかを調べてください。
:::
## Vue
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - Wails template based on Vue ecology (Integrated TypeScript, Dark theme, Internationalization, Single page routing, TailwindCSS)
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - Viteを使用したVue 3 TypeScript (および機能を追加する手順)
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - Vite、Vuex、Vue Router、SaaS、ESLint + Prettier を使用した Vue 3 TypeScript
## Angular
- [wails-angular-template](https://github.com/TAINCER/wails-angular-template) - TypeScript、Sass、ホットリロード、コード分割、i18n を使用した Angular
## React
- [wails-react-template](https://github.com/AlienRecall/wails-react-template) - reactjsを使用したテンプレート
- [wails-react-template](https://github.com/flin7/wails-react-template) - ライブ開発をサポートしたReactの最小テンプレート
- [wails-template-nextjs](https://github.com/LGiki/wails-template-nextjs) - Next.js、TypeScript を使用したテンプレート
- [wails-vite-react-ts-tailwind-template](https://github.com/hotafrika/wails-vite-react-ts-tailwind-template) - A template for React + TypeScript + Vite + TailwindCSS
## Svelte
- [wails-svelte-template](https://github.com/raitonoberu/wails-svelte-template) - Svelteを使用したテンプレート
- [wails-vite-svelte-template](https://github.com/BillBuilt/wails-vite-svelte-template) - SvelteおよびViteを使用したテンプレート
- [wails-vite-svelte-tailwind-template](https://github.com/BillBuilt/wails-vite-svelte-tailwind-template) - TailwindCSS v3を含んだ、SvelteおよびViteを使用したテンプレート
- [wails-sveltekit-template](https://github.com/h8gi/wails-sveltekit-template) - SvelteKitを使用したテンプレート
## Elm
- [wails-elm-template](https://github.com/benjamin-thomas/wails-elm-template) - 関数型プログラミングと**高速な**ホットリロードを使ったGUIアプリ開発 :tada: :rocket:
- [wails-template-elm-tailwind](https://github.com/rnice01/wails-template-elm-tailwind) - Combine the powers :muscle: of Elm + Tailwind CSS + Wails! Hot reloading supported.
## ピュアJavaScript (バニラ)
- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - 基本的なJavaScript、HTML、CSSのみを含むテンプレート

View File

@ -0,0 +1,22 @@
---
sidebar_position: 6
---
# プロジェクトのコンパイル
プロジェクトディレクトリ上で、`wails build`コマンドを実行しましょう。 そうすることで、プロジェクトがコンパイルされ、`build/bin`ディレクトリ内に本番配布用のバイナリが出力されます。
バイナリを起動すると、デフォルト仕様のアプリを確認することができます:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/defaultproject.webp").default}
width="50%"
class="screenshot"
/>
</div>
<br />
```
コンパイルオプションについて詳しくは、[CLIリファレンス](../reference/cli.mdx#build)をご覧ください。

View File

@ -0,0 +1,16 @@
---
sidebar_position: 5
---
# アプリの開発
プロジェクトディレクトリのルート上で`wails dev`コマンドを実行すると、アプリを開発モードで起動することができます。 コマンドを実行すると下記の処理が実行されます:
- アプリをビルドしたのち、起動する
- Goのコードをフロントエンドにバインドし、Javascriptから呼び出せるようにする
- Using the power of [Vite](https://vitejs.dev/), will watch for modifications in your Go files and rebuild/re-run on change
- ブラウザからアプリを操作できるようにする[Webサーバ](http://localhost:34115)を立ち上げる。 これにより、任意のブラウザ拡張機能を利用できる。 JavascriptのコンソールからGoのコードを呼び出すこともできる
アプリ開発を始めるときは、プロジェクトディレクトリ上で`wails dev`コマンドを実行しましょう。 詳しくは、[こちら](../reference/cli.mdx#dev)をご覧ください。
近日中にチュートリアルを公開予定です。

View File

@ -0,0 +1,130 @@
---
sidebar_position: 2
---
# プロジェクトの開始
## プロジェクトの生成
CLIのインストールが終わったら、`wails init`コマンドで新しいプロジェクトを生成しましょう。
好きなフレームワークを選択してください:
```mdx-code-block
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs
defaultValue="Svelte"
values={[
{label: "Svelte", value: "Svelte"},
{label: "React", value: "React"},
{label: "Vue", value: "Vue"},
{label: "Preact", value: "Preact"},
{label: "Lit", value: "Lit"},
{label: "Vanilla", value: "Vanilla"},
]}
>
<TabItem value="Svelte">
Generate a <a href={"https://svelte.dev/"}>Svelte</a> project using Javascript with:<br/><br/>
wails init -n myproject -t svelte
If you would rather use Typescript:<br/>
wails init -n myproject -t svelte-ts
</TabItem>
<TabItem value="React">
Generate a <a href={"https://reactjs.org/"}>React</a> project using Javascript with:<br/><br/>
wails init -n myproject -t react
If you would rather use Typescript:<br/>
wails init -n myproject -t react-ts
</TabItem>
<TabItem value="Vue">
Generate a <a href={"https://vuejs.org/"}>Vue</a> project using Javascript with:<br/><br/>
wails init -n myproject -t vue
If you would rather use Typescript:<br/>
wails init -n myproject -t vue-ts
</TabItem>
<TabItem value="Preact">
Generate a <a href={"https://preactjs.com/"}>Preact</a> project using Javascript with:<br/><br/>
wails init -n myproject -t preact
If you would rather use Typescript:<br/>
wails init -n myproject -t preact-ts
</TabItem>
<TabItem value="Lit">
Generate a <a href={"https://lit.dev/"}>Lit</a> project using Javascript with:<br/><br/>
wails init -n myproject -t lit
If you would rather use Typescript:<br/>
wails init -n myproject -t lit-ts
</TabItem>
<TabItem value="Vanilla">
Generate a Vanilla project using Javascript with:<br/><br/>
wails init -n myproject -t vanilla
If you would rather use Typescript:<br/>
wails init -n myproject -t vanilla-ts
</TabItem>
</Tabs>
```
<hr />
様々な機能やフレームワークを提供する[コミュニティテンプレート](../community/templates.mdx)を利用することもできます。
プロジェクト生成時に使用可能なオプションを確認するには、`wails init -help`を実行してください。 詳しくは、[CLIリファレンス](../reference/cli.mdx#init)を参照してください。
## プロジェクトのディレクトリ構成
Wailsのプロジェクトディレクトリの構成は次のとおりです:
```
.
├── build/
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json
```
### プロジェクトの構造
- `/main.go` - アプリのメインコード
- `/frontend/` - フロントエンドのプロジェクトディレクトリ
- `/build/` - ビルドディレクトリ
- `/build/appicon.png` - アプリアイコン
- `/build/darwin/` - Mac固有のプロジェクトディレクトリ
- `/build/windows/` - Windows固有のプロジェクトディレクトリ
- `/wails.json` - プロジェクト構成ファイル
- `/go.mod` - Goモジュール定義ファイル
- `/go.sum` - Goモジュールチェックサムファイル
`frontend`ディレクトリ内は、Wailsで決まったファイル構成等は無く、お好きなフロントエンドプロジェクトを配置することができます。
`build`ディレクトリは、アプリのビルド時に使用されます。 この中のファイルは、ビルドの挙動をカスタマイズするために、適宜ファイル内容を書き換えることができます。 buildディレクトリ内のファイルを削除すると、デフォルトのファイルが再生成されます。
`go.mod`のモジュール名は、最初は"changeme"になっています。 このモジュール名は、あなたのプロジェクトに適切な名前に変更しましょう。

View File

@ -0,0 +1,79 @@
---
sidebar_position: 1
---
# インストール
## サポートされているプラットフォーム
- Windows 10/11 AMD64/ARM64
- MacOS 10.13+ AMD64
- MacOS 11.0+ ARM64
- Linux AMD64/ARM64
## 依存関係
Wailsをインストールする前に、下記のものを導入しておく必要があります。
- Go 1.18+
- NPM (Node 15+)
### Go
Download Go from the [Go Downloads Page](https://go.dev/dl/).
公式の[Goインストール手順](https://go.dev/doc/install)に従って、Goをインストールしてください。 その際、`PATH`環境変数に`~/go/bin`ディレクトリへのパスが含まれていることも確認してください。 それらが終わったら、ターミナルを再起動し、以下の確認をしてください:
- Goが正しくインストールされているかを確認する: `go version`
- "~/go/bin"のディレクトリパスがPATH環境変数に含まれているか確認する: `echo $PATH | grep go/bin`
### NPM
[Nodeダウンロードページ](https://nodejs.org/ja/download/)からNPMをダウンロードしてください。 最新版を利用することをお勧めします。なぜなら、私たちは最新版に対してテストを実施しているためです。
`npm --version`を実行して、インストールが完了しているかを確認してください。
## プラットフォーム固有の依存関係
開発作業を行うプラットフォームによって、必要な依存関係が存在します:
```mdx-code-block
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">
Wails requires that the xcode command line tools are installed. This can be
done by running <code>xcode-select --install</code>.
</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 <code>wails doctor</code> command.
</TabItem>
<TabItem value={"Linux"}>
Linux required the standard <code>gcc</code> build tools plus <code>libgtk3</code> and <code>libwebkit</code>. Rather than list a ton of commands for different distros, Wails can try to determine what the installation commands are for your specific distribution. Run <code>wails doctor</code> after installation to be shown how to install the dependencies. If your distro/package manager is not supported, please consult the <a href={"/docs/guides/linux-distro-support"}>Add Linux Distro</a> guide.
</TabItem>
</Tabs>
```
## 任意の依存関係
- [UPX](https://upx.github.io/)を導入することで、構築したアプリを圧縮できます。
## Wailsのインストール
`go install github.com/wailsapp/wails/v2/cmd/wails@latest`を実行して、Wails CLIをインストールしてください。
## システムチェック
`wails doctor`を実行すると、必要な依存関係が正しくインストールされているかを確認することができます。 正しくインストールされていない場合は、その内容をあなたにお知らせして、どうすれば解決できるかを教えてくれます。
## `wails`コマンドが見つからないのですが?
`wails`コマンドが見つからないとシステムに怒られた場合は、Goが、公式のGoインストール手順に従って導入されているかを確認してください。 コマンドが見つからないほとんどの理由は、あなたのホームディレクトリ配下にある`go/bin`ディレクトリのパスが、`PATH`環境変数に含まれていないからです。 また、インストールによって行われた環境変更を反映させるために、もともと開いていたコマンドプロンプト(ターミナル)がある場合はそれらをいったん閉じて、再度開きなおしてください。

View File

@ -0,0 +1,194 @@
# 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](../reference/runtime/intro.mdx). 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](../howdoesitwork.mdx#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.Sprintf("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).
### Dealing with context when binding multiple structs
If you want to bind methods for multiple structs but want each struct to keep a reference to the context so that you can use the runtime functions, a good pattern is to pass the context from the `OnStartup` method to your struct instances :
```go
func main() {
app := NewApp()
otherStruct := NewOtherStruct()
err := wails.Run(&options.App{
Title: "My App",
Width: 800,
Height: 600,
OnStartup: func(ctx context.Context){
app.SetContext(ctx)
otherStruct.SetContext(ctx)
},
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
otherStruct
},
})
if err != nil {
log.Fatal(err)
}
}
```
More information on Binding can be found [here](../howdoesitwork.mdx#method-binding).
## Application Menu
Wails supports adding a menu to your application. This is done by passing a [Menu](../reference/menus.mdx#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`.
### AssetsHandler
A Wails v2 app can optionally define a `http.Handler` in the `options.App`, which allows hooking into the AssetServer to create files on the fly or process POST/PUT requests. GET requests are always first handled by the `assets` FS. If the FS doesn't find the requested file the request will be forwarded to the `http.Handler` for serving. Any requests other than GET will be directly processed by the `AssetsHandler` if specified. It's also possible to only use the `AssetsHandler` by specifiy `nil` as the `Assets` option.
## Built in Dev Server
Running `wails dev` will start the built in dev server which 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 assets, it will issue a reload after a short amount of time.
The dev server uses a technique called "debouncing" which means it doesn't reload straight away, as there may be multiple files changed in a short amount of time. When a trigger occurs, it waits for a set amount of time before issuing a reload. If another trigger happens, it resets to the wait time again. By default this value is `100ms`. If this value doesn't work for your project, it can be configured using the `-debounce` flag. If used, this value will be saved to your project config and become the default.
## External Dev Server
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.

View File

@ -0,0 +1,55 @@
# Bleeding Edge
## Overview
Wails is in constant development and new releases are regularly "tagged". This usually happens when all the newer code on `master` has been tested and confirmed working. If you need a bugfix or feature that has not yet made it to a release, it's possible to use the latest "bleeding edge" version using the following steps:
- `git clone https://github.com/wailsapp/wails`
- `cd wails/v2/cmd/wails`
- `go install`
NOTE: The directory that you cloned the project into will now be called "clonedir".
The Wails CLI will now be at the very latest version.
### Updating your project
To update projects to use the latest version of the Wails library, update the project's `go.mod` and ensure the following line is at the bottom of the file:
`replace github.com/wailsapp/wails/v2 => <clonedir>`
Example:
On Windows: `replace github.com/wailsapp/wails/v2 => C:\Users\leaan\Documents\wails-v2-beta\wails\v2`
On 'nix: `replace github.com/wailsapp/wails/v2 => /home/me/projects/wails/v2`
To revert to a stable version, run:
`go install github.com/wailsapp/wails/v2/cmd/wails@latest`
## Testing a Branch
If you want to test a branch, follow the instructions above, but ensure you switch the branch you want to test before installing:
- `git clone https://github.com/wailsapp/wails`
- `cd wails`
- `git checkout -b branch-to-test --track origin/branch-to-test`
- `cd v2/cmd/wails`
- `go install`
Make sure you [update your project](#updating-your-project) as described above.
## Testing a PR
If you want to test a PR, follow the instructions above, but ensure you fetch the PR and switch the branch before installing. Please replace `[IDofThePR]` with the ID of the PR shown on github.com:
- `git clone https://github.com/wailsapp/wails`
- `cd wails`
- `git fetch -u origin pull/[IDofThePR]/head:test/pr-[IDofThePR]`
- `git checkout test/pr-[IDofThePR]`
- `git reset --hard HEAD`
- `cd v2/cmd/wails`
- `go install`
Make sure you [update your project](#updating-your-project) as described above.

View File

@ -0,0 +1,134 @@
# Dynamic Assets
If you want to load or generate assets for your frontend dynamically, you can achieve that using the [AssetsHandler](../reference/options#assetshandler) option. The AssetsHandler is a generic `http.Handler` which will be called for any non GET request on the assets server and for GET requests which can not be served from the bundled assets because the file is not found.
By installing a custom AssetsHandler, you can serve your own assets using a custom asset server.
## Example
In our example project, we will create a simple assets handler which will load files off disk:
```go title=main.go {16-35,49}
package main
import (
"embed"
"fmt"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"net/http"
"os"
"strings"
)
//go:embed all:frontend/dist
var assets embed.FS
type FileLoader struct {
http.Handler
}
func NewFileLoader() *FileLoader {
return &FileLoader{}
}
func (h *FileLoader) ServeHTTP(res http.ResponseWriter, req *http.Request) {
var err error
requestedFilename := strings.TrimPrefix(req.URL.Path, "/")
println("Requesting file:", requestedFilename)
fileData, err := os.ReadFile(requestedFilename)
if err != nil {
res.WriteHeader(http.StatusBadRequest)
res.Write([]byte(fmt.Sprintf("Could not load file %s", requestedFilename)))
}
res.Write(fileData)
}
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "helloworld",
Width: 1024,
Height: 768,
Assets: assets,
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 255},
OnStartup: app.startup,
AssetsHandler: NewFileLoader(),
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err)
}
}
```
When we run the application in dev mode using `wails dev`, we will see the following output:
```
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico'
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico' failed, using AssetHandler
Requesting file: favicon.ico
```
As you can see, the assets handler is called when the default assets server is unable to serve the `favicon.ico` file.
If you right click the main application and select "inspect" to bring up the devtools, you can test this feature out by typing the following into the console:
```
let response = await fetch('does-not-exist.txt');
```
This will generate an error in the devtools. We can see that the error is what we expect, returned by our custom assets handler:
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
/>
</p>
```
However, if we request `go.mod`, we will see the following output:
```mdx-code-block
<p className="text--center">
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
</p>
```
This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
```html
<img id="logo" class="logo" />
```
with:
```html
<img src="build/appicon.png" style="width: 300px" />
```
Then we would see the following:
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/assetshandler-image.webp").default}
style={{ width: "75%" }}
/>
</p>
```
:::warning
Exposing your filesystem in this way is a security risk. It is recommended that you properly manage access to your filesystem.
:::

View File

@ -0,0 +1,85 @@
# Frameless Applications
Wails supports application that have no frames. This can be achieved by using the [frameless](../reference/options.mdx#frameless) field in [Application Options](../reference/options.mdx#application-options).
Wails offers a simple solution for dragging the window: Any HTML element that has the CSS style `--wails-draggable:drag` will act as a "drag handle". This property applies to all child elements. If you need to indicate that a nested element should not drag, then use the attribute '--wails-draggable:no-drag' on that element.
```html
<html>
<head>
<link rel="stylesheet" href="/main.css" />
</head>
<body style="--wails-draggable:drag">
<div id="logo"></div>
<div id="input" style="--wails-draggable:no-drag">
<input id="name" type="text" />
<button onclick="greet()">Greet</button>
</div>
<div id="result"></div>
<script src="/main.js"></script>
</body>
</html>
```
For some projects, using a CSS variable may not be possible due to dynamic styling. In this case, you can use the `CSSDragProperty` and `CSSDragValue` application options to define a property and value that will be used to indicate draggable regions:
```go title=main.go
package main
import (
"embed"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "alwaysontop",
Width: 1024,
Height: 768,
Assets: assets,
Frameless: true,
CSSDragProperty: "widows",
CSSDragValue: "1",
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err)
}
}
```
```html title=index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>alwaysontop</title>
</head>
<body style="widows: 1">
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
```
:::info Fullscreen
If you allow your application to go fullscreen, this drag functionality will be disabled.
:::

View File

@ -0,0 +1,75 @@
# Frontend
## Script Injection
When Wails serves your `index.html`, by default, it will inject 2 script entries into the `<body>` tag to load `/wails/ipc.js` and `/wails/runtime.js`. These files install the bindings and runtime respectively.
The code below shows where these are injected by default:
```html
<html>
<head>
<title>injection example</title>
<link rel="stylesheet" href="/main.css">
<!-- <script src="/wails/ipc.js"></script> -->
<!-- <script src="/wails/runtime.js"></script> -->
</head>
<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off">
<button class="btn" onclick="greet()">Greet</button>
</div>
<script src="/main.js"></script>
</body>
</html>
```
### Overriding Default Script Injection
To provide more flexibility to developers, there is a meta tag that may be used to customise this behaviour:
```html
<meta name="wails-options" content="[options]">
```
The options are as follows:
| 値 | Description |
| ------------------- | ------------------------------------------------ |
| noautoinjectruntime | Disable the autoinjection of `/wails/runtime.js` |
| noautoinjectipc | Disable the autoinjection of `/wails/ipc.js` |
| noautoinject | Disable all autoinjection of scripts |
Multiple options may be used provided they are comma seperated.
This code is perfectly valid and operates the same as the autoinjection version:
```html
<html>
<head>
<title>injection example</title>
<meta name="wails-options" content="noautoinject">
<link rel="stylesheet" href="/main.css">
</head>
<body data-wails-drag>
<div class="logo"></div>
<div class="result" id="result">Please enter your name below 👇</div>
<div class="input-box" id="input" data-wails-no-drag>
<input class="input" id="name" type="text" autocomplete="off">
<button class="btn" onclick="greet()">Greet</button>
</div>
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<script src="/main.js"></script>
</body>
</html>
```

View File

@ -0,0 +1,128 @@
# 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
```mdx-code-block
<p className="text--center">
<img
src={require("@site/static/img/vscode.webp").default}
style={{ width: "75%" }}
/>
</p>
```
When generating a project using the `-ide vscode` flags, 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": {}
}
]
}
```
### 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.
:::

View File

@ -0,0 +1,104 @@
# Linux Distro Support
## Overview
Wails offers Linux support but providing installation instructions for all available distributions is an impossible task. Instead, Wails tries to determine if the packages you need to develop applications are available via your system's package manager. Currently, we support the following package managers:
- apt
- dnf
- emerge
- eopkg
- nixpkgs
- pacman
- zypper
## Adding package names
There may be circumstances where your distro uses one of the supported package managers but the package name is different. For example, you may use an Ubuntu derivative, but the package name for gtk may be different. Wails attempts to find the correct package by iterating through a list of package names. The list of packages are stored in the packagemanager specific file in the `v2/internal/system/packagemanager` directory. In our example, this would be `v2/internal/system/packagemanager/apt.go`.
In this file, the list of packages are defined by the `Packages()` method:
```go
func (a *Apt) Packages() packagemap {
return packagemap{
"libgtk-3": []*Package{
{Name: "libgtk-3-dev", SystemPackage: true, Library: true},
},
"libwebkit": []*Package{
{Name: "libwebkit2gtk-4.0-dev", SystemPackage: true, Library: true},
},
"gcc": []*Package{
{Name: "build-essential", SystemPackage: true},
},
"pkg-config": []*Package{
{Name: "pkg-config", SystemPackage: true},
},
"npm": []*Package{
{Name: "npm", SystemPackage: true},
},
"docker": []*Package{
{Name: "docker.io", SystemPackage: true, Optional: true},
},
}
}
```
Let's assume that in our linux distro, `libgtk-3` is packaged under the name `lib-gtk3-dev`. We could add support for this by adding the following line:
```go {5}
func (a *Apt) Packages() packagemap {
return packagemap{
"libgtk-3": []*Package{
{Name: "libgtk-3-dev", SystemPackage: true, Library: true},
{Name: "lib-gtk3-dev", SystemPackage: true, Library: true},
},
"libwebkit": []*Package{
{Name: "libwebkit2gtk-4.0-dev", SystemPackage: true, Library: true},
},
"gcc": []*Package{
{Name: "build-essential", SystemPackage: true},
},
"pkg-config": []*Package{
{Name: "pkg-config", SystemPackage: true},
},
"npm": []*Package{
{Name: "npm", SystemPackage: true},
},
"docker": []*Package{
{Name: "docker.io", SystemPackage: true, Optional: true},
},
}
}
```
## Adding new package managers
To add a new package manager, perform the following steps:
- Create a new file in `v2/internal/system/packagemanager` called `<pm>.go`, where `<pm>` is the name of the package manager.
- Define a struct that conforms to the package manager interface defined in `pm.go`:
```go
type PackageManager interface {
Name() string
Packages() packagemap
PackageInstalled(*Package) (bool, error)
PackageAvailable(*Package) (bool, error)
InstallCommand(*Package) string
}
```
- `Name()` should return the name of the package manager
- `Packages()` should return a `packagemap`, that provides candidate filenames for dependencies
- `PackageInstalled()` should return `true` if the given package is installed
- `PackageAvailable()` should return `true` if the given package is not installed but available for installation
- `InstallCommand()` should return the exact command to install the given package name
Take a look at the other package managers code to get an idea how this works.
:::info Remember
If you add support for a new package manager, don't forget to also update this page!
:::

View File

@ -0,0 +1,18 @@
# Linux
This page has miscellaneous guides related to developing Wails applications for Linux.
## Video tag doesn't fire "ended" event
When using a video tag, the "ended" event is not fired when the video is finished playing. This is a bug in WebkitGTK, however you can use the following workaround to fix it:
```js
videoTag.addEventListener("timeupdate", (event) => {
if (event.target.duration - event.target.currentTime < 0.2) {
let ended = new Event("ended");
event.target.dispatchEvent(ended);
}
});
```
Source: [Lyimmi](https://github.com/Lyimmi) on the [discussions board](https://github.com/wailsapp/wails/issues/1729#issuecomment-1212291275)

View File

@ -0,0 +1,95 @@
# 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
- If `build/windows/icon.ico` does not exist, it will create it from `build/appicon.png` using 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.

View File

@ -0,0 +1,187 @@
# 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](../reference/options.mdx#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](../reference/options.mdx#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](../reference/options.mdx#application-options):
- [OnStartup](../reference/options.mdx#onstartup)
- [OnShutdown](../reference/options.mdx#onshutdown)
- [OnDomReady](../reference/options.mdx#ondomready)
Note: [OnDomReady](../reference/options.mdx#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](../reference/runtime/intro.mdx).
In v1, the [runtime](../reference/runtime/intro.mdx) 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](../reference/options.mdx#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 all: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](../reference/options.mdx#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 compiled frontend assets for `dev` mode. This is normally inferred and could be left empty. |
| | reloaddirs | Comma separated list of additional directories to watch for changes and to trigger reloads in `dev` mode. This is only needed for some more advanced asset configurations. |
</p>

View File

@ -0,0 +1,25 @@
# Mouse Buttons
The Wails runtime intercepts mouse clicks to determine whether a frameless window needs resizing or a window needs to be moved. It has been asked how to detect when a mouse click has occurred, because `window.onclick` doesn't report the mouse buttons correctly. The following code shows how to detect mouse clicks:
```javascript
window.addEventListener('mousedown', handleMouseButtonDown);
function handleMouseButtonDown(event) {
if (event.button === 0) {
// left mouse button
} else if (event.button === 1) {
// middle mouse button
} else if (event.button === 2) {
// right mouse button
} else if (event.button === 3) {
// back mouse button
} else if (event.button === 4) {
// forward mouse button
} else {
// other mouse button
}
}
```
Reference: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

View File

@ -0,0 +1,42 @@
# Obfuscated Builds
Wails includes support for obfuscating your application using [garble](https://github.com/burrowers/garble).
To produce an obfuscated build, you can use the `-obfuscate` flag with the `wails build` command:
```bash
wails build -obfuscated
```
To customise the obfuscation settings, you can use the `-garbleargs` flag:
```bash
wails build -obfuscated -garbleargs "-literals -tiny -seed=myrandomseed"
```
These settings may be persisted in your [project config](../reference/project-config).
## How it works
In a standard build, all bound methods are available in the frontend under the `window.go` variable. When these methods are called, the corresponding backend method is called using the fully qualified function name. When using an obfuscated build, methods are bound using an ID instead of a name. The bindings generated in the `wailsjs` directory use these IDs to call the backend functions.
:::note
To ensure that your application will work in obfuscated mode, you must use the generated bindings under the `wailsjs` directory in your application.
:::
## Example
Importing the "Greet" method from the bindings like this:
```js
import { Greet } from "../../wailsjs/go/main/App";
// snip
Greet("World");
```
will ensure that the method will work correctly in obfuscated mode, as the bindings will be regenerated with IDs and the call mechanism updated.

View File

@ -0,0 +1,10 @@
# Overscroll
[Overscroll](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) is the "bounce effect" you sometimes get when you scroll beyond a page's content boundaries. This is common in mobile apps. This can be disabled using CSS:
```css
html {
height: 100%;
overflow: hidden;
}
```

View File

@ -0,0 +1,47 @@
# Routing
Routing is a popular way to switch views in an application. This page offers some guidance around how to do that.
## Vue
The recommended approach for routing in Vue is [Hash Mode](https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode):
```js
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
```
## Angular
The recommended approach for routing in Angular is [HashLocationStrategy](https://codecraft.tv/courses/angular/routing/routing-strategies#_hashlocationstrategy):
```ts
RouterModule.forRoot(routes, { useHash: true });
```
## React
The recommended approach for routing in React is [HashRouter](https://reactrouter.com/docs/en/v6/routers/hash-router):
```jsx
import { HashRouter } from "react-router-dom";
ReactDOM.render(
<HashRouter basename={"/"}>
{/* The rest of your app goes here */}
<Routes>
<Route path="/" element={<Page0 />} exact />
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
{/* more... */}
</Routes>
</HashRouter>,
root
);
```

View File

@ -0,0 +1,376 @@
# Code Signing
This is a guide on how you can sign your binaries generated with Wails on MacOS and Windows. The guide will target CI environments, more specifically GitHub Actions.
## Windows
First off you need a code signing certificate. If you do not already have one, Microsoft's info page lists some providers [here](https://docs.microsoft.com/en-us/windows-hardware/drivers/dashboard/get-a-code-signing-certificate). Please note that an EV certificate is not required unless you need to write kernel-level software such as device drivers. For signing your Wails app, a standard code signing certificate will do just fine.
It may be a good idea to check with your certificate provider how to sign your binaries on your local machine before targeting automated build systems, just so you know if there are any special requirements. For instance, [here](https://www.ssl.com/how-to/using-your-code-signing-certificate/) is SSL.com's code signing guide for Windows. If you know how to sign locally, it will be easier to troubleshoot any potential issues in a CI environment. For instance, SSL.com code signing certificates require the `/tr` flag for [SignTool.exe](https://docs.microsoft.com/en-us/windows/win32/seccrypto/signtool) while other providers may only need the `/t` flag for providing the timestamping server. Popular GitHub Actions for signing Windows binaries like [this one](https://github.com/Dana-Prajea/code-sign-action) does not support the `/tr` flag on SignTool.exe. Therefore this guide will focus on signing our app manually with PowerShell commands, but you can use actions like the [code-sign-action](https://github.com/Dana-Prajea/code-sign-action) Action if you prefer.
First off, let's make sure we are able to build our Wails app in our GitHub CI. Here is a small workflow template:
```yaml
name: "example"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [windows-latest, macos-latest]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend manually here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
Next we need to give the GitHub workflow access to our signing certificate. This is done by encoding your .pfx or .p12 certificate into a base64 string. To do this in PowerShell, you can use the following command assuming your certificate is called 'my-cert.p12':
```PowerShell
certutil -encode .\my-cert.p12 my-cert-base64.txt
```
You should now have your .txt file with the base64 encoded certificate. It should start with _-----BEGIN CERTIFICATE-----_ and end with _-----END CERTIFICATE-----_. Now you need to make two action secrets on GitHub. Navigate to _Settings -> Secrets -> Actions_ and create the two following secrets:
- **WIN_SIGNING_CERT** with the contents of your base64 encoded certificate text.
- **WIN_SIGNING_CERT_PASSWORD** with the contents of your certificate password.
Now we're ready to implement the signing in our workflow using one of the two methods:
### Method 1: signing with commands
This method uses PowerShell commands to sign our app, and leaves you control over the entire signing process.
After the `"Build Wails app"` step, we can add the following step to our workflow:
```yaml
- name: Sign Windows binaries
if: matrix.platform == 'windows-latest'
run: |
echo "Creating certificate file"
New-Item -ItemType directory -Path certificate
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
certutil -decode certificate\certificate.txt certificate\certificate.pfx
echo "Signing our binaries"
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd <signing algorithm> /t <timestamping server> /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' <path to binary>
```
This script creates a new directory for your certificate file, creates the certificate file from our base64 secret, converts it to a .pfx file, and finally signs the binary. The following variables needs to be replaced in the last line:
- **signing algorithm**: usually sha256.
- **timestamping server**: URL to the timestamping server to use with your certificate.
- **path to binary**: path to the binary you want to sign.
Given that our Wails config has `outputfilename` set to "app.exe" and that we have a certificate from SSL.com, this would be our workflow:
```yaml
name: "example"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [ windows-latest, macos-latest ]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: Sign Windows binaries
if: matrix.platform == 'windows-latest'
run: |
echo "Creating certificate file"
New-Item -ItemType directory -Path certificate
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
certutil -decode certificate\certificate.txt certificate\certificate.pfx
echo "Signing our binaries"
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd sha256 /tr http://ts.ssl.com /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' .\build\bin\app.exe
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
### Method 2: automatically signing with Action
It is possible to use a Windows code signing Action like [this](https://github.com/marketplace/actions/code-sign-a-file-with-pfx-certificate) one, but note it requires a SHA1 hash for the certificate and a certificate name. View an example of how to configure it on the Action's [marketplace](https://github.com/marketplace/actions/code-sign-a-file-with-pfx-certificate).
---
## MacOS
First off you need your code signing certificate from Apple. If you do not have one, a simple Google search will help you acquire one. Once you have your certificate, you need to export it and encode it to base64. [This tutorial](https://localazy.com/blog/how-to-automatically-sign-macos-apps-using-github-actions) shows you how to do that in an easy manner. Once you have exported your .p12 certificate file, you can encode it to base64 as seen in the tutorial with the following command:
```bash
base64 Certificates.p12 | pbcopy
```
Now you're ready to create some GitHub project secrets, just as with Windows:
- **APPLE_DEVELOPER_CERTIFICATE_P12_BASE64** with the contents of your newly copied base64 certificate.
- **APPLE_DEVELOPER_CERTIFICATE_PASSWORD** with the contents of your certificate password.
- **APPLE_PASSWORD** with the contents of an App-Specific password to your Apple-ID account which you can generate [here](https://appleid.apple.com/account/manage).
Let's make sure we are able to build our Wails app in our GitHub Action workflow. Here is a small template:
```yaml
name: "example"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [ windows-latest, macos-latest ]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: upload artifacts macOS
if: matrix.platform == 'macos-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-macos
path: build/bin/*
- name: upload artifacts windows
if: matrix.platform == 'windows-latest'
uses: actions/upload-artifact@v2
with:
name: wails-binaries-windows
path: build/bin/*
```
For code signing on macOS, [gon](https://github.com/mitchellh/gon) is a very handy tool for code signing and communicating with Apple servers, also written in Go, and will be used in this guide.
After the `Build Wails app` step, add the following to the workflow:
```yaml
- name: MacOS download gon for code signing and app notarization
if: matrix.platform == 'macos-latest'
run: |
brew install mitchellh/gon/gon
```
Now we need to configure some gon config files in our `build/darwin` directory:
1. gon-sign.json:
```json
{
"source" : ["./build/bin/app.app"],
"bundle_id" : "app.myapp",
"apple_id": {
"username": "my-appleid@email.com",
"password": "@env:APPLE_PASSWORD"
},
"sign" :{
"application_identity" : "Developer ID Application: My Name"
}
}
```
Where `source` is your Wails binary, `bundle_id` is your bundle ID, `apple_id` contains your Apple ID username and App-Specific password which you created earlier, and `sign.application_identity` is your identity which you can find by running the following command:
```bash
security find-identity -v -p codesigning
```
2. entitlements.plist:
```plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
<key>com.apple.security.files.downloads.read-write</key>
<true/>
</dict>
</plist>
```
In this file you configure the entitlements you need for you app, e.g. camera permissions if your app uses the camera. Read more about entitlements [here](https://developer.apple.com/documentation/bundleresources/entitlements).
Make sure you have updated your `Info.plist` file with the same bundle ID as you entered in `gon-sign.json`. Here's an example `Info.plist` file:
```plist
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict>
<key>CFBundlePackageType</key><string>APPL</string>
<key>CFBundleName</key><string>MyApp</string>
<key>CFBundleExecutable</key><string>app</string>
<key>CFBundleIdentifier</key><string>app.myapp</string>
<key>CFBundleVersion</key><string>0.1.0</string>
<key>CFBundleGetInfoString</key><string>My app is cool and nice and chill and</string>
<key>CFBundleShortVersionString</key><string>0.1.0</string>
<key>CFBundleIconFile</key><string>iconfile</string>
<key>LSMinimumSystemVersion</key><string>10.13.0</string>
<key>NSHighResolutionCapable</key><string>true</string>
<key>LSApplicationCategoryType</key><string>public.app-category.utilities</string>
<key>NSHumanReadableCopyright</key><string>© Me</string>
</dict></plist>
```
Now we're ready to add the signing step in our workflow after building the Wails app:
```yaml
- name: Import Code-Signing Certificates for macOS
if: matrix.platform == 'macos-latest'
uses: Apple-Actions/import-codesign-certs@v1
with:
# The certificates in a PKCS12 file encoded as a base64 string
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
# The password used to import the PKCS12 file.
p12-password: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_PASSWORD }}
- name: Sign our macOS binary
if: matrix.platform == 'macos-latest'
run: |
echo "Signing Package"
gon -log-level=info ./build/darwin/gon-sign.json
```
Please note that signing binaries with Apple could take anywhere from minutes to hours.
## Combined workflow file:
Here is our GitHub workflow file with Windows + macOS combined:
```yaml
name: "example combined"
on:
workflow_dispatch:
# This Action only starts when you go to Actions and manually run the workflow.
jobs:
package:
strategy:
matrix:
platform: [ windows-latest, macos-latest ]
go-version: [1.18]
runs-on: ${{ matrix.platform }}
steps:
- uses: actions/checkout@v3
- name: Install Go
uses: actions/setup-go@v2
with:
go-version: ${{ matrix.go-version }}
- name: setup node
uses: actions/setup-node@v2
with:
node-version: 14
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: MacOS download gon for code signing and app notarization
if: matrix.platform == 'macos-latest'
run: |
brew install mitchellh/gon/gon
- name: Import Code-Signing Certificates for macOS
if: matrix.platform == 'macos-latest'
uses: Apple-Actions/import-codesign-certs@v1
with:
# The certificates in a PKCS12 file encoded as a base64 string
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
# The password used to import the PKCS12 file.
- name: Get Wails
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
- name: Build Wails app
run: |
wails build
- name: MacOS download gon for code signing and app notarization
if: matrix.platform == 'macos-latest'
run: |
brew install mitchellh/gon/gon
- name: Import Code-Signing Certificates for macOS
if: matrix.platform == 'macos-latest'
uses: Apple-Actions/import-codesign-certs@v1
with:
# The certificates in a PKCS12 file encoded as a base64 string
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
# The password used to import the PKCS12 file.
```
# End notes
This guide inspired by the RiftShare project and its workflow, which is highly recommended to check out [here](https://github.com/achhabra2/riftshare/blob/main/.github/workflows/build.yaml).

View File

@ -0,0 +1,97 @@
# テンプレート
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](../reference/cli.mdx#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:
```mdx-code-block
<div className="text--center">
<img
src={require("@site/static/img/vue3-template.png").default}
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](../community/templates.mdx) page
- Announce the template on the [Template Announcement](https://github.com/wailsapp/wails/discussions/825) discussion board

View File

@ -0,0 +1,148 @@
# Troubleshooting
An assortment of troubleshooting tips.
## `wails`コマンドが見つからないのですが?
`wails`コマンドが見つからないとシステムに怒られた場合は、Goが、公式のGoインストール手順に従って導入されているかを確認してください。 コマンドが見つからないほとんどの理由は、あなたのホームディレクトリ配下にある`go/bin`ディレクトリのパスが、`PATH`環境変数に含まれていないからです。 また、インストールによって行われた環境変更を反映させるために、もともと開いていたコマンドプロンプト(ターミナル)がある場合はそれらをいったん閉じて、再度開きなおしてください。
## My application is displaying a white/blank screen
Check that your application includes the assets from the correct directory. In your `main.go` file, you will have something similar to the following code:
```go
//go:embed all:frontend/dist
var assets embed.FS
```
Check that `frontend/dist` contains your application assets.
### Mac
If this happens on Mac, try adding the following to your `Info.plist`:
```xml
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
```
Reference: https://github.com/wailsapp/wails/issues/1504#issuecomment-1174317433
## Mac application not valid
If your built application looks like this in finder:
```mdx-code-block
<p className="text--center">
<img
src={
require("@site/static/img/troubleshooting/invalid_mac_app.png").default
}
/>
</p>
```
it's likely that your application's `info.plist` is invalid. Update the file in `build/<yourapp>.app/Contents/info.plist` and check if the data is valid, EG check the binary name is correct. To persist the changes, copy the file back to the `build/darwin` directory.
## Cannot call backend method from frontend with variadic arguments
If you have a backend method defined with variadic parameters, eg:
```go
func (a *App) TestFunc(msg string, args ...interface{}) error {
// Code
}
```
calling this method from the frontend like this will fail:
```js
var msg = "Hello: ";
var args = ["Go", "JS"];
window.go.main.App.TestFunc(msg, ...args)
.then((result) => {
//do things here
})
.catch((error) => {
//handle error
});
```
Workaround:
```js
var msg = "Hello ";
var args = ["Go", "JS"];
window.go.main.App.TestFunc(msg, args)
.then((result) => {
//without the 3 dots
//do things here
})
.catch((error) => {
//handle error
});
```
Credit: https://github.com/wailsapp/wails/issues/1186
## I'm having getting proxy errors when trying to install Wails
If you are getting errors like this:
```
"https://proxy.golang.org/github.com/wailsapp/wails/cmd/wails/@v/list": dial tcp 172.217.163.49:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
```
it's probably because the official Go Proxy is being blocked (Users in China have reported this). The solution is to set up the proxy manually, eg:
```
go env -w GO111MODULE=on
go env -w GOPROXY=https://goproxy.cn,direct
```
Source: https://github.com/wailsapp/wails/issues/1233
## The generated Typescript doesn't have the correct types
Sometimes the generated Typescript doesn't have the correct types. To mitigate this, it is possible to specify what types should be generated using the `ts_type` struct tag. For more details, please read [this](https://github.com/tkrajina/typescriptify-golang-structs#custom-types).
## When I navigate away from `index.html`, I am unable to call methods on the frontend
If you navigate away from `index.html` to a new html file, the context will be lost. This can be fixed by adding the following imports to the `<head>` section of any new page you navigate to:
```html
<head>
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
</head>
```
Source: https://github.com/wailsapp/wails/discussions/1512
## I get `too many open files` errors on my Mac when I run `wails dev`
By default, macOS will only allow you to open a maximum of 256 files. This can affect the `wails dev` command. This limit can be increased by running: `ulimit -n 1024` in the terminal.
FSNotify is [looking to move to Apple's fsevents](https://github.com/fsnotify/fsnotify/issues/11) for Mac. If this isn't completed soon, we will create our own implementation, tracked [here](https://github.com/wailsapp/wails/issues/1733).
## My Mac app gives me weird compilation errors
A few users have reported seeing compilation errors such as the following:
```shell
# github.com/wailsapp/wails/v2/internal/frontend/desktop/darwin
In file included from ../../pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.44.2/internal/frontend/desktop/darwin/callbacks.go:9:
In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:12:
/Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:91:143: error: function does not return NSString
- (NSAttributedString *)localizedAttributedStringForKey:(NSString *)key value:(nullable NSString *)value table:(nullable NSString *)tableName NS_FORMAT_ARGUMENT(1) NS_REFINED_FOR_SWIFT API_AVAILABLE(macos(12.0), ios(15.0), watchos(8.0), tvos(15.0));
~~~~~~~~~~~~~~ ^ ~
/Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSObjCRuntime.h:103:48: note: expanded from macro 'NS_FORMAT_ARGUMENT'
#define NS_FORMAT_ARGUMENT(A) __attribute__ ((format_arg(A)))
```
This is _normally_ due to a mismatch with the OS version you are running and the version of the XCode Command Line Tools installed. If you see an error like this, try upgrading your XCode Command Line Tools to the latest version.
Source: https://github.com/wailsapp/wails/issues/1806

View File

@ -0,0 +1,82 @@
# Visual Studio Code
This page is for miscellaneous tips and tricks when using Visual Studio Code with Wails.
## Vetur Configuration
Many thanks to [@Lyimmi](https://github.com/Lyimmi) for this tip. Originally posted [here](https://github.com/wailsapp/wails/issues/1791#issuecomment-1228158349).
Vetur is a popular plugin for Visual Studio Code that provides syntax highlighting and code completion for Vue projects. When loading a Wails project in VSCode, Vetur will throw an error as it is expecting to find the frontend project in the root directory. To fix this, you can do the following:
Create a file named `vetur.config.js` in the project's root.
```javascript
// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
// **optional** default: `{}`
// override vscode settings
// Notice: It only affects the settings used by Vetur.
settings: {
"vetur.useWorkspaceDependencies": true,
"vetur.experimental.templateInterpolationService": true
},
// **optional** default: `[{ root: './' }]`
// support monorepos
projects: [
{
// **required**
// Where is your project?
// It is relative to `vetur.config.js`.
// root: './packages/repo1',
root: './frontend',
// **optional** default: `'package.json'`
// Where is `package.json` in the project?
// We use it to determine the version of vue.
// It is relative to root property.
package: './package.json',
// **optional**
// Where is TypeScript config file in the project?
// It is relative to root property.
tsconfig: './tsconfig.json',
// **optional** default: `'./.vscode/vetur/snippets'`
// Where is vetur custom snippets folders?
snippetFolder: './.vscode/vetur/snippets',
// **optional** default: `[]`
// Register globally Vue component glob.
// If you set it, you can get completion by that components.
// It is relative to root property.
// Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
globalComponents: [
'./src/components/**/*.vue'
]
}
]
}
```
Next, configure `frontend/tsconfig.json`:
```javascript
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"outFile": "../../built/local/tsc.js",
"allowJs": true
},
"exclude": [
"node_modules",
"**/*.spec.ts"
],
"include": [
"src/**/*",
"wailsjs/**/*.ts"
]
}
```
This should enable you to now use Vetur as expected.

View File

@ -0,0 +1,58 @@
# NSIS installer
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={require("@site/static/img/nsis.webp").default}
style={{ "max-width": "50%" }}
/>
<br />
</p>
```
Wails supports generating Windows installers using the [NSIS installer](https://nsis.sourceforge.io/).
## Installing NSIS
### Windows
The installer is available on the [NSIS Download](https://nsis.sourceforge.io/Download) page.
If you use the chocolatey package manager, run the following script:
```
choco install nsis
```
If you install NSIS manually, you need to add the _Bin_ folder, which contains `makensis.exe`, in your NSIS installation to your path. [Here](https://www.architectryan.com/2018/03/17/add-to-the-path-on-windows-10/) is a good tutorial on how to add to path on Windows.
### Linux
The `nsis` package should be available through your distribution's package manager.
### MacOS
NSIS is available to install through homebrew: `brew install nsis`.
## Generating the installer
When a new project is created, Wails generates the NSIS configuration files in `build/windows/installer`. The config data is read from `installer/info.json` and that is configured to use the project's `wails.json` Info section:
```json
// ...
"Info": {
"companyName": "My Company Name",
"productName": "Wails Vite",
"productVersion": "1.0.0",
"copyright": "Copyright.........",
"comments": "Built using Wails (https://wails.io)"
},
```
To generate an installer for your application, use the `-nsis` flag with `wails build`:
```
wails build -nsis
```
The installer will now be available in the `build/bin` directory.

View File

@ -0,0 +1,61 @@
# 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.
## Fixed version runtime
Another way of dealing with webview2 dependency is shipping it yourself. You can download [fixed version runtime](https://developer.microsoft.com/microsoft-edge/webview2/#download-section) and bundle or download it with your application.
Also, you should specify path to fixed version of webview2 runtime in the `windows.Options` structure when launching wails.
```go
wails.Run(&options.App{
Windows: &windows.Options{
WebviewBrowserPath: "",
},
})
```
Note: When `WebviewBrowserPath` is specified, `error` strategy will be forced in case of minimal required version mismatch or invalid path to a runtime.
## Spawning other programs
When spawning other programs, such as scripts, you will see the window appear on the screen. To hide the window, you can use the following code:
```go
cmd := exec.Command("your_script.exe")
cmd.SysProcAttr = &syscall.SysProcAttr{
HideWindow: true,
CreationFlags: 0x08000000,
}
cmd.Start()
```
Solution provided by [sithembiso](https://github.com/sithembiso) on the [discussions board](https://github.com/wailsapp/wails/discussions/1734#discussioncomment-3386172).

View File

@ -0,0 +1,365 @@
---
sidebar_position: 20
---
# どうやって動いているの?
Wailsは、webkitフロントエンドを備えた、何の変哲もないGoアプリです。 アプリ全体のうちGoの部分は、アプリのコードと、ウィンドウ制御などの便利な機能を提供するランタイムライブラリで構成されています。 フロントエンドはwebkitウィンドウであり、フロンドエンドアセットをウィンドウ上に表示します。 フロントエンドからも、Javascriptでランタイムライブラリを呼び出すことができます。 そして最終的に、Goのメソッドはフロントエンドにバインドされ、ローカルのJavascriptメソッドであるかのように、フロントエンドから呼び出すことができます。
```mdx-code-block
<div className="text--center">
<img src={require("@site/static/img/architecture.webp").default} style={{"width":"75%", "max-width":"800px"}} />
</div>
```
## アプリのメインコード
### Overview
アプリは、`wails.Run()`メソッドを1回呼び出すことで、構成することができます。 このメソッドで、アプリのウィンドウサイズやウィンドウタイトル、使用アセットなどを指定することができます。 基本的なアプリを作るコードは次のとおりです:
```go title="main.go"
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed all: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` - フロントエンドにバインドさせたい構造体インスタンスのスライス
設定可能なすべてのオプションについては、[オプションのリファレンス](reference/options)をご覧ください。
#### Assets
Wailsでフロントエンドアセット無しのアプリを作成することはできないため、`Assets`オプションは必須オプションです。 アセットには、一般的なWebアプリケーションでよく見かけるような、html、js、css、svg、pngなどのファイルを含めることができます。**アセットバンドルを生成する必要は一切なく**、そのままのファイルを使用できます。 アプリが起動すると、アセット内の`index.html`が読み込まれます。この時点で、フロントエンドはブラウザとして動作するようになります。 `embed.FS`を使ってアセットファイルが格納されたディレクトリを指定しますが、ディレクトリの場所はどこでも構いません。 embedで指定するパスは、`frontend/dist`のように、アプリのメインコードから相対的に見たディレクトリパスになります:
```go title="main.go"
//go:embed all:frontend/dist
var assets embed.FS
```
起動時に、Wailsは`index.html`が含まれるディレクトリを再帰的に探します。 他のすべてのアセットは、当該ディレクトリから相対的に読み込まれます。
本番用のバイナリファイルには、`embed.FS`で指定されたアセットファイルが含まれるため、アプリ配布時に、バイナリファイルとは別にアセットファイルを付加させる必要はありません。
`wails dev`コマンドを使って開発モードでアプリを起動した場合、アセットはディスクから読み込まれ、アセットファイルが更新されると、自動的にアプリがライブリロードされます。 アセットの場所は、`embed.FS`での指定値から推定されます。
詳細は、[アプリ開発ガイド](guides/application-development.mdx)をご覧ください。
#### アプリのライフサイクル
フロントエンドが`index.html`を読み込もうとする直前に、[OnStartup](reference/options.mdx#onstartup)で指定されたメソッドがコールバックされます。 A standard Go context is passed to this method. このメソッドに引数で渡されるContextは、今後、Wailsのラインタイムを呼び出すときに必要になるため、通常は、このContextへの参照を保持しておいてください。 同様に、アプリがシャットダウンされる直前には、[OnShutdown](reference/options.mdx#onshutdown)で指定されたコールバックが呼び出され、Contextも渡されます。 `index.html`に含まれるすべてのアセットが読み込み終わったときに呼び出される[OnDomReady](reference/options.mdx#ondomready)コールバックもあります。これは、Javascriptの[`body onload`](https://www.w3schools.com/jsref/event_onload.asp)イベントと同等のものです。 また、[OnBeforeClose](reference/options.mdx#onbeforeclose)を指定すると、ウィンドウを閉じる(またはアプリを終了する)イベントにフックさせることもできます。
#### メソッドのバインド
`Bind`オプションは、Wailsアプリで最も重要なオプションの1つです。 このオプションでは、フロントエンドに公開する、構造体のメソッドを指定することができます。 構造体は、従来のWebアプリにおける"コントローラ"の立ち位置であるとお考えください。 アプリが起動すると、`Bind`オプションで指定されている構造体を対象に、その中にあるパブリックメソッド(大文字で始まるメソッド名)を探します。そして、フロントエンドのコードからそれらのメソッドを呼び出せるJavascriptが生成されます。
:::info 備考
Wailsで構造体を正しくバインドするためには、構造体の*インスタンス*をオプションで指定してください。
:::
下記のコードでは、新しく`App`インスタンスを作成し、`wails.Run`関数の`Bind`オプションの中で、そのインスタンスを追加しています:
```go {16,24} title="main.go"
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
app := &App{}
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
Assets: &assets,
Bind: []interface{}{
app,
},
})
if err != nil {
log.Fatal(err)
}
}
type App struct {
ctx context.Context
}
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s!", name)
}
```
構造体は、好きな数だけバインドできます。 `Bind`には、構造体のインスタンスを渡すようにしてください:
```go {8-10}
//...
err := wails.Run(&options.App{
Title: "Basic Demo",
Width: 1024,
Height: 768,
Assets: &assets,
Bind: []interface{}{
app,
&mystruct1{},
&mystruct2{},
},
})
```
`wails dev`コマンド(または、`wails generate module`コマンド)を実行すると、以下のものを含むフロントエンドモジュールが生成されます:
- バインドされたすべてのメソッドのJavascript
- バインドされたすべてのメソッドのTypescript宣言
- バインドされたメソッドの引数または返り値で使用されているGoの構造体のTypescript宣言
これにより、強力な型付けがなされたデータ構造を使用して、フロントエンドから簡単にGoのコードを呼び出すことができます。
## フロントエンド
### Overview
フロントエンドは、webkitによってレンダリングされるファイル群です。 ブラウザとWebサーバが一体となったような動きをします。 使用できるフレームワークやライブラリの制限はほぼありません[^1]。 フロントエンドとGoコードとの相互のやり取りについて、主なポイントは次のとおりです:
- バインドされたGoメソッドの呼び出し
- ランタイムメソッドの呼び出し
### バインドされたGoメソッドの呼び出し
`wails dev`コマンドでアプリを起動すると、Go構造体のJavascriptバインディングが`wailsjs/go`ディレクトリに自動的に生成されます(`wails generate module`コマンドでも生成可能)。 生成されたファイルには、アプリ内のGoパッケージ名が反映されています。 先の例では、`Greet`というパブリックメソッドを持つ`app`をバインドしていました。 この場合、次のようなファイルが生成されることになります:
```bash
wailsjs
└─go
└─main
├─App.d.ts
└─App.js
```
ご覧のとおり、`main`パッケージ内の`App`構造体Javascriptバインディングが、それらのメソッドのTypescript型定義と並んで生成されていることが分かります。 フロントエンドから`Greet`メソッドを呼び出すには、単純にメソッドをインポートし、通常のJavascript関数と同じように呼び出してください:
```javascript
// ...
import {Greet} from '../wailsjs/go/main/App'
function doGreeting(name) {
Greet(name).then((result) => {
// resultを使って何かする
})
}
```
Typescript型定義ファイルは、バインドされたメソッドの正しい型を提供します:
```ts
export function Greet(arg1:string):Promise<string>;
```
生成されたメソッドはPromiseを返すようになっています。 呼び出しが成功すると、Goからの1番目の返り値が`resolve`ハンドラに渡されます。 呼び出しに失敗したとみなされるのは、Goメソッドの2番目の返り値がerror型で、それがerrorインスタンスを返したときです。 これは、`reject`ハンドラを介して返されます。 先の例では、`Greet`メソッドは`string`型の返り値のみであるため、無効なデータが渡されない限り、Javascript側でrejectハンドラが呼ばれることはありません。
すべてのデータ型は、GoとJavascriptの間で正しく解釈されます。 もちろん構造体も正しく解釈されます。 Goから構造体が返された場合、フロントエンドにはJavascriptのクラスとして返されます。
:::info 備考
Struct fields *must* have a valid `json` tag to be included in the generated Typescript.
Anonymous nested structs are not supported at this time.
:::
Goに対して引数として構造体を渡すこともできます。 構造体として取り扱ってほしいJavascriptのマップやクラスを渡すと、構造体に変換されます。 あなたが簡単にこれらのことを把握できるように、`dev`モードでは、バウンドされたGoメソッドで使用されている全構造体の型が定義された、Typescriptモジュールが生成されます。 このモジュールを使用すると、Javascriptネイティブなオブジェクトを構築し、Goコードへ送信することができます。
There is also support for Go methods that use structs in their signature. バインドされたメソッドで、引数または返り値として指定されているすべてのGo構造体は、Goのコードラッパーモジュールの一部として生成されたTypescript定義を持っています。 これらを使用することで、GoとJavascriptの間で、同じデータモデルを共有できます。
例: `Greet`メソッドを更新して、文字列型の代わりに`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)
}
```
`wailsjs/go/main/App.js`ファイルには、次のコードが出力されます:
```js title="App.js"
export function Greet(arg1) {
return window['go']['main']['App']['Greet'](arg1);
}
```
しかし、`wailsjs/go/main/App.d.ts`ファイルは次のコードが出力されます:
```ts title="App.d.ts"
import { main } from "../models";
export function Greet(arg1: main.Person): Promise<string>;
```
見ると分かるように、"main"名前空間は、新しく生成された"models.ts"ファイルからインポートされています。 このファイルには、バインドされたメソッドで使用されるすべての構造体の型定義が含まれています。 この例では、`Person`構造体の型定義が含まれています。 `models.ts`を確認すれば、モデルがどのように定義されているかが分かります。
```ts title="models.ts"
export namespace main {
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 { Greet } from "../wailsjs/go/main/App";
import { main } from "../wailsjs/go/models";
function generate() {
let person = new main.Person();
person.name = "Peter";
person.age = 27;
Greet(person).then((result) => {
console.log(result);
});
}
```
生成されたバインディングとTypescriptモデルの組み合わせによって、強力な開発環境を実現させています。
バインディングの詳細については、[アプリ開発ガイド](guides/application-development.mdx)の[バインディングメソッド](guides/application-development.mdx#binding-methods)をご覧ください。
### ランタイムメソッドの呼び出し
Javascriptランタイムは`window.runtime`に存在し、イベント発行やロギングなど、さまざまなタスクを実行するためのメソッドが含まれています:
```js title="mycode.js"
window.runtime.EventsEmit("my-event", 1);
```
Javascriptランタイムの詳細については、[ランタイムリファレンス](reference/runtime/intro)をご覧ください。
[^1]: まれに、WebViewでサポートされていない機能を使用するライブラリがあります。 ほとんどの場合、それらは代替手段や回避方法がありますので、それらを検討してください。

View File

@ -0,0 +1,75 @@
---
sidebar_position: 1
---
# イントロダクション
Wailsは、Go言語とWeb技術を使用して、デスクトップアプリの構築を可能にするプロジェクトです。
"Goの力によって、Electronが軽量かつ高速になったようなもの"、と考えるとよいでしょう。 Goの柔軟性とパワーに、リッチでモダンなフロントエンドを組み合わせたアプリを、簡単に構築することができます。
### Features
- Native Menus, Dialogs, Theming and Translucency
- Windows, macOS and linux support
- Built in templates for Svelte, React, Preact, Vue, Lit and Vanilla JS
- Easily call Go methods from Javascript
- Automatic Go struct to Typescript model generation
- No CGO or external DLLs required on Windows
- [Vite](https://vitejs.dev/)の力を利用したライブ開発が可能です
- Powerful CLI to easily Create, Build and Package applications
- 豊富な[ランタイムライブラリ](/docs/reference/runtime/intro)を用意しています
- Wailsで構築されたアプリケーションは、Apple StoreおよびMicrosoft Storeに準拠しています
例えば [varly](https://varly.app) は、Wailsで構築されたMacOS・Windows向けのデスクトップアプリです。 見栄えが良いだけではなく、ネイティブメニューや半透明効果を使用しています。これらは、モダンなネイティブアプリに期待されるものです。
```mdx-code-block
<p class="text--center">
<a href="https://varly.app/">
<img
src={require("@site/static/img/showcase/varly2.webp").default}
style={{ width: "75%", "max-width": "800px" }}
/>
</a>
</p>
```
### クイックスタートテンプレート
Wailsには、アプリの開発をすばやく始められるように、多数のテンプレートが用意されています。 Svelte、React、Vue、Preact、LitおよびVanilla用で、それぞれのテンプレートがあります。 各テンプレートには、Javascript版とTypescript版が用意されています。
### ネイティブ要素
Wailsは、ウィンドウ、メニュー、ダイアログなどのネイティブ要素を処理する専用ライブラリを使用するため、見栄えが良く、リッチな機能を備えたデスクトップアプリを構築できます。
**ブラウザを埋め込まないため**、無駄なリソースを割きません。 ブラウザを埋め込まない代わりに、OSプラットフォームのネイティブなレンダリングエンジンを使用します。 例えばWindowsの場合、Chromium上でビルトされているMicrosoft Webview2ライブラリを使用します。
### GoとJavascriptのやり取り
Wailsは自動的に、GoのメソッドをJavascriptから利用できるようにするので、フロントエンドからGoのメソッド名を呼び出すことができます。 It even generates Typescript models for the structs used by your Go methods, so you can pass the same data structures between Go and Javascript.
### ランタイムライブラリ
WailsはGoとJavascriptの両方にランタイムライブラリを提供し、イベント、ロギング、ダイアログなど、モダンなアプリに必要な多くの機能を使うことができます。
### ライブ開発
#### 自動リビルド
アプリを"dev"モードで起動すると、Wailsはあなたが書いたコードをネイティブデスクトップアプリとしてビルドしますが、プログラムアセットは常にディスクから読み込む状態になります。 その仕組みにより、アプリ起動中にGoコードが書き換えられると、変更を検出して自動的にアプリがリビルドされ、再起動します。
#### 自動リロード
フロントエンドアセットの変更が検出された場合、起動中のアプリは自動的にリロードされ、変更がすぐに反映されます。
#### ブラウザを使った開発
If you prefer to debug and develop in a browser then Wails has you covered. ブラウザでのデバッグや開発も、Wailsにお任せください。 起動中のアプリはWebサーバを兼ねており、お好きなブラウザから接続してアプリを操作することができます。 プログラムアセットが書き換わった時はすぐに更新されます。
### 本番用のネイティブバイナリ
アプリを本番用にビルドする準備ができたら、CLIが、アプリを単一の実行可能ファイルへコンパイルし、すべてのアセットをバンドルしてくれます。 WindowsおよびMacOSでは、配布用のネイティブパッケージを作成できます。 パッケージ化に必要なアイコン、info.plist、マニフェストファイルなどは、プロジェクトの一部としてカスタマイズできるため、アプリのビルド方法をフルコントロールできます。
### ツール
Wails CLIを使うことで、簡単にアプリを生成、ビルド、バンドルすることができます。 アイコンの作成、最適なコンパイル構成の設定、本番向けのバイナリ配布など、面倒なことをあなたの代わりに引き受けてくれます。 多数のテンプレートの中から、あなたに合ったものを選んで、すぐに開発を始めましょう!

View File

@ -0,0 +1,229 @@
---
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 |
| -ide | Generate IDE project files | |
| -f | Force build application | false |
例: `wails init -n test -d mytestproject -g -ide 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](../guides/ides.mdx).
### Remote Templates
Remote templates (hosted on GitHub) are supported and can be installed by using the template's project URL.
例: `wails init -n test -t https://github.com/leaanthony/testtemplate[@v1.0.0]`
A list of community maintained templates can be found [here](../community/templates.mdx)
:::warning 注意
**Wailsプロジェクトでは、サードパーティ製テンプレートのメンテナンスは行っておらず、責任も負いません!**
テンプレートについてよく分からない場合は、`package.json`および`wails.json`を確認し、どのようなスクリプトが実行されるのかや、どのようなパッケージがインストールされるのかを調べてください。
:::
## build
`wails build` is used for compiling your project to a production-ready binary.
| Flag | Description | Default |
|:-------------------- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:--------------------------------------------------------------------------------------------------------------------------------------------------- |
| -platform | Build for the given (comma delimited) [platforms](../reference/cli.mdx#platforms) eg. `windows/arm64`. Note, if you do not give the architecture, `runtime.GOARCH` is used. | platform = `GOOS` environment variable if given else `runtime.GOOS`.<br/>arch = `GOARCH` envrionment variable if given else `runtime.GOARCH`. |
| -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 | false |
| -f | Force build application | false |
| -tags "extra tags" | Goコンパイラに渡すビルドタグ。 値は引用符で囲んでください。 また、スペースまたはカンマで区切ってください(両方は使用しないでください)。 | |
| -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 |
| -u | Updates your project's `go.mod` to use the same version of Wails as the CLI | |
| -debug | Retains debug information in the application. Allows the use of the devtools in the application window | false |
| -trimpath | Remove all file system paths from the resulting executable. | false |
| -race | Build with Go's race detector | false |
| -windowsconsole | Keep the console window for Windows builds | |
| -obfuscate | [garble](https://github.com/burrowers/garble)を使用してアプリケーションを難読化する | false |
| -garbleargs | garbleへ渡す引数 | `-literals -tiny -seed=random` |
For a detailed description of the `webview2` flag, please refer to the [Windows](../guides/windows.mdx) Guide.
If you prefer to build using standard Go tooling, please consult the [Manual Builds](../guides/manual-builds.mdx) guide.
Example:
`wails build -clean -o myproject.exe`
:::info UPX on Apple Silicon
There are [issues](https://github.com/upx/upx/issues/446) with using UPX with Apple Silicon.
:::
:::info UPX on Windows
Some Antivirus vendors false positively mark `upx` compressed binaries as virus, see [issue](https://github.com/upx/upx/issues/437).
:::
### Platforms
Supported platforms are:
| Platform | Description |
|:---------------- |:--------------------------------------------- |
| darwin | MacOS + architecture of build machine |
| darwin/amd64 | MacOS 10.13+ AMD64 |
| darwin/arm64 | MacOS 11.0+ ARM64 |
| darwin/universal | MacOS AMD64+ARM64 universal application |
| windows | Windows 10/11 + architecture of build machine |
| windows/amd64 | Windows 10/11 AMD64 |
| windows/arm64 | Windows 10/11 ARM64 |
| linux | Linux + architecture of build machine |
| linux/amd64 | Linux AMD64 |
| linux/arm64 | Linux ARM64 |
## 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.18
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's `go.mod` will be updated to use the same version of Wails as the CLI
- 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" | Serve assets from the given directory instead of using the provided asset FS | 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 |
| -reloaddirs | Additional directories to trigger reloads (comma separated) | Value in `wails.json` |
| -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 | デバッグ |
| -noreload | Disable automatic reload when assets change | |
| -nogen | Disable generate module | |
| -v | Verbosity level (0 - silent, 1 - standard, 2 - verbose) | 1 |
| -wailsjsdir | The directory to generate the generated Wails JS modules | Value in `wails.json` |
| -debounce | The time to wait for reload after an asset change is detected | 100 (milliseconds) |
| -devserver "host:port" | The address to bind the wails dev server to | "localhost:34115" |
| -frontenddevserverurl "url" | Use 3rd party dev server url to serve assets, EG Vite | "" |
| -appargs "args" | Arguments passed to the application in shell style | |
| -save | Saves the given `assetdir`, `reloaddirs`, `wailsjsdir`, `debounce`, `devserver` and `frontenddevserverurl` flags in `wails.json` to become the defaults for subsequent invocations. | |
| -race | Build with Go's race detector | false |
| -s | Skip building the frontend | false |
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](../guides/manual-builds.mdx)
- 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](../guides/application-development.mdx#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](../guides/templates.mdx).
### module
The `wails generate module` command allows you to manually generate the `wailsjs` directory for your application.
## 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.

View File

@ -0,0 +1,229 @@
---
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 setting it in the [`Menu`](../reference/options.mdx#menu) application config, or by calling the runtime method [MenuSetApplicationMenu](../reference/runtime/menu.mdx#menusetapplicationmenu).
An example of how to create a menu:
```go
AppMenu := menu.NewMenu()
FileMenu := AppMenu.AddSubmenu("File")
FileMenu.AddText("&Open", keys.CmdOrCtrl("o"), openFile)
FileMenu.AddSeparator()
FileMenu.AddText("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
runtime.Quit()
})
if runtime.GOOS == "darwin" {
AppMenu.Append(menu.EditMenu()) // on macos platform, we should append EditMenu to enable Cmd+C,Cmd+V,Cmd+Z... shortcut
}
err := wails.Run(&options.App{
Title: "Menus Demo",
Width: 800,
Height: 600,
Menu: AppMenu,
Bind: []interface{}{
app,
},
)
// ...
```
Menu構造体を更新し、[MenuUpdateApplicationMenu](../reference/runtime/menu.mdx#menuupdateapplicationmenu)メソッドを呼び出すことで、メニューを動的に更新することも可能です。
The example above uses helper methods, however it's possible to build the menu structs manually.
## Menu
Menuは、MenuItemのコレクションです。
```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 |
| Role | string | Defines a [role](#role) for this menu item. Mac only for now. |
### 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` | `f1` | `f16` | `f31` |
| `tab` | `f2` | `f17` | `f32` |
| `return` | `f3` | `f18` | `f33` |
| `enter` | `f4` | `f19` | `f34` |
| `escape` | `f5` | `f20` | `f35` |
| `left` | `f6` | `f21` | `numlock` |
| `right` | `f7` | `f22` | |
| `up` | `f8` | `f23` | |
| `down` | `f9` | `f24` | |
| `space` | `f10` | `f25` | |
| `delete` | `f11` | `f36` | |
| `home` | `f12` | `f37` | |
| `end` | `f13` | `f38` | |
| `page up` | `f14` | `f39` | |
| `page down` | `f15` | `f30` | |
Wails also supports parsing accelerators using the same syntax as Electron. This is useful for storing accelerators in config files.
例:
```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) *Menu
```
You can also create menu items directly on a menu by using the "Add" helpers:
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
func (m *Menu) AddText(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
func (m *Menu) AddSeparator() *MenuItem
func (m *Menu) AddRadio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func (m *Menu) AddCheckbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
func (m *Menu) AddSubMenu(label string, menu *Menu) *MenuI
```
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.
### Role
:::info Roles
Roles are currently supported on Mac only.
:::
A menu item may have a role, which is essentially a pre-defined menu item. We currently support the following roles:
| ロール | Description |
| ------------ | ------------------------------------------------------------------------ |
| AppMenuRole | The standard Mac application menu. Can be created using `menu.AppMenu()` |
| EditMenuRole | The standard Mac edit menu. Can be created using `menu.EditMenu()` |

View File

@ -0,0 +1,673 @@
---
sidebar_position: 3
---
# オプション
## 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,
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 255},
AlwaysOnTop: false,
Assets: assets,
AssetsHandler: assetsHandler,
Menu: app.applicationMenu(),
Logger: nil,
LogLevel: logger.DEBUG,
LogLevelProduction: logger.ERROR,
OnStartup: app.startup,
OnDomReady: app.domready,
OnShutdown: app.shutdown,
OnBeforeClose: app.beforeClose,
WindowStartState: options.Maximised,
CSSDragProperty: "--wails-draggable",
CSSDragValue: "drag",
Bind: []interface{}{
app,
},
Windows: &windows.Options{
WebviewIsTransparent: false,
WindowIsTranslucent: false,
BackdropType: windows.Mica,
DisableWindowIcon: false,
DisableFramelessWindowDecorations: false,
WebviewUserDataPath: "",
WebviewBrowserPath: "",
Theme: windows.SystemDefault,
CustomTheme: &windows.ThemeSettings{
DarkModeTitleBar: windows.RGB(20, 20, 20),
DarkModeTitleText: windows.RGB(200, 200, 200),
DarkModeBorder: windows.RGB(20, 0, 20),
LightModeTitleBar: windows.RGB(200, 200, 200),
LightModeTitleText: windows.RGB(20, 20, 20),
LightModeBorder: windows.RGB(200, 200, 200),
},
// User messages that can be customised
Messages *windows.Messages
// OnSuspend is called when Windows enters low power mode
OnSuspend func()
// OnResume is called when Windows resumes from low power mode
OnResume func()
},
Mac: &mac.Options{
TitleBar: &mac.TitleBar{
TitlebarAppearsTransparent: true,
HideTitle: false,
HideTitleBar: false,
FullSizeContent: false,
UseToolbar: false,
HideToolbarSeparator: true,
},
Appearance: mac.NSAppearanceNameDarkAqua,
WebviewIsTransparent: true,
WindowIsTranslucent: false,
About: &mac.AboutInfo{
Title: "My Application",
Message: "© 2021 Me",
Icon: icon,
},
},
Linux: &linux.Options{
Icon: icon,
WindowIsTranslucent: false,
},
})
if err != nil {
log.Fatal(err)
}
}
```
### Title
The text shown in the window's title bar.
名前: Title<br/> データ型: `string`
### Width
The initial width of the window.
名前: Width<br/> データ型: `int`<br/> デフォルト値: 1024
### Height
The initial height of the window.
名前: Height<br/> データ型: `int`<br/> デフォルト値: 768
### DisableResize
By default, the main window is resizable. Setting this to `true` will keep it a fixed size.
名前: DisableResize<br/> データ型: `bool`
### Fullscreen
Setting this to `true` will make the window fullscreen at startup.
名前: Fullscreen<br/> データ型: `bool`
### Frameless
When set to `true`, the window will have no borders or title bar. Also see [Frameless Windows](../guides/frameless.mdx).
名前: Frameless<br/> データ型: `bool`
### MinWidth
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.
名前: MinWidth<br/> データ型: `int`
### MinHeight
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.
名前: MinHeight<br/> データ型: `int`
### MaxWidth
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.
名前: MaxWidth<br/> データ型: `int`
### MaxHeight
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.
名前: MaxHeight<br/> データ型: `int`
### StartHidden
When set to `true`, the application will be hidden until [WindowShow](../reference/runtime/window.mdx#windowshow) is called.
名前: StartHidden<br/> データ型: `bool`
### HideWindowOnClose
By default, closing the window will close the application. この設定を`true`にすると、ウィンドウを閉じる操作をした際に、
ウィンドウが非表示の状態になります。
名前: HideWindowOnClose<br/> データ型: `bool`
### BackgroundColour
This value is the default background colour of the window. 例: options.NewRGBA(255,0,0,128) - 50%透過された赤色
名前: BackgroundColour<br/> データ型: `*options.RGBA`<br/> デフォルト値: white
### AlwaysOnTop
Indicates that the window should stay above other windows when losing focus.
名前: AlwaysOnTop<br/> データ型: `bool`
### Assets
The frontend assets to be used by the application. Requires an `index.html` file.
名前: Assets<br/> データ型: `embed.FS`
### AssetsHandler
<img src="http://badges.github.io/stability-badges/dist/experimental.svg" />
The assets handler is a generic `http.Handler` which will be called for any non GET request on the assets server and for GET requests which can not be served from the `assets` because the file is not found.
| 値 | Win | Mac | Lin |
| ----------------------- | --- | --- | --- |
| GET | ✅ | ✅ | ✅ |
| POST | ✅ | ✅ | ❌ |
| PUT | ✅ | ✅ | ❌ |
| PATCH | ✅ | ✅ | ❌ |
| DELETE | ✅ | ✅ | ❌ |
| Request Headers | ✅ | ✅ | ❌ |
| Request Body | ✅ | ✅ | ❌ |
| Request Body Streaming | ❌ | ❌ | ❌ |
| Response StatusCodes | ✅ | ✅ | ❌ |
| Response Headers | ✅ | ✅ | ❌ |
| Response Body | ✅ | ✅ | ✅ |
| Response Body Streaming | ❌ | ❌ | ✅ |
NOTE: Linux is currently very limited due to targeting a WebKit2GTK Version < 2.36.0. In the future some features will be supported by the introduction of WebKit2GTK 2.36.0+ support.
NOTE: When used in combination with a Frontend DevServer there might be limitations, eg. Vite serves the index.html on every path, that does not contain a file extension.
名前: AssetsHandler<br/> データ型: `http.Handler`
### Menu
The menu to be used by the application. More details about Menus in the [Menu Reference](../reference/runtime/menu.mdx).
:::note
Macでは、メニューが指定されていない場合、デフォルトメニューが作成されます。
:::
名前: Menu<br/> データ型: `*menu.Menu`
### Logger
The logger to be used by the application. More details about logging in the [Log Reference](../reference/runtime/log.mdx).
名前: Logger<br/> データ型: `logger.Logger`<br/> デフォルト値: 標準出力へのロガー
### LogLevel
The default log level. More details about logging in the [Log Reference](../reference/runtime/log.mdx).
名前: LogLevel<br/> データ型: `logger.LogLevel`<br/> デフォルト値: 開発モードの場合は`Info`、本番モードの場合は`Error`
### LogLevelProduction
The default log level for production builds. More details about logging in the [Log Reference](../reference/runtime/log.mdx).
名前: LogLevelProduction<br/> データ型: `logger.LogLevel`<br/> デフォルト値: `Error`
### OnStartup
This callback is called after the frontend has been created, but before `index.html` has been loaded. It is given the application context.
名前: OnStartup<br/> データ型: `func(ctx context.Context)`
### OnDomReady
This callback is called after the frontend has loaded `index.html` and its resources. It is given the application context.
名前: OnDomReady<br/> データ型: `func(ctx context.Context)`
### OnShutdown
This callback is called after the frontend has been destroyed, just before the application terminates. It is given the application context.
名前: OnShutdown<br/> データ型: `func(ctx context.Context)`
### OnBeforeClose
If this callback is set, it will be called when the application is about to quit, either by clicking the window close button or calling `runtime.Quit`. Returning true will cause the application to continue, false will continue shutdown as normal. This is good for confirming with the user that they wish to exit the program.
Example:
```go title=windowsapp.go
func (b *App) beforeClose(ctx context.Context) (prevent bool) {
dialog, err := runtime.MessageDialog(ctx, runtime.MessageDialogOptions{
Type: runtime.QuestionDialog,
Title: "Quit?",
Message: "Are you sure you want to quit?",
})
if err != nil {
return false
}
return dialog != "Yes"
}
```
名前: OnBeforeClose<br/> データ型: `func(ctx context.Context) bool`
### WindowStartState
Defines how the window should present itself at startup.
| 値 | Win | Mac | Lin |
| ---------- | --- | --- | --- |
| Fullscreen | ✅ | ✅ | ✅ |
| Maximised | ✅ | ✅ | ✅ |
| Minimised | ✅ | ❌ | ✅ |
名前: WindowStartState<br/> データ型: `options.WindowStartState`
### CSSDragProperty
ウィンドウをドラッグできる要素を特定するためのCSSプロパティ名を設定します。 デフォルト値: `--wails-draggable`
名前: CSSDragProperty<br/> データ型: `string`
### CSSDragValue
Indicates what value the `CSSDragProperty` style should have to drag the window. デフォルト値: `drag`
名前: CSSDragValue<br/> データ型: `string`
### Bind
A slice of struct instances defining methods that need to be bound to the frontend.
名前: Bind<br/> データ型: `[]interface{}`
### Windows
[Windows固有のオプション](#windows)を定義します。
名前: Windows<br/> データ型: `*windows.Options`
#### WebviewIsTransparent
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)` for `background-color` in your CSS, the host window will show through. Often combined with [WindowIsTranslucent](#WindowIsTranslucent) to make frosty-looking applications.
名前: WebviewIsTransparent<br/> データ型: `bool`
#### WindowIsTranslucent
Setting this to `true` will make the window background translucent. 多くの場合、[WebviewIsTransparent](#WebviewIsTransparent)と組み合わせて使用されます。
ビルド22621より前のWindows 11の場合、半透明を実現させるために[BlurBehind](https://learn.microsoft.com/ja-jp/windows/win32/dwm/blur-ovw)メソッドを使用するため、処理が遅くなる可能性があります。 ビルド22621以降のWindows 11では、より高速な、新しい半透明タイプが有効になります。 デフォルトで使用される半透明タイプは、Windowsにより決定されます。 このタイプを設定するには、[BackdropType](#BackdropType)オプションを使用してください。
名前: WindowIsTranslucent<br/> データ型: `bool`
#### BackdropType
:::note
この設定を適用するには、Windows 11 ビルド22621以降が必要です。
:::
ウィンドウの半透明タイプを設定します。 この設定は、[WindowIsTranslucent](#WindowIsTranslucent)が`true`に設定されている場合にのみ適用されます。
名前: BackdropType<br/> データ型: `windows.BackdropType`
値は次のいずれかを指定してください:
| 値 | Description |
| ------- | ----------------------------------------------------------------------------------- |
| Auto | Windowsに背景を決定させる |
| None | 半透明にしない |
| Acrylic | [アクリル](https://learn.microsoft.com/ja-jp/windows/apps/design/style/acrylic)の効果を使用する |
| Mica | [マイカ](https://learn.microsoft.com/ja-jp/windows/apps/design/style/mica)の効果を使用する |
| Tabbed | タブを使用する。 これはマイカに似ている背景です。 |
#### DisableWindowIcon
Setting this to `true` will remove the icon in the top left corner of the title bar.
名前: DisableWindowIcon<br/> データ型: `bool`
#### DisableFramelessWindowDecorations
Setting this to `true` will remove the window decorations in [Frameless](#Frameless) mode. This means there will be no 'Aero Shadow' and no 'Rounded Corners' shown for the window. Please note that 'Rounded Corners' are only supported on Windows 11.
名前: DisableFramelessWindowDecorations<br/> データ型: `bool`
#### WebviewUserDataPath
This defines the path where the WebView2 stores the user data. If empty `%APPDATA%\[BinaryName.exe]` will be used.
名前: WebviewUserDataPath<br/> データ型: `string`
#### WebviewBrowserPath
This defines the path to a directory with WebView2 executable files and libraries. If empty, webview2 installed in the system will be used.
Important information about distribution of fixed version runtime:
- [How to get and extract runtime](https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution#details-about-the-fixed-version-runtime-distribution-mode)
- [Known issues for fixed version](https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution#known-issues-for-fixed-version)
- [The path of fixed version of the WebView2 Runtime should not contain \Edge\Application\.](https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-1.0.1245.22#createcorewebview2environmentwithoptions)
名前: WebviewBrowserPath<br/> データ型: `string`
#### Theme
Minimum Windows Version: Windows 10 2004/20H1
This defines the theme that the application should use:
| 値 | Description |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| SystemDefault | _デフォルト値_です。 The theme will be based on the system default. If the user changes their theme, the application will update to use the new setting |
| Dark | The application will use a dark theme exclusively |
| Light | The application will use a light theme exclusively |
名前: Theme<br/> データ型: `windows.Theme`
#### CustomTheme
:::note
サポートされるWindowsの最小バージョン: Windows 10/11 2009/21H2 ビルド22000
:::
Allows you to specify custom colours for TitleBar, TitleText and Border for both light and dark mode, as well as when the window is active or inactive.
名前: CustomTheme<br/> データ型: `windows.CustomTheme`
##### CustomTheme 型
The CustomTheme struct uses `int32` to specify the colour values. These are in the standard(!) Windows format of: `0x00BBGGAA`. A helper function is provided to do RGB conversions into this format: `windows.RGB(r,g,b uint8)`.
NOTE: Any value not provided will default to black.
```go
type ThemeSettings struct {
DarkModeTitleBar int32
DarkModeTitleBarInactive int32
DarkModeTitleText int32
DarkModeTitleTextInactive int32
DarkModeBorder int32
DarkModeBorderInactive int32
LightModeTitleBar int32
LightModeTitleBarInactive int32
LightModeTitleText int32
LightModeTitleTextInactive int32
LightModeBorder int32
LightModeBorderInactive int32
}
```
Example:
```go
CustomTheme: &windows.ThemeSettings{
// Theme to use when window is active
DarkModeTitleBar: windows.RGB(255, 0, 0), // Red
DarkModeTitleText: windows.RGB(0, 255, 0), // Green
DarkModeBorder: windows.RGB(0, 0, 255), // Blue
LightModeTitleBar: windows.RGB(200, 200, 200),
LightModeTitleText: windows.RGB(20, 20, 20),
LightModeBorder: windows.RGB(200, 200, 200),
// Theme to use when window is inactive
DarkModeTitleBarInactive: windows.RGB(128, 0, 0),
DarkModeTitleTextInactive: windows.RGB(0, 128, 0),
DarkModeBorderInactive: windows.RGB(0, 0, 128),
LightModeTitleBarInactive: windows.RGB(100, 100, 100),
LightModeTitleTextInactive: windows.RGB(10, 10, 10),
LightModeBorderInactive: windows.RGB(100, 100, 100),
},
```
#### Messages
A struct of strings used by the webview2 installer if a valid webview2 runtime is not found.
名前: Messages<br/> データ型: `*windows.Messages`
Customise this for any language you choose to support.
#### ResizeDebounceMS
ResizeDebounceMS is the amount of time to debounce redraws of webview2 when resizing the window. The default value (0) will perform redraws as fast as it can.
名前: ResizeDebounceMS<br/> データ型: `uint16`
#### OnSuspend
Windowsがローパワーモード(サスペンド/休止状態) に切り替わると呼び出されるコールバックを設定します。
名前: OnSuspend<br/> データ型: `func()`
#### OnResume
Windowsがローパワーモード(サスペンド/休止状態) から復帰したときに呼び出されるコールバックを設定します。
名前: OnResume<br/> データ型: `func()`
### Mac
[Mac固有のオプション](#mac)を定義します。
名前: Mac<br/> データ定義: `*mac.Options`
#### TitleBar
The TitleBar struct provides the ability to configure the look and feel of the title bar.
名前: TitleBar<br/> データ型: [`*mac.TitleBar`](#titlebar-struct)
##### Titlebar struct
The titlebar of the application can be customised by using the TitleBar options:
```go
type TitleBar struct {
TitlebarAppearsTransparent bool
HideTitle bool
HideTitleBar bool
FullSizeContent bool
UseToolbar bool
HideToolbarSeparator bool
}
```
| Name | Description |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| TitlebarAppearsTransparent | Makes the titlebar transparent. This has the effect of hiding the titlebar and the content fill the window. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindow/1419167-titlebarappearstransparent?language=objc) |
| HideTitle | Hides the title of the window. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindowtitlevisibility?language=objc) |
| HideTitleBar | Removes [NSWindowStyleMaskTitled](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemasktitled/) from the style mask |
| FullSizeContent | Makes the webview fill the entire window. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemaskfullsizecontentview) |
| UseToolbar | Adds a default toolbar to the window. [Apple Docs](https://developer.apple.com/documentation/appkit/nstoolbar?language=objc) |
| HideToolbarSeparator | Removes the line beneath the toolbar. [Apple Docs](https://developer.apple.com/documentation/appkit/nstoolbar/1516954-showsbaselineseparator?language=objc) |
Preconfigured titlebar settings are available:
| Setting | Example |
| --------------------------- | ---------------------------------------------- |
| `mac.TitleBarDefault()` | ![](/img/reference/titlebar-default.webp) |
| `mac.TitleBarHidden()` | ![](/img/reference/titlebar-hidden.webp) |
| `mac.TitleBarHiddenInset()` | ![](/img/reference/titlebar-hidden-inset.webp) |
Example:
```go
Mac: &mac.Options{
TitleBar: mac.TitleBarHiddenInset(),
}
```
Click [here](https://github.com/lukakerr/NSWindowStyles) for some inspiration on customising the titlebar.
#### Appearance
Appearance is used to set the style of your app in accordance with Apple's [NSAppearance](https://developer.apple.com/documentation/appkit/nsappearancename?language=objc) names.
名前: Appearance<br/> データ型: [`mac.AppearanceType`](#appearance-type)
##### Appearance 型
You can specify the application's [appearance](https://developer.apple.com/documentation/appkit/nsappearance?language=objc).
| 値 | Description |
| ----------------------------------------------------- | --------------------------------------------------------------- |
| DefaultAppearance | DefaultAppearance uses the default system value |
| NSAppearanceNameAqua | The standard light system appearance |
| NSAppearanceNameDarkAqua | The standard dark system appearance |
| NSAppearanceNameVibrantLight | The light vibrant appearance |
| NSAppearanceNameAccessibilityHighContrastAqua | A high-contrast version of the standard light system appearance |
| NSAppearanceNameAccessibilityHighContrastDarkAqua | A high-contrast version of the standard dark system appearance |
| NSAppearanceNameAccessibilityHighContrastVibrantLight | A high-contrast version of the light vibrant appearance |
| NSAppearanceNameAccessibilityHighContrastVibrantDark | A high-contrast version of the dark vibrant appearance |
Example:
```go
Mac: &mac.Options{
Appearance: mac.NSAppearanceNameDarkAqua,
}
```
#### WebviewIsTransparent
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)` for `background-color` in your CSS, the host window will show through. Often combined with [WindowIsTranslucent](#WindowIsTranslucent) to make frosty-looking applications.
名前: WebviewIsTransparent<br/> データ型: `bool`
#### WindowIsTranslucent
Setting this to `true` will make the window background translucent. Often combined with [WebviewIsTransparent](#WebviewIsTransparent) to make frosty-looking applications.
名前: WindowIsTranslucent<br/> データ型: `bool`
#### About
This configuration lets you set the title, message and icon for the "About" menu item in the app menu created by the "AppMenu" role.
名前: About<br/> データ型: [`*mac.AboutInfo`](#about-struct)
##### About struct
```go
type AboutInfo struct {
Title string
Message string
Icon []byte
}
```
If these settings are provided, an "About" menu item will appear in the app menu (when using the `AppMenu` role). Given this configuration:
```go
//go:embed build/appicon.png
var icon []byte
func main() {
err := wails.Run(&options.App{
...
Mac: &mac.Options{
About: &mac.AboutInfo{
Title: "My Application",
Message: "© 2021 Me",
Icon: icon,
},
},
})
```
The "About" menu item will appear in the app menu:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/reference/about-menu.webp").default}
class="screenshot"
/>
</div>
<br />
```
When clicked, that will open an about message box:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/reference/about-dialog.webp").default}
width="40%"
class="screenshot"
/>
</div>
<br />
```
### Linux
[Linux固有のオプション](#linux)を定義します。
名前: Linux<br/> データ型: `*linux.Options`
#### Icon
Sets up the icon representing the window. This icon is used when the window is minimized (also known as iconified).
名前: Icon<br/> データ型: `[]byte`
Some window managers or desktop environments may also place it in the window frame, or display it in other contexts. On others, the icon is not used at all, so your mileage may vary.
NOTE: Gnome on Wayland at least does not display this icon. To have a application icon there, a `.desktop` file has to be used. On KDE it should work.
The icon should be provided in whatever size it was naturally drawn; that is, dont scale the image before passing it. Scaling is postponed until the last minute, when the desired final size is known, to allow best quality.
#### WindowIsTranslucent
Setting this to `true` will make the window background translucent. Some window managers may ignore it, or result in a black window.
名前: WindowIsTranslucent<br/> データ型: `bool`

View File

@ -0,0 +1,53 @@
---
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 the directory containing the compiled assets, this is normally inferred and could be left empty]",
"reloaddirs": "[Additional directories to trigger reloads (comma separated), this is only used for some advanced asset configurations]",
"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`]",
"frontend:dev": "[This command has been replaced by frontend:dev:build. If frontend:dev:build is not specified will falls back to this command. \nIf this command is also not specified will falls back to frontend:build]",
"frontend:dev:build": "[This command is the dev equivalent of frontend:build. If not specified falls back to frontend:dev]",
"frontend:dev:install": "[This command is the dev equivalent of frontend:install. If not specified falls back to frontend:install]",
"frontend:dev:watcher": "[This command is run in a separate process on `wails dev`. Useful for 3rd party watchers or starting 3d party dev servers]",
"frontend:dev:serverUrl": "[URL to a 3rd party dev server to be used to serve assets, EG Vite. \nIf this is set to 'auto' then the devServerUrl will be inferred from the Vite output]",
"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]",
"debounceMS": 100, // The default time the dev server waits to reload when it detects a change in assets
"devServer": "[Address to bind the wails dev sever to. Default: localhost:34115]",
"appargs": "[Arguments passed to the application in shell style when in dev mode]",
"runNonNativeBuildHooks": false, // Defines if build hooks should be run though they are defined for an OS other than the host OS.
"preBuildHooks": {
"GOOS/GOARCH": "[The command that will be executed before a build of the specified GOOS/GOARCH: ${platform} is replaced with the "GOOS/GOARCH". The "GOOS/GOARCH" hook is executed before the "GOOS/*" and "*/*" hook.]",
"GOOS/*": "[The command that will be executed before a build of the specified GOOS: ${platform} is replaced with the "GOOS/GOARCH". The "GOOS/*" hook is executed before the "*/*" hook.]",
"*/*": "[The command that will be executed before every build: ${platform} is replaced with the "GOOS/GOARCH".]"
},
"postBuildHooks": {
"GOOS/GOARCH": "[The command that will be executed after a build of the specified GOOS/GOARCH: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary. The "GOOS/GOARCH" hook is executed before the "GOOS/*" and "*/*" hook.]",
"GOOS/*": "[The command that will be executed after a build of the specified GOOS: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary. The "GOOS/*" hook is executed before the "*/*" hook.]",
"*/*": "[The command that will be executed after every build: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary.]"
},
"info": { // Data used to populate manifests and version info.
"companyName": "[The company name. Default: [The project name]]",
"productName": "[The product name. Default: [The project name]]",
"productVersion": "[The version of the product. Default: '1.0.0']",
"copyright": "[The copyright of the product. Default: 'Copyright.........']",
"comments": "[A short comment of the app. Default: 'Built using Wails (https://wails.app)']"
},
"nsisType": "['multiple': One installer per architecture. 'single': Single universal installer for all architectures being built. Default: 'multiple']",
"obfuscated": "[Whether the app should be obfuscated. Default: false]",
"garbleargs": "[The arguments to pass to the garble command when using the obfuscated flag]"
}
```
This file is read by the Wails CLI when running `wails build` or `wails dev`.
The `assetdir`, `reloaddirs`, `wailsjsdir`, `debounceMS`, `devserver` and `frontenddevserverurl` flags in `wails build/dev` will update the project config and thus become defaults for subsequent runs.

View File

@ -0,0 +1,13 @@
---
sidebar_position: 7
---
# Browser
これらは、システムブラウザに関連したメソッドです。
### BrowserOpenURL
指定されたURLをシステムブラウザで開きます。
Go: `BrowserOpenURL(ctx context.Context, url string)`<br/> JS: `BrowserOpenURL(url string)`

View File

@ -0,0 +1,304 @@
---
sidebar_position: 5
---
# ダイアログ
ランタイムでは、ファイルセレクターやメッセージボックスといったネイティブダイアログへのアクセスを提供しています。
:::info Javascript
現在、Javascriptランタイムではダイアログをサポートしていません。
:::
### OpenDirectoryDialog
ユーザにディレクトリの選択を求めるダイアログを開きます。 [OpenDialogOptions](#opendialogoptions)を使用してカスタマイズできます。
Go: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
返り値: 選択されたディレクトリ(キャンセルされた場合は空) またはエラー
### OpenFileDialog
ユーザにファイルの選択を求めるダイアログを開きます。 [OpenDialogOptions](#opendialogoptions)を使用してカスタマイズできます。
Go: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
返り値: 選択されたファイル(キャンセルされた場合は空) またはエラー
### OpenMultipleFilesDialog
ユーザに複数ファイルの選択を求めるダイアログを開きます。 [OpenDialogOptions](#opendialogoptions)を使用してカスタマイズできます。
Go: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`
返り値: 選択された複数ファイル(キャンセルされた場合はnil) またはエラー
### SaveFileDialog
保存の目的でユーザにファイル名を入力選択させるダイアログを開きます。 [SaveDialogOptions](#savedialogoptions)を使用してカスタマイズできます。
Go: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`
返り値: 入力選択されたファイル(キャンセルされた場合は空) またはエラー
### MessageDialog
メッセージダイアログを使用してメッセージを表示します。 [MessageDialogOptions](#messagedialogoptions)を使用してカスタマイズできます。
Go: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`
返り値: 選択されたボタンのテキストまたはエラー
## オプション
### OpenDialogOptions
```go
type OpenDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
ShowHiddenFiles bool
CanCreateDirectories bool
ResolvesAliases bool
TreatPackagesAsDirectories bool
}
```
| Field | Description | Win | Mac | Lin |
| -------------------------- | ------------------------- | --- | --- | --- |
| DefaultDirectory | ダイアログが開かれたときに初期表示するディレクトリ | ✅ | ✅ | ✅ |
| DefaultFilename | デフォルトファイル名 | ✅ | ✅ | ✅ |
| Title | ダイアログのタイトル | ✅ | ✅ | ✅ |
| [Filters](#filefilter) | ファイルフィルタのリスト | ✅ | ✅ | ✅ |
| ShowHiddenFiles | システムの隠しファイルを表示 | | ✅ | ✅ |
| CanCreateDirectories | ユーザによるディレクトリの作成を許可する | | ✅ | |
| ResolvesAliases | エイリアスではなくファイルパスを返す | | ✅ | |
| TreatPackagesAsDirectories | パッケージへのナビゲーションを許可 | | ✅ | |
### SaveDialogOptions
```go
type SaveDialogOptions struct {
DefaultDirectory string
DefaultFilename string
Title string
Filters []FileFilter
ShowHiddenFiles bool
CanCreateDirectories bool
TreatPackagesAsDirectories bool
}
```
| Field | Description | Win | Mac | Lin |
| -------------------------- | ------------------------- | --- | --- | --- |
| DefaultDirectory | ダイアログが開かれたときに初期表示するディレクトリ | ✅ | ✅ | ✅ |
| DefaultFilename | デフォルトファイル名 | ✅ | ✅ | ✅ |
| Title | ダイアログのタイトル | ✅ | ✅ | ✅ |
| [Filters](#filefilter) | ファイルフィルタのリスト | ✅ | ✅ | ✅ |
| ShowHiddenFiles | システムの隠しファイルを表示 | | ✅ | ✅ |
| CanCreateDirectories | ユーザによるディレクトリの作成を許可する | | ✅ | |
| TreatPackagesAsDirectories | パッケージへのナビゲーションを許可 | | ✅ | |
### MessageDialogOptions
```go
type MessageDialogOptions struct {
Type DialogType
Title string
Message string
Buttons []string
DefaultButton string
CancelButton string
}
```
| Field | Description | Win | Mac | Lin |
| ------------- | ------------------------------------------------- | -------------- | --- | --- |
| Type | メッセージダイアログの種類 (質問、情報など) | ✅ | ✅ | ✅ |
| Title | ダイアログのタイトル | ✅ | ✅ | ✅ |
| Message | ユーザに表示するメッセージ | ✅ | ✅ | ✅ |
| Buttons | ボタンテキストのリスト | | ✅ | |
| DefaultButton | 指定されたテキストのボタンをデフォルトボタンとして扱う。 Bound to `return`. | ✅[*](#windows) | ✅ | |
| CancelButton | 指定されたテキストのボタンをキャンセルボタンとして扱う。 `escape`キーにバインドされます。 | | ✅ | |
#### Windows
Windowsでは、ボタンのカスタマイズができない標準ダイアログタイプがあります。 The value returned will be one of: "Ok", "Cancel", "Abort", "Retry", "Ignore", "Yes", "No", "Try Again" or "Continue".
For Question dialogs, the default button is "Yes" and the cancel button is "No". This can be changed by setting the `DefaultButton` value to `"No"`.
Example:
```go
result, err := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
Type: runtime.QuestionDialog,
Title: "Question",
Message: "Do you want to continue?",
DefaultButton: "No",
})
```
#### Linux
Linux has standard dialog types in which the buttons are not customisable. The value returned will be one of: "Ok", "Cancel", "Yes", "No"
#### Mac
A message dialog on Mac may specify up to 4 buttons. If no `DefaultButton` or `CancelButton` is given, the first button is considered default and is bound to the `return` key.
For the following code:
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
Title: "It's your turn!",
Message: "Select a number",
Buttons: []string{"one", "two", "three", "four"},
})
```
1番目のボタンがデフォルトになります:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_no_defaults.png").default}
width="30%"
class="screenshot"
/>
</div>
<br />
```
And if we specify `DefaultButton` to be "two":
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
Title: "It's your turn!",
Message: "Select a number",
Buttons: []string{"one", "two", "three", "four"},
DefaultButton: "two",
})
```
the second button is shown as default. When `return` is pressed, the value "two" is returned.
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_default_button.png").default}
width="30%"
class="screenshot"
/>
</div>
<br />
```
If we now specify `CancelButton` to be "three":
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
Title: "It's your turn!",
Message: "Select a number",
Buttons: []string{"one", "two", "three", "four"},
DefaultButton: "two",
CancelButton: "three",
})
```
the button with "three" is shown at the bottom of the dialog. When `escape` is pressed, the value "three" is returned:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_default_cancel.png").default}
width="30%"
class="screenshot"
/>
</div>
<br />
<br />
<br />
```
#### 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"
}
```
#### Windows
Windows allows you to use multiple file filters in dialog boxes. Each FileFilter will show up as a separate entry in the dialog:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_win_filters.png").default}
width="50%"
class="screenshot"
/>
</div>
<br />
<br />
<br />
```
#### Linux
Linux allows you to use multiple file filters in dialog boxes. Each FileFilter will show up as a separate entry in the dialog:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/runtime/dialog_lin_filters.png").default}
width="50%"
class="screenshot"
/>
</div>
<br />
<br />
<br />
```
#### Mac
Mac dialogs only have the concept of a single set of patterns to filter files. If multiple FileFilters are provided, Wails will use all the Patterns defined.
Example:
```go
selection, err := runtime.OpenFileDialog(b.ctx, runtime.OpenDialogOptions{
Title: "Select File",
Filters: []runtime.FileFilter{
{
DisplayName: "Images (*.png;*.jpg)",
Pattern: "*.png;*.jpg",
}, {
DisplayName: "Videos (*.mov;*.mp4)",
Pattern: "*.mov;*.mp4",
},
},
})
```
This will result in the Open File dialog using `*.png,*.jpg,*.mov,*.mp4` as a filter.

View File

@ -0,0 +1,37 @@
---
sidebar_position: 2
---
# イベント
Wailsでは、GoまたはJavascriptによって発行および受信できる、一元化されたイベントシステムが用意されています。 必要に応じて、イベント発行時にデータを渡すことも可能です。 イベントリスナーは、そのデータをローカルデータ型で受け取ります。
### EventsOn
このメソッドは、指定されたイベント名のイベントリスナーを新たに設定します。 `eventName`という名前のイベントが[発行](#EventsEmit)されると、コールバックがトリガーされます。 イベント発行時にデータも付与されていた場合、そのデータはコールバックに渡されます。
Go: `EventsOn(ctx context.Context, eventName string, callback func(optionalData ...interface{}))`<br/> JS: `EventsOn(eventName string, callback function(optionalData?: any))`
### EventsOff
このメソッドは、指定されたイベント名のイベントリスナー設定を解除します。引数の`additionalEventNames`を使用することで、複数のリスナーを一度に解除できます。
Go: `EventsOff(ctx context.Context, eventName string, additionalEventNames ...string)`<br/> JS: `EventsOff(eventName string, ...additionalEventNames)`
### EventsOnce
このメソッドは、指定されたイベント名のイベントリスナーを新たに設定し、一度だけトリガーさせます。
Go: `EventsOnce(ctx context.Context, eventName string, callback func(optionalData ...interface{}))`<br/> JS: `EventsOnce(eventName string, callback function(optionalData?: any))`
### EventsOnMultiple
このメソッドは、指定されたイベント名のイベントリスナーを新たに設定し、最大`counter`回だけトリガーします。
Go: `EventsOnMultiple(ctx context.Context, eventName string, callback func(optionalData ...interface{}), counter int)`<br/> JS: `EventsOnMultiple(eventName string, callback function(optionalData?: any), counter int)`
### EventsEmit
このメソッドは、指定されたイベントを発行します。 必要に応じて、イベント発行時にデータを渡すこともできます。 このメソッドによって、任意のイベントリスナーをトリガーさせることができます。
Go: `EventsEmit(ctx context.Context, eventName string, optionalData ...interface{})`<br/> JS: `EventsEmit(ctx context, optionalData function(optionalData?: any))`

View File

@ -0,0 +1,90 @@
---
sidebar_position: 1
---
# イントロダクション
ランタイムは、アプリケーションにユーティリティメソッドを提供するライブラリです。 GoとJavascriptの両方にランタイムがあり、どちらにもほぼ同じメソッドが提供されています。
ユーティリティメソッドには次のようなものがあります:
- [ウィンドウ](window.mdx)
- [Menu](menu.mdx)
- [ダイアログ](dialog.mdx)
- [イベント](events.mdx)
- [Browser](browser.mdx)
- [ログ](log.mdx)
Goのランタイムは、`github.com/wailsapp/wails/v2/pkg/runtime`をインポートすることで利用できます。 このパッケージのすべてのメソッドは、1番目の引数でContextを渡す必要があります。 このContextは、[OnStartup](../options.mdx#onstartup)フック、または[OnDomReady](../options.mdx#ondomready)フックからあらかじめ取得しておいてください。
:::info 備考
[OnStartup](../options.mdx#onstartup)で提供されるContextは、ウィンドウが別のスレッドで初期化されているため、ランタイムが機能する保証がありません。 起動時にランタイムメソッドを呼び出したい場合は、[OnDomReady](../options.mdx#ondomready)を使用してください。
:::
Javascriptのランタイムは、`window.runtime`マップを介してフロントエンド上で利用できます。 `dev`モードでは、Typescript型定義を提供するランタイムパッケージが生成されます。 これらは、フロントエンドディレクトリの`wailsjs`ディレクトリに配置しておく必要があります。
### 非表示
Go: `Hide(ctx context.Context)`<br/> JS: `Hide()`
アプリケーションを非表示にします。
:::info 備考
Macでこのメソッドを使用すると、標準のMacアプリケーションにおけるメニュー項目の`Hide`と同じ方法で、アプリケーションが非表示になります。 これはウィンドウの非表示とは異なりますが、アプリケーションはフォアグラウンドに残ったままになります。 WindowsおよびLinuxでは、`WindowHide`メソッドと同等です。
:::
### 表示
アプリケーションを表示します。
:::info 備考
Macでこのメソッドを使用すると、アプリケーションがフォアグラウンドに戻ります。 WindowsおよびLinuxでは、`WindowShow`メソッドと同等です。
:::
Go: `Show(ctx context.Context)`<br/> JS: `Show()`
### 終了
アプリケーションを終了します。
Go: `Quit(ctx context.Context)`<br/> JS: `Quit()`
### 環境
現在の環境の詳細情報を取得します。
Go: `Environment(ctx context.Context) EnvironmentInfo`<br/> JS: `Environment(): Promise<EnvironmentInfo>`
#### EnvironmentInfo
Go:
```go
type EnvironmentInfo struct {
BuildType string
Platform string
Arch string
}
```
JS:
```ts
interface EnvironmentInfo {
buildType: string;
platform: string;
arch: string;
}
```

View File

@ -0,0 +1,130 @@
---
sidebar_position: 3
---
# ログ
Wailsでは、GoまたはJavascriptから呼び出すことのできるロギングメカニズムを用意しています。 一般的なロガーと同じように、ログにはいくつかのログレベルがあります:
- トレース
- デバッグ
- 情報
- 警告
- Error
- 致命的
ロガーは、設定されている出力ログレベル以上のログメッセージを出力します。 例えば、出力ログレベルを`Debug`に設定した場合、`Trace`以外のすべてのレベルのメッセージが出力されます。
### LogPrint
指定されたメッセージをRawメッセージとしてロギングします。
Go: `LogPrint(ctx context.Context, message string)`<br/> JS: `LogPrint(message: string)`
### LogPrintf
指定されたメッセージをRawメッセージとしてロギングします。
Go: `LogPrintf(ctx context.Context, format string, args ...interface{})`<br/>
### LogTrace
指定されたメッセージを`Trace`ログレベルでロギングします。
Go: `LogTrace(ctx context.Context, message string)`<br/> JS: `LogTrace(message: string)`
### LogTracef
指定されたメッセージを`Trace`ログレベルでロギングします。
Go: `LogTracef(ctx context.Context, format string, args ...interface{})`<br/>
### LogDebug
指定されたメッセージを`Debug`ログレベルでロギングします。
Go: `LogDebug(ctx context.Context, message string)`<br/> JS: `LogDebug(message: string)`
### LogDebugf
指定されたメッセージを`Debug`ログレベルでロギングします。
Go: `LogDebugf(ctx context.Context, format string, args ...interface{})`<br/>
### LogInfo
指定されたメッセージを`Info`ログレベルでロギングします。
Go: `LogInfo(ctx context.Context, message string)`<br/> JS: `LogInfo(message: string)`
### LogInfof
指定されたメッセージを`Info`ログレベルでロギングします。
Go: `LogInfof(ctx context.Context, format string, args ...interface{})`<br/>
### LogWarning
指定されたメッセージを`Warning`ログレベルでロギングします。
Go: `LogWarning(ctx context.Context, message string)`<br/> JS: `LogWarning(message: string)`
### LogWarningf
指定されたメッセージを`Warning`ログレベルでロギングします。
Go: `LogWarningf(ctx context.Context, format string, args ...interface{})`<br/>
### LogError
指定されたメッセージを`Error`ログレベルでロギングします。
Go: `LogError(ctx context.Context, message string)`<br/> JS: `LogError(message: string)`
### LogErrorf
指定されたメッセージを`Error`ログレベルでロギングします。
Go: `LogErrorf(ctx context.Context, format string, args ...interface{})`<br/>
### LogFatal
指定されたメッセージを`Fatal`ログレベルでロギングします。
Go: `LogFatal(ctx context.Context, message string)`<br/> JS: `LogFatal(message: string)`
### LogFatalf
指定されたメッセージを`Fatal`ログレベルでロギングします。
Go: `LogFatalf(ctx context.Context, format string, args ...interface{})`<br/>
### LogSetLogLevel
出力ログレベルを設定します。 Javascriptでは、数値が次のログレベルに対応しています:
| 値 | ログレベル |
| - | ----- |
| 1 | トレース |
| 2 | デバッグ |
| 3 | 情報 |
| 4 | 警告 |
| 5 | Error |
Go: `LogSetLogLevel(ctx context.Context, level logger.LogLevel)`<br/> JS: `LogSetLogLevel(level: number)`
## カスタムロガーの使用
カスタムロガーは、アプリケーションオプションの1つである[Logger](../options.mdx#logger)で指定してあげることで、使用することができます。 カスタムロガーを使用する際の唯一の要件は、`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)
}
```

View File

@ -0,0 +1,27 @@
---
sidebar_position: 6
---
# Menu
これらは、アプリケーションメニューに関連したメソッドです。
:::info Javascript
現在、Javascriptランタイムではメニューをサポートしていません。
:::
### MenuSetApplicationMenu
指定された[menu](../menus.mdx)をアプリケーションメニューとして設定します。
Go: `MenuSetApplicationMenu(ctx context.Context, menu *menu.Menu)`
### MenuUpdateApplicationMenu
`MenuSetApplicationMenu`に渡されたメニューへの変更を検知し、アプリケーションメニューを更新します。
Go: `MenuUpdateApplicationMenu(ctx context.Context)`

View File

@ -0,0 +1,223 @@
---
sidebar_position: 4
---
# ウィンドウ
アプリケーションウィンドウを制御できるメソッド群です。
### WindowSetTitle
ウィンドウのタイトルバーにテキストを設定します。
Go: `WindowSetTitle(ctx context.Context, title string)`<br/> JS: `WindowSetTitle(title: string)`
### WindowFullscreen
ウィンドウをフルスクリーンにします。
Go: `WindowFullscreen(ctx context.Context)`<br/> JS: `WindowFullscreen()`
### WindowUnfullscreen
フルスクリーンにする前のウィンドウサイズおよび位置に戻します。
Go: `WindowUnfullscreen(ctx context.Context)`<br/> JS: `WindowUnfullscreen()`
### WindowIsFullscreen
ウィンドウがフルスクリーンの場合は、trueを返します。
Go: `WindowIsFullscreen(ctx context.Context) bool`<br/> JS: `WindowIsFullscreen() bool`
### WindowCenter
ウィンドウが現在表示されているモニターの中央に、ウィンドウを配置させます。
Go: `WindowReload(ctx context.Context)`<br/> JS: `WindowReload()`
### WindowExecJS
Executes arbitrary JS code in the window.
This method runs the code in the browser asynchronously and returns immediately. If the script causes any errors, they will only be available in the browser console.
Go: `WindowExecJS(ctx context.Context, js string)`
### WindowReload
リロードします。(現在表示されているページをリロード)
Go: `WindowReloadApp(ctx context.Context)`<br/> JS: `WindowReloadApp()`
### WindowReloadApp
アプリケーションフロントエンドをリロードします。
Go: `WindowSetSystemDefaultTheme(ctx context.Context)`<br/> JS: `WindowSetSystemDefaultTheme()`
### WindowSetSystemDefaultTheme
Windowsのみ使用可能。
Go: `WindowSetDarkTheme(ctx context.Context)`<br/> JS: `WindowSetDarkTheme()`
ウィンドウのテーマをシステムデフォルト(ダーク/ライト) に設定します。
### WindowSetLightTheme
Windowsのみ使用可能。
Go: `WindowSetLightTheme(ctx context.Context)`<br/> JS: `WindowSetLightTheme()`
ウィンドウのテーマをライトに設定します。
### WindowSetDarkTheme
Windowsのみ使用可能。
Go: `WindowShow(ctx context.Context)`<br/> JS: `WindowShow()`
ウィンドウのテーマをダークに設定します。
### WindowShow
ウィンドウが非表示になっている場合は、表示させます。
Go: `WindowHide(ctx context.Context)`<br/> JS: `WindowHide()`
### WindowHide
現在表示されているウィンドウを非表示にします。
Go: `WindowSetSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetSize(size: Size)`
### WindowIsNormal
ウィンドウが最小化、最大化、またはフルスクリーンになっていない場合、trueを返します。
Go: `WindowIsNormal(ctx context.Context) bool`<br/> JS: `WindowIsNormal() bool`
### WindowSetSize
ウィンドウの幅と高さを設定します。
Go: `WindowSetMaxSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetMaxSize(size: Size)`
### WindowGetSize
ウィンドウの幅と高さを取得します。
Go: `WindowGetSize(ctx context.Context) (width int, height int)`<br/> JS: `WindowGetSize() : Size`
### WindowSetMinSize
ウィンドウの最小サイズを設定します。 現在のウィンドウサイズが、指定された最小サイズよりも小さい場合、現在のウィンドウサイズは変更されます。
サイズを`0,0`に設定すると、サイズの制約が無効化されます。
Go: `WindowSetAlwaysOnTop(ctx context.Context, b bool)`<br/> JS: `WindowSetAlwaysOnTop(b: Boolen)`
### WindowSetMaxSize
ウィンドウの最大サイズを設定します。 現在のウィンドウサイズが、指定された最大サイズよりも大きい場合、現在のウィンドウサイズは変更されます。
サイズを`0,0`に設定すると、サイズの制約が無効化されます。
Go: `WindowSetPosition(ctx context.Context, x int, y int)`<br/> JS: `WindowSetPosition(position: Position)`
### WindowSetAlwaysOnTop
ウィンドウを常に最前面に表示するかを切り替えます。
Go: `WindowSetAlwaysOnTop(ctx context.Context, b bool)`<br/> JS: `WindowSetAlwaysOnTop(b: Boolen)`
### WindowSetPosition
現在ウィンドウが表示されているモニターに対する、相対的なウィンドウ位置を設定します。
Go: `WindowMaximise(ctx context.Context)`<br/> JS: `WindowMaximise()`
### WindowGetPosition
現在ウィンドウが表示されているモニターに対する、相対的なウィンドウ位置を取得します。
Go: `WindowGetPosition(ctx context.Context) (x int, y int)`<br/> JS: `WindowGetPosition() : Position`
### WindowMaximise
ウィンドウを最大化します。
Go: `WindowToggleMaximise(ctx context.Context)`<br/> JS: `WindowToggleMaximise()`
### WindowUnmaximise
ウィンドウの最大化を解除し、最大化する前のサイズおよび位置に戻します。
Go: `WindowMinimise(ctx context.Context)`<br/> JS: `WindowMinimise()`
### WindowIsMaximised
ウィンドウが最大化している場合はtrueを返します。
Go: `WindowIsMaximised(ctx context.Context) bool`<br/> JS: `WindowIsMaximised() bool`
### WindowToggleMaximise
最大化の状態を切り替えます。
Go: `WindowToggleMaximise(ctx context.Context)`<br/> JS: `WindowToggleMaximise()`
### WindowMinimise
ウィンドウを最小化します。
Go: `WindowSetBackgroundColour(ctx context.Context, R, G, B, A uint8)`<br/> JS: `WindowSetBackgroundColour(R, G, B, A)`
### WindowUnminimise
ウィンドウの最小化を解除し、最小化する前のサイズおよび位置に戻します。
Go: `WindowUnminimise(ctx context.Context)`<br/> JS: `WindowUnminimise()`
### WindowIsMinimised
ウィンドウが最小化している場合はtrueを返します。
Go: `WindowIsMinimised(ctx context.Context) bool`<br/> JS: `WindowIsMinimised() bool`
### WindowSetBackgroundColour
ウィンドウの背景色をRGBAカラー定義で設定します。 この色は、すべての透過ピクセルに対して表示されます。
R、G、B、Aの有効な値の範囲は0255です。
:::info Windows
Windowsの場合、0または255のアルファ値(A) のみがサポートされています。 0以外の値を指定すると、すべて255とみなされます。
:::
Go: `WindowSetBackgroundColour(ctx context.Context, R, G, B, A uint8)`<br/> JS: `WindowSetBackgroundColour(R, G, B, A)`
## Typescript型定義
### Position
```ts
interface Position {
x: number;
y: number;
}
```
### Size
```ts
interface Size {
w: number;
h: number;
}
```

View File

@ -0,0 +1,249 @@
---
sidebar_position: 20
---
# Dogs API
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
width="50%"
className="screenshot"
/>
</div>
<br />
```
:::note
This tutorial has been kindly provided by [@tatadan](https://twitter.com/tatadan) and forms part of their [Wails Examples Repository](https://github.com/tataDan/wails-v2-examples).
:::
In this tutorial we are going to develop an application that retrieves photos of dogs from the web and then displays them.
### Create the project
Let's create the application. From a terminal enter: `wails init -n dogs-api -t svelte`
Note: We could optionally add `-ide vscode` or `-ide goland` to the end of this command if you wanted to add IDE support.
Now let's `cd dogs-api` and start editing the project files.
### Remove unused code
We will start by removing some elements that we know we will not use:
- Open `app.go` and remove the following lines:
```go
// Greet returns a greeting for the given name
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s, It's show time!", name)
}
```
- Open `frontend/src/App.svelte` and delete all lines.
- Delete the `frontend/src/assets/images/logo-universal.png` file
### Creating our application
Now let's add our new Go code.
Add the following struct declarations to `app.go` before the function definitions:
```go
type RandomImage struct {
Message string
Status string
}
type AllBreeds struct {
Message map[string]map[string][]string
Status string
}
type ImagesByBreed struct {
Message []string
Status string
}
```
Add the following functions to `app.go` (perhaps after the existing function definitions):
```go
func (a *App) GetRandomImageUrl() string {
response, err := http.Get("https://dog.ceo/api/breeds/image/random")
if err != nil {
log.Fatal(err)
}
responseData, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Fatal(err)
}
var data RandomImage
json.Unmarshal(responseData, &data)
return data.Message
}
func (a *App) GetBreedList() []string {
var breeds []string
response, err := http.Get("https://dog.ceo/api/breeds/list/all")
if err != nil {
log.Fatal(err)
}
responseData, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Fatal(err)
}
var data AllBreeds
json.Unmarshal(responseData, &data)
for k := range data.Message {
breeds = append(breeds, k)
}
sort.Strings(breeds)
return breeds
}
func (a *App) GetImageUrlsByBreed(breed string) []string {
url := fmt.Sprintf("%s%s%s%s", "https://dog.ceo/api/", "breed/", breed, "/images")
response, err := http.Get(url)
if err != nil {
log.Fatal(err)
}
responseData, err := ioutil.ReadAll(response.Body)
if err != nil {
log.Fatal(err)
}
var data ImagesByBreed
json.Unmarshal(responseData, &data)
return data.Message
}
```
Modify the `import` section of `app.go` to look like this:
```go
import (
"context"
"fmt"
"encoding/json"
"io/ioutil"
"log"
"net/http"
"sort"
)
```
Add the following lines to `frontend/src/App.svelte`:
<!-- prettier-ignore-start -->
```html
<script>
import { GetRandomImageUrl } from "../wailsjs/go/main/App.js";
import { GetBreedList } from "../wailsjs/go/main/App.js";
import { GetImageUrlsByBreed } from "../wailsjs/go/main/App.js";
let randomImageUrl = "";
let breeds = [];
let photos = [];
let selectedBreed;
let showRandomPhoto = false;
let showBreedPhotos = false;
function init() {
getBreedList();
}
init();
function getRandomImageUrl() {
showRandomPhoto = false;
showBreedPhotos = false;
GetRandomImageUrl().then((result) => (randomImageUrl = result));
showRandomPhoto = true;
}
function getBreedList() {
GetBreedList().then((result) => (breeds = result));
}
function getImageUrlsByBreed() {
init();
showRandomPhoto = false;
showBreedPhotos = false;
GetImageUrlsByBreed(selectedBreed).then((result) => (photos = result));
showBreedPhotos = true;
}
</script>
<h3>Dogs API</h3>
<div>
<button class="btn" on:click={getRandomImageUrl}>
Fetch a dog randomly
</button>
Click on down arrow to select a breed
<select bind:value={selectedBreed}>
{#each breeds as breed}
<option value={breed}>
{breed}
</option>
{/each}
</select>
<button class="btn" on:click={getImageUrlsByBreed}>
Fetch by this breed
</button>
</div>
<br />
{#if showRandomPhoto}
<img id="random-photo" src={randomImageUrl} alt="No dog found" />
{/if}
{#if showBreedPhotos}
{#each photos as photo}
<img id="breed-photos" src={photo} alt="No dog found" />
{/each}
{/if}
<style>
#random-photo {
width: 600px;
height: auto;
}
#breed-photos {
width: 300px;
height: auto;
}
.btn:focus {
border-width: 3px;
}
</style>
```
<!-- prettier-ignore-end -->
### Testing the application
To generate the bindings and test the application, run `wails dev`.
### Compiling the application
To compile the application to a single, production grade binary, run `wails build`.

View File

@ -0,0 +1,124 @@
---
sidebar_position: 10
---
# Hello World
The aim of this tutorial is to get you up and running with the most basic application using Wails. You will be able to:
- Create a new Wails application
- Build the application
- Run the application
:::note
This tutorial uses Windows as the target platform. Output will vary slightly depending on your operating system.
:::
## Create a new Wails application
To create a new Wails application using the default vanilla JS template, you need to run the following command:
```bash
wails init -n helloworld
```
You should see something similar to the following:
```
Wails CLI v2.0.0
Initialising Project 'helloworld'
---------------------------------
Project Name: helloworld
Project Directory: C:\Users\leaan\tutorial\helloworld
Project Template: vanilla
Template Support: https://wails.io
Initialised project 'helloworld' in 232ms.
```
This will create a new directory called `helloworld` in the current directory. In this directory, you will find a number of files:
```
build/ - Contains the build files + compiled application
frontend/ - Contains the frontend files
app.go - Contains the application code
main.go - The main program with the application configuration
wails.json - The project configuration file
go.mod - The go module file
go.sum - The go module checksum file
```
## Build the application
To build the application, change to the new `helloworld` project directory and run the following command:
```bash
wails build
```
You should see something like the following:
```
Wails CLI v2.0.0
App Type: desktop
Platforms: windows/amd64
Compiler: C:\Users\leaan\go\go1.18.3\bin\go.exe
Build Mode: Production
Skip Frontend: false
Compress: false
Package: true
Clean Build Dir: false
LDFlags: ""
Tags: []
Race Detector: false
Building target: windows/amd64
------------------------------
- Installing frontend dependencies: Done.
- Compiling frontend: Done.
- Generating bundle assets: Done.
- Compiling application: Done.
Built 'C:\Users\leaan\tutorial\helloworld\build\bin\helloworld.exe' in 10.616s.
```
This has compiled the application and saved it in the `build/bin` directory.
## Run the application
If we view the `build/bin` directory in Windows Explorer, we should see our project binary:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/helloworld-app-icon.webp").default}
width="134px"
/>
</div>
<br />
```
We can run it by simply double-clicking the `helloworld.exe` file.
On Mac, Wails generates a `helloworld.app` file which can be run by double-clicking it.
On Linux, you can run the application using `./helloworld` from the `build/bin` directory.
You should see the application working as expected:
```mdx-code-block
<div class="text--center">
<img
src={require("@site/static/img/windows-default-app.webp").default}
width="50%"
className="screenshot"
/>
</div>
<br />
```

View File

@ -41,7 +41,7 @@ on:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -107,7 +107,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -182,7 +182,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -200,7 +200,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -328,7 +328,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -346,7 +346,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -0,0 +1,38 @@
{
"version.label": {
"message": "v2.1.0",
"description": "The label for version v2.1.0"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar docs"
},
"sidebar.docs.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar docs"
},
"sidebar.docs.category.Community": {
"message": "Community",
"description": "The label for category Community in sidebar docs"
},
"sidebar.docs.category.Showcase": {
"message": "Showcase",
"description": "The label for category Showcase in sidebar docs"
},
"sidebar.docs.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar docs"
},
"sidebar.docs.category.Tutorials": {
"message": "Tutorials",
"description": "The label for category Tutorials in sidebar docs"
},
"sidebar.docs.link.Contributing": {
"message": "Contributing",
"description": "The label for link Contributing in sidebar docs, linking to /community-guide#ways-of-contributing"
}
}

View File

@ -41,7 +41,7 @@ on:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -107,7 +107,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -182,7 +182,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -200,7 +200,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -328,7 +328,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -0,0 +1,38 @@
{
"version.label": {
"message": "v2.1.0",
"description": "The label for version v2.1.0"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar docs"
},
"sidebar.docs.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar docs"
},
"sidebar.docs.category.Community": {
"message": "Community",
"description": "The label for category Community in sidebar docs"
},
"sidebar.docs.category.Showcase": {
"message": "Showcase",
"description": "The label for category Showcase in sidebar docs"
},
"sidebar.docs.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar docs"
},
"sidebar.docs.category.Tutorials": {
"message": "Tutorials",
"description": "The label for category Tutorials in sidebar docs"
},
"sidebar.docs.link.Contributing": {
"message": "Contributing",
"description": "The label for link Contributing in sidebar docs, linking to /community-guide#ways-of-contributing"
}
}

View File

@ -24,7 +24,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -107,7 +107,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -182,7 +182,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -327,7 +327,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -29,7 +29,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -52,7 +52,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -92,7 +92,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -175,7 +175,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -198,7 +198,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -289,7 +289,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -312,7 +312,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -392,7 +392,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -517,7 +517,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -24,7 +24,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -107,7 +107,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -182,7 +182,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:
@ -327,7 +327,7 @@ jobs:
go-version: [1.18] go-version: [1.18]
runs-on: ${{ matrix.platform }} runs-on: ${{ matrix.platform }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v3
- name: Install Go - name: Install Go
uses: actions/setup-go@v2 uses: actions/setup-go@v2
with: with:

View File

@ -0,0 +1,38 @@
{
"version.label": {
"message": "v2.1.0",
"description": "The label for version v2.1.0"
},
"sidebar.docs.category.Getting Started": {
"message": "Getting Started",
"description": "The label for category Getting Started in sidebar docs"
},
"sidebar.docs.category.Reference": {
"message": "Reference",
"description": "The label for category Reference in sidebar docs"
},
"sidebar.docs.category.Runtime": {
"message": "Runtime",
"description": "The label for category Runtime in sidebar docs"
},
"sidebar.docs.category.Community": {
"message": "Community",
"description": "The label for category Community in sidebar docs"
},
"sidebar.docs.category.Showcase": {
"message": "Showcase",
"description": "The label for category Showcase in sidebar docs"
},
"sidebar.docs.category.Guides": {
"message": "Guides",
"description": "The label for category Guides in sidebar docs"
},
"sidebar.docs.category.Tutorials": {
"message": "Tutorials",
"description": "The label for category Tutorials in sidebar docs"
},
"sidebar.docs.link.Contributing": {
"message": "Contributing",
"description": "The label for link Contributing in sidebar docs, linking to /community-guide#ways-of-contributing"
}
}

View File

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

View File

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

View File

@ -0,0 +1,26 @@
---
sidebar_position: 2
---
# 链接
此页面用于列出社区相关的链接。 请提交 PR点击页面底部的 `编辑此页`)增加链接。
## Awesome Wails
Wails 相关的 [优秀列表](https://github.com/wailsapp/awesome-wails)。
## 支持的频道
- [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 测试版讨论板](https://github.com/wailsapp/wails/discussions/828)
## 社交媒体
- [Twitter](https://twitter.com/wailsapp)
- [Wails 中文社区 QQ 群](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - 群号1067173054
## 其他教程和文章
- [Building of Bulletin Board](https://blog.customct.com/building-bulletin-board)

View File

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

View File

@ -0,0 +1,10 @@
# EmailIt
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/emailit.webp").default} />
<br />
</p>
```
[EmailIt](https://github.com/raguay/EmailIt/) is a Wails 2 program that is a markdown based email sender only with nine notepads, scripts to manipulate the text, and templates. It also has a builtin [Node-Red](https://nodered.org/) server, scripts terminal, and the [ScriptBar](https://github.com/raguay/ScriptBarApp) program for displaying results from Node-Red or a script on your system. Documentation is very scarce, but the programs works. Its built using Wails2 and Svelte, and the download is a universal macOS application.

View File

@ -0,0 +1,12 @@
# EncryptEasy
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/encrypteasy.webp").default} />
<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.

View File

@ -0,0 +1,16 @@
# FileHound Export Utility
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/filehound.webp").default} />
<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

View File

@ -0,0 +1,14 @@
# Minecraft Updater
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={
require("@site/static/img/showcase/minecraft-mod-updater.webp").default
}
/>
<br />
</p>
```
[Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater) is a utility tool to update and synchronize Minecraft mods for your userbase. Its built using Wails2 and React with [antd](https://ant.design/) as frontend framework.

View File

@ -0,0 +1,14 @@
# Modal File Manager
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img
src={require("@site/static/img/showcase/modalfilemanager.webp").default}
/>
<br />
</p>
```
[Modal File Manager](https://github.com/raguay/ModalFileManager) is a dual pane file manager using web technologies. My original design was based on NW.js and can be found [here](https://github.com/raguay/ModalFileManager-NWjs). This version uses the same Svelte based frontend code (but it has be greatly modified since the departure from NW.js), but the backend is a [Wails 2](https://wails.io/) implementation. By using this implementation, I no longer use command line `rm`, `cp`, etc. commands. It is fully coded using Go and runs much faster than the previous versions.
This file manager is designed around the same principle as Vim: a state controlled keyboard actions. The number of states isn't fixed, but very programmable. Therefore, an infinite number of keyboard configurations can be created and used. This is the main difference from other file managers.

View File

@ -0,0 +1,10 @@
# Molley Wallet
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/mollywallet.webp").default} />
<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.

View File

@ -0,0 +1,14 @@
# October
```mdx-code-block
<p style={{ "text-align": "center" }}>
<img src={require("@site/static/img/showcase/october.webp").default} />
<br />
</p>
```
[October](https://october.utf9k.net) is a small Wails application that makes it really easy to extract highlights from [Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader) and then forward them to [Readwise](https://readwise.io).
It has a relatively small scope with all platform versions weighing in under 10MB, and that's without enabling [UPX compression](https://upx.github.io/)!
In contrast, the author's previous attempts with Electron quickly bloated to several hundred megabytes.

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