mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-01 22:42:37 +08:00
parent
66bd24e184
commit
ebc14debdf
@ -1841,6 +1841,24 @@
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "allcontributors[bot]",
|
||||
"name": "allcontributors[bot]",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/in/23186?v=4",
|
||||
"profile": "https://github.com/apps/allcontributors",
|
||||
"contributions": [
|
||||
"doc"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "wandercn",
|
||||
"name": "wander",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/77320953?v=4",
|
||||
"profile": "https://www.ffactory.org/",
|
||||
"contributions": [
|
||||
"doc"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 8,
|
||||
|
@ -91,9 +91,12 @@ The installation instructions are on the [official website](https://wails.io/doc
|
||||
|
||||
## Sponsors
|
||||
|
||||
|
||||
This project is supported by these kind people / companies:
|
||||
<img src="website/static/img/sponsors.svg" style="width:100%;max-width:800px;"/>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://wails.io/img/sponsor/jetbrains-grayscale.webp" style="width: 100px"/>
|
||||
</p>
|
||||
## FAQ
|
||||
|
||||
- Is this an alternative to Electron?
|
||||
|
24
Taskfile.yaml
Normal file
24
Taskfile.yaml
Normal file
@ -0,0 +1,24 @@
|
||||
# https://taskfile.dev
|
||||
|
||||
version: '3'
|
||||
|
||||
vars:
|
||||
GREETING: Hello, World!
|
||||
|
||||
tasks:
|
||||
check-contributors:
|
||||
cmds:
|
||||
- npx -y all-contributors-cli check
|
||||
|
||||
update-contributors:
|
||||
cmds:
|
||||
- go run v3/tasks/contribs/main.go
|
||||
|
||||
build-contributors:
|
||||
cmds:
|
||||
- npx -y all-contributors-cli generate
|
||||
|
||||
release:
|
||||
dir: v2/tools/release
|
||||
cmds:
|
||||
- go run release.go
|
@ -1 +1 @@
|
||||
v2.3.1
|
||||
v2.4.0
|
@ -54,13 +54,13 @@ func main() {
|
||||
}
|
||||
|
||||
s.CD("../../../website")
|
||||
runCommand("pnpm", "install")
|
||||
runCommand("npx", "-y", "pnpm", "install")
|
||||
|
||||
s.ECHO("Generating new Docs for version: " + newVersion)
|
||||
|
||||
runCommand("pnpm", "run", "docusaurus", "docs:version", newVersion)
|
||||
runCommand("npx", "pnpm", "run", "docusaurus", "docs:version", newVersion)
|
||||
|
||||
runCommand("pnpm", "run", "write-translations")
|
||||
runCommand("npx", "pnpm", "run", "write-translations")
|
||||
|
||||
// Load the version list/*
|
||||
versionsData, err := os.ReadFile("versions.json")
|
||||
@ -83,5 +83,5 @@ func main() {
|
||||
s.RM("version-" + oldestVersion + "-sidebars.json")
|
||||
s.CD("..")
|
||||
|
||||
runCommand("pnpm", "run", "build")
|
||||
runCommand("npx", "pnpm", "run", "build")
|
||||
}
|
||||
|
@ -1,38 +0,0 @@
|
||||
{
|
||||
"version.label": {
|
||||
"message": "v2.0.0-rc.1",
|
||||
"description": "The label for version v2.0.0-rc.1"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
{
|
||||
"version.label": {
|
||||
"message": "v2.0.0",
|
||||
"description": "The label for version v2.0.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"
|
||||
}
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
{
|
||||
"version.label": {
|
||||
"message": "v2.2.0",
|
||||
"description": "The label for version v2.2.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"
|
||||
}
|
||||
}
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"version.label": {
|
||||
"message": "v2.3.0",
|
||||
"description": "The label for version v2.3.0"
|
||||
"message": "v2.4.0",
|
||||
"description": "The label for version v2.4.0"
|
||||
},
|
||||
"sidebar.docs.category.Getting Started": {
|
||||
"message": "Getting Started",
|
@ -12,8 +12,7 @@ La [liste définitive](https://github.com/wailsapp/awesome-wails) de liens relat
|
||||
|
||||
## Canaux de support
|
||||
|
||||
- [Gophers Slack Channel](https://gophers.slack.com/messages/CJ4P9F7MZ/)
|
||||
- [Gophers Slack Channel Invite](https://invite.slack.golangbridge.org/)
|
||||
- [Wails Discord Server](https://discord.gg/JDdSxwjhGf)
|
||||
- [Github Issues](https://github.com/wailsapp/wails/issues)
|
||||
- [canal de discussion sur la bêta v2](https://github.com/wailsapp/wails/discussions/828)
|
||||
|
@ -1,22 +0,0 @@
|
||||
---
|
||||
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
|
||||
|
||||
- [Discord](https://discord.com/invite/JDdSxwjhGf)
|
||||
- [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
|
@ -1,8 +0,0 @@
|
||||
# EmailIt
|
||||
|
||||
<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. It’s built using Wails2 and Svelte, and the download is a universal macOS application.
|
@ -1,10 +0,0 @@
|
||||
# EncryptEasy
|
||||
|
||||
<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.
|
@ -1,14 +0,0 @@
|
||||
# FileHound Export Utility
|
||||
|
||||
<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
|
@ -1,10 +0,0 @@
|
||||
# Minecraft Updater
|
||||
|
||||
<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. It’s built using Wails2 and React with [antd](https://ant.design/) as frontend framework.
|
@ -1,12 +0,0 @@
|
||||
# Modal File Manager
|
||||
|
||||
<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.
|
@ -1,8 +0,0 @@
|
||||
# Molley Wallet
|
||||
|
||||
<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.
|
@ -1,12 +0,0 @@
|
||||
# October
|
||||
|
||||
<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.
|
@ -1,8 +0,0 @@
|
||||
# Optimus
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/optimus.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
|
||||
[Optimus](https://github.com/splode/optimus) is a desktop image optimization application. It supports conversion and compression between WebP, JPEG, and PNG image formats.
|
@ -1,8 +0,0 @@
|
||||
# Portfall
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/portfall.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
|
||||
[Portfall](https://github.com/rekon-oss/portfall) - A desktop k8s port-forwarding portal for easy access to all your cluster UIs
|
@ -1,10 +0,0 @@
|
||||
# Restic Browser
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/restic-browser-2.png").default}
|
||||
/>
|
||||
<br />
|
||||
</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.
|
@ -1,19 +0,0 @@
|
||||
# RiftShare
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/riftshare-main.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
|
||||
Easy, Secure, and Free file sharing for everyone. Learn more at [Riftshare.app](https://riftshare.app)
|
||||
|
||||
## Features
|
||||
|
||||
- Easy secure file sharing between computers both in the local network and through the internet
|
||||
- Supports sending files or directories securely through the [magic wormhole protocol](https://magic-wormhole.readthedocs.io/en/latest/)
|
||||
- Compatible with all other apps using magic wormhole (magic-wormhole or wormhole-william CLI, wormhole-gui, etc.)
|
||||
- Automatic zipping of multiple selected files to send at once
|
||||
- Full animations, progress bar, and cancellation support for sending and receiving
|
||||
- Native OS File Selection
|
||||
- Open files in one click once received
|
||||
- Auto Update - don't worry about having the latest release!
|
@ -1,8 +0,0 @@
|
||||
# ScriptBar
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/scriptbar.webp").default} />
|
||||
<br />
|
||||
</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.
|
@ -1,8 +0,0 @@
|
||||
# Surge
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/surge.png").default} />
|
||||
<br />
|
||||
</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.
|
@ -1,8 +0,0 @@
|
||||
# Wally
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/wally.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
|
||||
[Wally](https://ergodox-ez.com/pages/wally) is the official firmware flasher for [Ergodox](https://ergodox-ez.com/) keyboards. It looks great and is a fantastic example of what you can achieve with Wails: the ability to combine the power of Go and the rich graphical tools of the web development world.
|
@ -1,8 +0,0 @@
|
||||
# Wombat
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/wombat.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
|
||||
[Wombat](https://github.com/rogchap/wombat) is a cross platform gRPC client.
|
@ -1,8 +0,0 @@
|
||||
# Ytd
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/ytd.webp").default} />
|
||||
<br />
|
||||
</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.
|
@ -1,52 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Templates
|
||||
|
||||
This page serves as a list for community supported templates. Please submit a PR (click `Edit this page` at the bottom) to include your templates. To build your own template, please see the [Templates](../guides/templates.mdx) guide.
|
||||
|
||||
To use these templates, run `wails init -n "Your Project Name" -t [the link below[@version]]`
|
||||
|
||||
If there is no version suffix, the main branch code template is used by default. If there is a version suffix, the code template corresponding to the tag of this version is used.
|
||||
|
||||
Example: `wails init -n "Your Project Name" -t https://github.com/misitebao/wails-template-vue`
|
||||
|
||||
:::warning Attention
|
||||
|
||||
**The Wails project does not maintain, is not responsible nor liable for 3rd party templates!**
|
||||
|
||||
If you are unsure about a template, inspect `package.json` and `wails.json` for what scripts are run and what packages are installed.
|
||||
|
||||
:::
|
||||
|
||||
## Vue
|
||||
|
||||
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - A template using Vite,Vue and Vue-Router(Support both JavaScript and TypeScript)
|
||||
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - Vue 3 TypeScript with Vite (and instructions to add features)
|
||||
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - Vue 3 TypeScript with Vite, Vuex, Vue Router, Sass, and ESLint + Prettier
|
||||
|
||||
## Angular
|
||||
|
||||
- [wails-angular-template](https://github.com/TAINCER/wails-angular-template) - Angular with TypeScript, Sass, Hot-Reload, Code-Splitting and i18n
|
||||
|
||||
## React
|
||||
|
||||
- [wails-react-template](https://github.com/AlienRecall/wails-react-template) - A template using reactjs
|
||||
- [wails-react-template](https://github.com/flin7/wails-react-template) - A minimal template for React that supports live development
|
||||
- [wails-template-nextjs](https://github.com/LGiki/wails-template-nextjs) - A template using Next.js and TypeScript
|
||||
|
||||
## Svelte
|
||||
|
||||
- [wails-svelte-template](https://github.com/raitonoberu/wails-svelte-template) - A template using Svelte
|
||||
- [wails-vite-svelte-template](https://github.com/BillBuilt/wails-vite-svelte-template) - A template using Svelte and Vite
|
||||
- [wails-vite-svelte-tailwind-template](https://github.com/BillBuilt/wails-vite-svelte-tailwind-template) - A template using Svelte and Vite with TailwindCSS v3
|
||||
- [wails-sveltekit-template](https://github.com/h8gi/wails-sveltekit-template) - A template using SvelteKit
|
||||
|
||||
## Elm
|
||||
|
||||
- [wails-elm-template](https://github.com/benjamin-thomas/wails-elm-template) - Develop your GUI app with functional programming and a **snappy** hot-reload setup :tada: :rocket:
|
||||
|
||||
## Pure JavaScript (Vanilla)
|
||||
|
||||
- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - A template with nothing but just basic JavaScript, HTML, and CSS
|
@ -1,21 +0,0 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Compiling your Project
|
||||
|
||||
From the project directory, run `wails build`. This will compile your project and save the production-ready binary in the `build/bin` directory.
|
||||
|
||||
If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
For more details on compilation options, please refer to the [CLI Reference](../reference/cli.mdx#build).
|
@ -1,16 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Developing your Application
|
||||
|
||||
You can run your application in development mode by running `wails dev` from your project directory. This will do the following things:
|
||||
|
||||
- Build your application and run it
|
||||
- Bind your Go code to the frontend so it can be called from Javascript
|
||||
- Using the power of [vite](https://vitejs.dev/), will watch for modifications in your Go files and rebuild/re-run on change
|
||||
- Sets up a [webserver](http://localhost:34115) that will serve your application over a browser. This allows you to use your favourite browser extensions. You can even call your Go code from the console
|
||||
|
||||
To get started, run `wails dev` in the project directory. More information on this can be found [here](../reference/cli.mdx#dev).
|
||||
|
||||
Coming soon: Tutorial
|
@ -1,130 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Creating a Project
|
||||
|
||||
## Project Generation
|
||||
|
||||
Now that the CLI is installed, you can generate a new project by using the `wails init` command.
|
||||
|
||||
Pick your favourite framework:
|
||||
|
||||
<!-- @formatter:off -->
|
||||
|
||||
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">
|
||||
<a href={"https://vuejs.org/"}>Vue</a>用のJavascriptプロジェクトを生成する場合:<br/><br/>
|
||||
|
||||
wails init -n myproject -t vue
|
||||
|
||||
Typescriptプロジェクトを生成する場合:<br/>
|
||||
|
||||
wails init -n myproject -t vue-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Preact">
|
||||
<a href={"https://preactjs.com/"}>Preact</a>用のJavascriptプロジェクトを生成する場合:<br/><br/>
|
||||
|
||||
wails init -n myproject -t preact
|
||||
|
||||
Typescriptプロジェクトを生成する場合:<br/>
|
||||
|
||||
wails init -n myproject -t preact-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Lit">
|
||||
<a href={"https://lit.dev/"}>Lit</a>用のJavascriptプロジェクトを生成する場合:<br/><br/>
|
||||
|
||||
wails init -n myproject -t lit
|
||||
|
||||
Typescriptプロジェクトを生成する場合:<br/>
|
||||
|
||||
wails init -n myproject -t lit-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Vanilla">
|
||||
Vanilla用のJavascriptプロジェクトを生成する場合:<br/><br/>
|
||||
|
||||
wails init -n myproject -t vanilla
|
||||
|
||||
Typescriptプロジェクトを生成する場合:<br/>
|
||||
|
||||
wails init -n myproject -t vanilla-ts
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<!-- @formatter:on -->
|
||||
|
||||
<hr />
|
||||
|
||||
There are also [community templates](../community/templates.mdx) available that offer different capabilities and frameworks.
|
||||
|
||||
To see the other options available, you can run `wails init -help`. More details can be found in the [CLI Reference](../reference/cli.mdx#init).
|
||||
|
||||
## Project Layout
|
||||
|
||||
Wails projects have the following layout:
|
||||
|
||||
```
|
||||
.
|
||||
├── build/
|
||||
│ ├── appicon.png
|
||||
│ ├── darwin/
|
||||
│ └── windows/
|
||||
├── frontend/
|
||||
├── go.mod
|
||||
├── go.sum
|
||||
├── main.go
|
||||
└── wails.json
|
||||
```
|
||||
|
||||
### Project structure rundown
|
||||
|
||||
- `/main.go` - The main application
|
||||
- `/frontend/` - Frontend project files
|
||||
- `/build/` - Project build directory
|
||||
- `/build/appicon.png` - The application icon
|
||||
- `/build/darwin/` - Mac specific project files
|
||||
- `/build/windows/` - Windows specific project files
|
||||
- `/wails.json` - The project configuration
|
||||
- `/go.mod` - Go module file
|
||||
- `/go.sum` - Go module checksum file
|
||||
|
||||
The `frontend` directory has nothing specific to Wails and can be any frontend project of your choosing.
|
||||
|
||||
The `build` directory is used during the build process. These files may be updated to customise your builds. If files are removed from the build directory, default versions will be regenerated.
|
||||
|
||||
The default module name in `go.mod` is "changeme". You should change this to something more appropriate.
|
@ -1,90 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
## Supported Platforms
|
||||
|
||||
- Windows 10/11 AMD64/ARM64
|
||||
- MacOS 10.13+ AMD64
|
||||
- MacOS 11.0+ ARM64
|
||||
- Linux AMD64/ARM64
|
||||
|
||||
## Dependencies
|
||||
|
||||
Wails has a number of common dependencies that are required before installation:
|
||||
|
||||
- Go 1.17+
|
||||
- NPM (Node 15+)
|
||||
|
||||
### Go
|
||||
|
||||
Download Go from the [Go Downloads Page](https://go.dev/doc/install).
|
||||
|
||||
Ensure that you follow the official [Go installation instructions](https://go.dev/doc/install). You will also need to ensure that your `PATH` environment variable also includes the path to your `~/go/bin` directory. Restart your terminal and do the following checks:
|
||||
|
||||
- Check Go is installed correctly: `go version`
|
||||
- Check "~/go/bin" is in your PATH variable: `echo $PATH | grep go/bin`
|
||||
|
||||
### NPM
|
||||
|
||||
Download NPM from the [Node Downloads Page](https://nodejs.org/en/download/). It is best to use the latest release as that is what we generally test against.
|
||||
|
||||
Run `npm --version` to verify.
|
||||
|
||||
## Platform Specific Dependencies
|
||||
|
||||
You will also need to install platform specific dependencies:
|
||||
|
||||
<!-- @formatter:off -->
|
||||
|
||||
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を使用するには、xcodeコマンドラインツールがインストールされている必要があります。 This can be done by running: <br/>
|
||||
<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 (see below).
|
||||
</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>
|
||||
|
||||
<!-- @formatter:on -->
|
||||
|
||||
## Optional Dependencies
|
||||
|
||||
- [UPX](https://upx.github.io/) for compressing your applications.
|
||||
|
||||
## Installing Wails
|
||||
|
||||
Run `go install github.com/wailsapp/wails/v2/cmd/wails@latest` to install the Wails CLI.
|
||||
|
||||
## System Check
|
||||
|
||||
Running `wails doctor` will check if you have the correct dependencies installed. If not, it will advise on what is missing and help on how to rectify any problems.
|
||||
|
||||
## The `wails` command appears to be missing?
|
||||
|
||||
If your system is reporting that the `wails` command is missing, make sure you have followed the Go installation guide correctly. Normally, it means that the `go/bin` directory in your User's home directory is not in the `PATH` environment variable. You will also normally need to close and reopen any open command prompts so that changes to the environment made by the installer are reflected at the command prompt.
|
@ -1,194 +0,0 @@
|
||||
# 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.
|
@ -1,55 +0,0 @@
|
||||
# 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.
|
@ -1,126 +0,0 @@
|
||||
# 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 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:
|
||||
|
||||
<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:
|
||||
|
||||
<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:
|
||||
|
||||
<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.
|
||||
:::
|
@ -1,84 +0,0 @@
|
||||
# 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 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.
|
||||
:::
|
@ -1,75 +0,0 @@
|
||||
# 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:
|
||||
|
||||
| Value | 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>
|
||||
```
|
@ -1,113 +0,0 @@
|
||||
# IDEs
|
||||
|
||||
Wails aims to provide a great development experience. To that aim, we now support generating IDE specific configuration to provide smoother project setup.
|
||||
|
||||
Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but aim to support other IDEs such as Goland.
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={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.
|
||||
|
||||
:::
|
@ -1,101 +0,0 @@
|
||||
# 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!
|
||||
:::
|
@ -1,187 +0,0 @@
|
||||
# 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 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>
|
@ -1,25 +0,0 @@
|
||||
# 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
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user