waveterm/wails
0
0
Fork 0
mirror of https://github.com/wavetermdev/wails.git synced 2026-08-05 13:53:43 -07:00
Code Issues Packages Projects Releases Wiki Activity
Files
gh-pages
wails/development/introduction/index.html
T
 398ed6bd3e Deployed 9c4b412 with MkDocs version: 1.6.0
2024-05-13 20:40:14 +00:00

1469 lines
45 KiB
HTML
Raw Permalink Blame History

<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="The Wails Project - Build beautiful cross-platform applications using Go">
<meta name="author" content="Lea Anthony">
<link rel="canonical" href="https://v3alpha.wails.io/development/introduction/">
<link rel="prev" href="../../API/mainthread/">
<link rel="next" href="../status/">
<link rel="alternate" href="./" hreflang="en">
<link rel="alternate" href="../../cy/development/introduction/" hreflang="cy">
<link rel="icon" href="/favicon.ico">
<meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.22+insiders-4.53.8">
<title>Introduction - alpha</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.46e89654.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#introduction" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
<aside class="md-banner">
<div class="md-banner__inner md-grid md-typeset">
<div class="announcement__translation">
Translations are autogenerated. Please report mistakes.
</div>
</div>
</aside>
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="alpha" class="md-header__button md-logo" aria-label="alpha" data-md-component="logo">
<img src="../../assets/images/wails-logo-horizontal-dark.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
alpha
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Introduction
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3Z"/></svg>
</label>
</form>
<script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<div class="md-header__option">
<div class="md-select">
<button class="md-header__button md-icon" aria-label="Select language">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7 1.62-4.33L19.12 17h-3.24Z"/></svg>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
<li class="md-select__item">
<a href="./" hreflang="en" class="md-select__link">
English
</a>
</li>
<li class="md-select__item">
<a href="../../cy/development/introduction/" hreflang="cy" class="md-select__link">
Cymraeg
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/wailsapp/wails" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../getting-started/installation/" class="md-tabs__link">
Getting started
</a>
</li>
<li class="md-tabs__item">
<a href="../../getting-started/feedback/" class="md-tabs__link">
Feedback
</a>
</li>
<li class="md-tabs__item">
<a href="../../whats-new/" class="md-tabs__link">
What's New in v3?
</a>
</li>
<li class="md-tabs__item">
<a href="../../API/application/" class="md-tabs__link">
API
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="./" class="md-tabs__link">
Development
</a>
</li>
<li class="md-tabs__item">
<a href="../../roadmap/" class="md-tabs__link">
Roadmap
</a>
</li>
<li class="md-tabs__item">
<a href="../../changelog/" class="md-tabs__link">
Change Log
</a>
</li>
<li class="md-tabs__item">
<a href="https://github.com/sponsors/leaanthony" class="md-tabs__link">
Sponsor❤️
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="alpha" class="md-nav__button md-logo" aria-label="alpha" data-md-component="logo">
<img src="../../assets/images/wails-logo-horizontal-dark.svg" alt="logo">
</a>
alpha
</label>
<div class="md-nav__source">
<a href="https://github.com/wailsapp/wails" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../getting-started/installation/" class="md-nav__link">
<span class="md-ellipsis">
Getting started
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../getting-started/feedback/" class="md-nav__link">
<span class="md-ellipsis">
Feedback
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../whats-new/" class="md-nav__link">
<span class="md-ellipsis">
What's New in v3?
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../API/application/" class="md-nav__link">
<span class="md-ellipsis">
API
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Introduction
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Introduction
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#getting-started" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#building" class="md-nav__link">
<span class="md-ellipsis">
Building
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#project-layout" class="md-nav__link">
<span class="md-ellipsis">
Project layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#development" class="md-nav__link">
<span class="md-ellipsis">
Development
</span>
</a>
<nav class="md-nav" aria-label="Development">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#alpha-todo-list" class="md-nav__link">
<span class="md-ellipsis">
Alpha Todo List
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#adding-window-functionality" class="md-nav__link">
<span class="md-ellipsis">
Adding window functionality
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#updating-the-runtime" class="md-nav__link">
<span class="md-ellipsis">
Updating the runtime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#events" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#plugins" class="md-nav__link">
<span class="md-ellipsis">
Plugins
</span>
</a>
<nav class="md-nav" aria-label="Plugins">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#creating-a-plugin" class="md-nav__link">
<span class="md-ellipsis">
Creating a plugin
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#tasks" class="md-nav__link">
<span class="md-ellipsis">
Tasks
</span>
</a>
<nav class="md-nav" aria-label="Tasks">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#upgrading-taskfile" class="md-nav__link">
<span class="md-ellipsis">
Upgrading Taskfile
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#opening-a-pr" class="md-nav__link">
<span class="md-ellipsis">
Opening a PR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#misc-tasks" class="md-nav__link">
<span class="md-ellipsis">
Misc Tasks
</span>
</a>
<nav class="md-nav" aria-label="Misc Tasks">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#upgrading-taskfile_1" class="md-nav__link">
<span class="md-ellipsis">
Upgrading Taskfile
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../status/" class="md-nav__link">
<span class="md-ellipsis">
Status
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../changes/" class="md-nav__link">
<span class="md-ellipsis">
v3 Changes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../roadmap/" class="md-nav__link">
<span class="md-ellipsis">
Roadmap
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../changelog/" class="md-nav__link">
<span class="md-ellipsis">
Change Log
</span>
</a>
</li>
<li class="md-nav__item">
<a href="https://github.com/sponsors/leaanthony" class="md-nav__link">
<span class="md-ellipsis">
Sponsor❤️
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<nav class="md-path" aria-label="Navigation" >
<ol class="md-path__list">
<li class="md-path__item">
<a href="../.." class="md-path__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-path__item">
<a href="./" class="md-path__link">
<span class="md-ellipsis">
Development
</span>
</a>
</li>
</ol>
</nav>
<article class="md-content__inner md-typeset">
<a href="https://github.com/wailsapp/wails/edit/v3-alpha/mkdocs-website/docs/en/development/introduction.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
</a>
<h1 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h1>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>This guide is a work in progress.</p>
</div>
<p>Thanks for wanting to help out with development of Wails! This guide will help
you get started.</p>
<h2 id="getting-started">Getting Started<a class="headerlink" href="#getting-started" title="Permanent link">#</a></h2>
<ul>
<li>Git clone this repository. Checkout the <code>v3-alpha</code> branch.</li>
<li>
<p>Install the CLI: <code>cd v3/cmd/wails3 &amp;&amp; go install</code></p>
</li>
<li>
<p>Optional: If you are wanting to use the build system to build frontend code,
you will need to install <a href="https://nodejs.org/en/download">npm</a>.</p>
</li>
</ul>
<h2 id="building">Building<a class="headerlink" href="#building" title="Permanent link">#</a></h2>
<p>For simple programs, you can use the standard <code>go build</code> command. It's also
possible to use <code>go run</code>.</p>
<p>Wails also comes with a build system that can be used to build more complex
projects. It utilises the awesome <a href="https://taskfile.dev">Task</a> build system. For
more information, check out the task homepage or run <code>wails task --help</code>.</p>
<h2 id="project-layout">Project layout<a class="headerlink" href="#project-layout" title="Permanent link">#</a></h2>
<p>The project has the following structure:</p>
<div class="highlight"><pre><span></span><code>```
v3
├── cmd/wails3 // CLI
├── examples // Examples of Wails apps
├── internal // Internal packages
| ├── runtime // The Wails JS runtime
| └── templates // The supported project templates
├── pkg
| ├── application // The core Wails library
| └── events // The event definitions
| └── mac // macOS specific code used by plugins
| └── w32 // Windows specific code
├── plugins // Supported plugins
├── tasks // General tasks
└── Taskfile.yaml // Development tasks configuration
```
</code></pre></div>
<h2 id="development">Development<a class="headerlink" href="#development" title="Permanent link">#</a></h2>
<h3 id="alpha-todo-list">Alpha Todo List<a class="headerlink" href="#alpha-todo-list" title="Permanent link">#</a></h3>
<p>We are currently tracking known issues and tasks in the
<a href="https://github.com/orgs/wailsapp/projects/6">Alpha Todo List</a>. If you want to
help out, please check this list and follow the instructions in the
<a href="../../getting-started/feedback/">Feedback</a> page.</p>
<h3 id="adding-window-functionality">Adding window functionality<a class="headerlink" href="#adding-window-functionality" title="Permanent link">#</a></h3>
<p>The preferred way to add window functionality is to add a new function to the
<code>pkg/application/webview_window.go</code> file. This should implement all the
functionality required for all platforms. Any platform specific code should be
called via a <code>webviewWindowImpl</code> interface method. This interface is implemented
by each of the target platforms to provide the platform specific functionality.
In some cases, this may do nothing. Once you've added the interface method,
ensure each platform implements it. A good example of this is the <code>SetMinSize</code>
method.</p>
<ul>
<li>Mac: <code>webview_window_darwin.go</code></li>
<li>Windows: <code>webview_window_windows.go</code></li>
<li>Linux: <code>webview_window_linux.go</code></li>
</ul>
<p>Most, if not all, of the platform specific code should be run on the main
thread. To simplify this, there are a number of <code>invokeSync</code> methods defined in
<code>application.go</code>.</p>
<h3 id="updating-the-runtime">Updating the runtime<a class="headerlink" href="#updating-the-runtime" title="Permanent link">#</a></h3>
<p>The runtime is located in <code>v3/internal/runtime</code>. When the runtime is updated,
the following steps need to be taken:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>wails3<span class="w"> </span>task<span class="w"> </span>runtime:build
</code></pre></div>
<h3 id="events">Events<a class="headerlink" href="#events" title="Permanent link">#</a></h3>
<p>Events are defined in <code>v3/pkg/events</code>. When adding a new event, the following
steps need to be taken:</p>
<ul>
<li>Add the event to the <code>events.txt</code> file</li>
<li>Run <code>wails3 task events:generate</code></li>
</ul>
<p>There are a number of types of events: platform specific application and window
events + common events. The common events are useful for cross-platform event
handling, but you aren't limited to the "lowest common denominator". You can use
the platform specific events if you need to.</p>
<p>When adding a common event, ensure that the platform specific events are mapped.
An example of this is in <code>window_webview_darwin.go</code>:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="w"> </span><span class="c1">// Translate ShouldClose to common WindowClosing event</span>
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="w"> </span><span class="nx">w</span><span class="p">.</span><span class="nx">parent</span><span class="p">.</span><span class="nx">On</span><span class="p">(</span><span class="nx">events</span><span class="p">.</span><span class="nx">Mac</span><span class="p">.</span><span class="nx">WindowShouldClose</span><span class="p">,</span><span class="w"> </span><span class="kd">func</span><span class="p">(</span><span class="nx">_</span><span class="w"> </span><span class="o">*</span><span class="nx">WindowEventContext</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="w"> </span><span class="nx">w</span><span class="p">.</span><span class="nx">parent</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="nx">events</span><span class="p">.</span><span class="nx">Common</span><span class="p">.</span><span class="nx">WindowClosing</span><span class="p">)</span>
<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a><span class="w"> </span><span class="p">})</span>
</code></pre></div>
<p>NOTE: We may try to automate this in the future by adding the mapping to the
event definition.</p>
<h3 id="plugins">Plugins<a class="headerlink" href="#plugins" title="Permanent link">#</a></h3>
<p>Plugins are a way to extend the functionality of your Wails application.</p>
<h4 id="creating-a-plugin">Creating a plugin<a class="headerlink" href="#creating-a-plugin" title="Permanent link">#</a></h4>
<p>Plugins are standard Go structure that adhere to the following interface:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="kd">type</span><span class="w"> </span><span class="nx">Plugin</span><span class="w"> </span><span class="kd">interface</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="w"> </span><span class="nx">Name</span><span class="p">()</span><span class="w"> </span><span class="kt">string</span>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="w"> </span><span class="nx">Init</span><span class="p">(</span><span class="o">*</span><span class="nx">application</span><span class="p">.</span><span class="nx">App</span><span class="p">)</span><span class="w"> </span><span class="kt">error</span>
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="w"> </span><span class="nx">Shutdown</span><span class="p">()</span>
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a><span class="w"> </span><span class="nx">CallableByJS</span><span class="p">()</span><span class="w"> </span><span class="p">[]</span><span class="kt">string</span>
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="w"> </span><span class="nx">InjectJS</span><span class="p">()</span><span class="w"> </span><span class="kt">string</span>
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a><span class="p">}</span>
</code></pre></div>
<p>The <code>Name()</code> method returns the name of the plugin. This is used for logging
purposes.</p>
<p>The <code>Init(*application.App) error</code> method is called when the plugin is loaded.
The <code>*application.App</code> parameter is the application that the plugin is being
loaded into. Any errors will prevent the application from starting.</p>
<p>The <code>Shutdown()</code> method is called when the application is shutting down.</p>
<p>The <code>CallableByJS()</code> method returns a list of exported functions that can be
called from the frontend. These method names must exactly match the names of the
methods exported by the plugin.</p>
<p>The <code>InjectJS()</code> method returns JavaScript that should be injected into all
windows as they are created. This is useful for adding custom JavaScript
functions that complement the plugin.</p>
<p>The built-in plugins can be found in the <code>v3/plugins</code> directory. Check them out
for inspiration.</p>
<h2 id="tasks">Tasks<a class="headerlink" href="#tasks" title="Permanent link">#</a></h2>
<p>The Wails CLI uses the <a href="https://taskfile.dev">Task</a> build system. It is imported
as a library and used to run the tasks defined in <code>Taskfile.yaml</code>. The main
interfacing with Task happens in <code>v3/internal/commands/task.go</code>.</p>
<h3 id="upgrading-taskfile">Upgrading Taskfile<a class="headerlink" href="#upgrading-taskfile" title="Permanent link">#</a></h3>
<p>To check if there's an upgrade for Taskfile, run <code>wails3 task -version</code> and
check against the Task website.</p>
<p>To upgrade the version of Taskfile used, run:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a>wails3<span class="w"> </span>task<span class="w"> </span>taskfile:upgrade
</code></pre></div>
<p>If there are incompatibilities then they should appear in the
<code>v3/internal/commands/task.go</code> file.</p>
<p>Usually the best way to fix incompatibilities is to clone the task repo at
<code>https://github.com/go-task/task</code> and look at the git history to determine what
has changed and why.</p>
<p>To check all changes have worked correctly, re-install the CLI and check the
version again:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a>wails3<span class="w"> </span>task<span class="w"> </span>cli:install
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a>wails3<span class="w"> </span>task<span class="w"> </span>-version
</code></pre></div>
<h2 id="opening-a-pr">Opening a PR<a class="headerlink" href="#opening-a-pr" title="Permanent link">#</a></h2>
<p>Make sure that all PRs have a ticket associated with them providing context to
the change. If there is no ticket, please create one first. Ensure that all PRs
have updated the CHANGELOG.md file with the changes made. The CHANGELOG.md file
is located in the <code>mkdocs-website/docs</code> directory.</p>
<h2 id="misc-tasks">Misc Tasks<a class="headerlink" href="#misc-tasks" title="Permanent link">#</a></h2>
<h3 id="upgrading-taskfile_1">Upgrading Taskfile<a class="headerlink" href="#upgrading-taskfile_1" title="Permanent link">#</a></h3>
<p>The Wails CLI uses the <a href="https://taskfile.dev">Task</a> build system. It is imported
as a library and used to run the tasks defined in <code>Taskfile.yaml</code>. The main
interfacing with Task happens in <code>v3/internal/commands/task.go</code>.</p>
<p>To check if there's an upgrade for Taskfile, run <code>wails3 task -version</code> and
check against the Task website.</p>
<p>To upgrade the version of Taskfile used, run:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a>wails3<span class="w"> </span>task<span class="w"> </span>taskfile:upgrade
</code></pre></div>
<p>If there are incompatibilities then they should appear in the
<code>v3/internal/commands/task.go</code> file.</p>
<p>Usually the best way to fix incompatibilities is to clone the task repo at
<code>https://github.com/go-task/task</code> and look at the git history to determine what
has changed and why.</p>
<p>To check all changes have worked correctly, re-install the CLI and check the
version again:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a>wails3<span class="w"> </span>task<span class="w"> </span>cli:install
<a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a>wails3<span class="w"> </span>task<span class="w"> </span>-version
</code></pre></div>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../../API/mainthread/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Main Thread">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Main Thread
</div>
</div>
</a>
<a href="../status/" class="md-footer__link md-footer__link--next" aria-label="Next: Status">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Status
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright © 2023 Lea Anthony
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs Insiders
</a>
</div>
<div class="md-social">
<a href="https://github.com/wailsapp/wails" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/></svg>
</a>
<a href="https://twitter.com/wailsapp" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</a>
<a href="https://discord.gg/JDdSxwjhGf" target="_blank" rel="noopener" title="discord.gg" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541ZM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241Zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241Z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tabs", "navigation.sections", "navigation.expand", "navigation.instant.prefetch", "navigation.top", "navigation.footer", "navigation.path", "navigation.prune", "toc.integrate", "toc.follow", "search.suggest", "search.highlight", "search.share", "content.tabs.link", "content.tabs.annotation", "content.tabs.copy", "content.code.copy", "content.action.edit"], "search": "../../assets/javascripts/workers/search.1e90e0fb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.13690f9d.min.js"></script>
<!-- Extra JavaScript (can't be set in mkdocs.yml due to content hash) -->
<script src="../../assets/javascripts/custom.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink