mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 03:20:09 +08:00
Update website
This commit is contained in:
Lea Anthony
parent
372173664b
commit
2dd964b469
@ -0,0 +1,38 @@
|
||||
{
|
||||
"version.label": {
|
||||
"message": "v2.8.1",
|
||||
"description": "The label for version v2.8.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"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Liens
|
||||
|
||||
Cette page sert de liste pour les liens liés à la communauté. Veuillez soumettre une PR (cliquez sur `Modifier cette page` en bas) pour soumettre des liens.
|
||||
|
||||
## Awesome Wails
|
||||
|
||||
La [liste définitive](https://github.com/wailsapp/awesome-wails) de liens relatifs à Wails.
|
||||
|
||||
## Canaux de support
|
||||
|
||||
- [Serveur Discord Wails](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)
|
||||
|
||||
## Réseaux sociaux
|
||||
|
||||
- [Twitter](https://twitter.com/wailsapp)
|
||||
- [Groupe QQ pour la communauté chinoise de Wails](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - Numéro de groupe : 1067173054
|
||||
|
||||
## Autres tutoriels et articles
|
||||
|
||||
- [Construction d'un Panneau d'Affichage](https://blog.customct.com/building-bulletin-board)
|
||||
@ -0,0 +1,10 @@
|
||||
# BulletinBoard
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/bboard.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
L'application [BulletinBoard](https://github.com/raguay/BulletinBoard) est un panneau de messages versitaux pour les messages statiques ou les boîtes de dialogue pour obtenir des informations de l'utilisateur pour un script. Il a une TUI pour créer de nouvelles boîtes de dialogue qui peuvent être utilisées pour obtenir des informations de l'utilisateur. Son design est de rester en fonctionnement sur votre système et de montrer les informations au besoin, puis de se cacher. J'ai un processus pour surveiller un fichier sur mon système et pour envoyer le contenu à BulletinBoard une fois modifié. Cela fonctionne très bien avec mes workflows. Il y a auss un [workflow Alfred](https://github.com/raguay/MyAlfred/blob/master/Alfred%205/EmailIt.alfredworkflow) pour envoyer les informations au programme. Le workflow fonctionne aussi avec [EmailIt](https://github.com/raguay/EmailIt).
|
||||
@ -0,0 +1,42 @@
|
||||
# CFN Tracker
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/cfntracker.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[CFN Tracker](https://github.com/williamsjokvist/cfn-tracker) - Suivez les
|
||||
matchs en direct de n'importe quel profil Street Fighter 6 ou V CFN. Consultez
|
||||
[le site Web](https://cfn.williamsjokvist.se/) pour commencer.
|
||||
|
||||
## Caractéristiques
|
||||
|
||||
- Suivi des matchs en temps réel
|
||||
- Stockage des journaux de match et des statistiques
|
||||
- Prise en charge de l'affichage des statistiques en direct sur OBS via la
|
||||
source du navigateur
|
||||
- Prise en charge de SF6 et SFV
|
||||
- Possibilité pour les utilisateurs de créer leurs propres thèmes de navigateur
|
||||
OBS avec CSS
|
||||
|
||||
### Technologie majeure utilisée aux côtés de Wails
|
||||
|
||||
- [Tâche](https://github.com/go-task/task) - encapsulation de la CLI Wails pour
|
||||
rendre les commandes courantes faciles à utiliser
|
||||
- [React](https://github.com/facebook/react) - choisi pour son riche écosystème
|
||||
(radix, framer-motion)
|
||||
- [Bun](https://github.com/oven-sh/bun) - utilisé pour sa résolution rapide des
|
||||
dépendances et son temps de construction
|
||||
- [Rod](https://github.com/go-rod/rod) - automatisation du navigateur sans tête
|
||||
pour les modifications d'authentification et d'interrogation
|
||||
- [SQLite](https://github.com/mattn/go-sqlite3) - utilisé pour stocker les
|
||||
correspondances, les sessions et les profils
|
||||
- [Server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) -
|
||||
un flux http pour envoyer des mises à jour de suivi aux sources du navigateur
|
||||
OBS
|
||||
- [i18next](https://github.com/i18next/) - avec connecteur backend pour servir
|
||||
les objets de localisation de la couche Go
|
||||
- [xstate](https://github.com/statelyai/xstate) - machines à états pour le
|
||||
processus d'authentification et le suivi
|
||||
@ -0,0 +1,10 @@
|
||||
# EmailIt
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/emailit.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[EmailIt](https://github.com/raguay/EmailIt/) est un programme Wails 2 qui est un expéditeur de courrier électronique basé sur le markdown uniquement avec neuf blocs-notes, pour manipuler le texte et les modèles. Il a également un terminal pour exécuter des scripts dans EmailIt sur les fichiers de votre système. Les scripts et modèles peuvent être utilisés depuis la ligne de commande elle-même ou avec les extensions Alfred, Keyboard Maestro, Dropzone ou PopClip. Il supporte également les scripts et thèmes téléchargés sous GitHub. La documentation n'est pas complète, mais le programme fonctionne. Il est construit en utilisant Wails2 et Svelte, et le téléchargement est une application macOS universelle.
|
||||
@ -0,0 +1,12 @@
|
||||
# EncryptEasy
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/encrypteasy.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
**[EncryptEasy](https://www.encrypteasy.app) est un outil de chiffrement PGP simple et facile à utiliser, qui gère toutes vos clés et celles de vos contacts. Le chiffrement devrait être simple. Développé avec Wails.**
|
||||
|
||||
Chiffrer les messages à l'aide de PGP est la norme de l'industrie. Tout le monde a une clé privée et publique. Votre clé privée, eh bien, doit être privée afin que vous seul puissiez lire les messages. Votre clé publique est distribuée à toute personne qui veut vous envoyer des messages secrets, chiffrés. Gérer les clés, chiffrer les messages et déchiffrer les messages devrait être une expérience agréable. EncryptEasy a pour but de vous simplifier la tâche.
|
||||
@ -0,0 +1,13 @@
|
||||
# ESP Studio
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/esp-studio.png").default}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[ESP Studio](https://github.com/torabian/esp-studio) - Logiciels multiplateformes, de bureau, cloud et embarqués
|
||||
pour contrôler les appareils ESP/Arduino et créer des flux de travail et des systèmes de contrôle IOT complexes
|
||||
@ -0,0 +1,16 @@
|
||||
# Utilitaire d'exportation FileHound
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/filehound.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[L'utilitaire d'exportation FileHound](https://www.filehound.co.uk/) est une plate-forme de gestion de documents cloud conçue pour la conservation sécurisée de fichiers, l'automatisation des processus métier et les capacités de SmartCapture.
|
||||
|
||||
L'utilitaire d'exportation FileHound permet aux administrateurs FileHound d'exécuter des tâches sécurisées d'extraction de documents et de données à des fins alternatives de sauvegarde et de récupération. Cette application téléchargera tous les documents et/ou métadonnées enregistrés dans FileHound en fonction des filtres que vous avez choisis. Les métadonnées seront exportées dans les formats JSON et XML.
|
||||
|
||||
Backend construit avec: Go 1.15 Wails 1.11.0 go-sqlite3 1.14.6 go-linq 3.2
|
||||
|
||||
Frontend avec: Vue 2.6.11 Vuex 3.4.0 TypeScript Tailwind 1.9.6
|
||||
@ -0,0 +1,10 @@
|
||||
# hiposter
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/hiposter.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[hiposter](https://github.com/obity/hiposter) est un outil client de test d'API http simple et efficace. Basé sur les Wails, Go et sveltejs.
|
||||
@ -0,0 +1,14 @@
|
||||
# Minecraft Updater
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={
|
||||
require("@site/static/img/showcase/minecraft-mod-updater.webp").default
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater) est un outil utilitaire pour mettre à jour et synchroniser les mods Minecraft pour votre base d'utilisateurs. Il a été conçu en utilisant Wails2 et React avec [antd](https://ant.design/) comme framework frontend.
|
||||
@ -0,0 +1,14 @@
|
||||
# Modal File Manager
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/modalfilemanager.webp").default}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Modal File Manager](https://github.com/raguay/ModalFileManager) est un gestionnaire de fichiers à double volet utilisant des technologies web. Mon design original était basé sur NW.js et peut être trouvé [ici](https://github.com/raguay/ModalFileManager-NWjs). Cette version utilise le même code frontend basé sur Svelte (mais il a été grandement modifié depuis le départ de NW.js), mais le backend est une implémentation de [Wails 2](https://wails.io/). En utilisant cette implémentation, je n'utilise plus la ligne de commande `rm`, `cp`, etc. , mais une installation de git doit être présente sur le système pour télécharger des thèmes et des extensions. Il est entièrement codé en utilisant Go et fonctionne beaucoup plus rapidement que les versions précédentes.
|
||||
|
||||
Ce gestionnaire de fichiers est conçu autour du même principe que Vim: l'état est contrôlé par des actions via le clavier. Le nombre d'états n'est pas fixe, mais très programmable. Par conséquent, un nombre infini de configurations de clavier qui peuvent être créées et utilisées. C'est la principale différence par rapport aux autres gestionnaires de fichiers. Il y a des thèmes et des extensions disponibles à télécharger à partir de GitHub.
|
||||
@ -0,0 +1,10 @@
|
||||
# Molley Wallet
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/mollywallet.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Molly Wallet](https://github.com/grvlle/constellation_wallet/) le portefeuille officiel $DAG du Constellation Network. Cela permettra aux utilisateurs d'interagir avec le réseau Hypergraph de différentes manières, sans se limiter à la production de transactions en $DAG.
|
||||
@ -0,0 +1,14 @@
|
||||
# October
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/october.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Octobre](https://october.utf9k.net) est une petite application Wails qui rend vraiment facile d'extraire les surlignements de [Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader) puis de les transférer vers [Readwise](https://readwise.io).
|
||||
|
||||
Il a une taille relativement petite avec toutes les versions de la plate-forme pesant en moins de 10 Mo, et c'est sans activer la [compression UPX](https://upx.github.io/)!
|
||||
|
||||
En revanche, les précédentes tentatives de l'auteur avec Electron ont rapidement gonflé à plusieurs centaines de mégaoctets.
|
||||
@ -0,0 +1,10 @@
|
||||
# Optimus
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/optimus.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Optimus](https://github.com/splode/optimus) est une application d'optimisation d'image de bureau. Il supporte la conversion et la compression entre les formats d’images WebP, JPEG et PNG.
|
||||
@ -0,0 +1,10 @@
|
||||
# Portfall
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/portfall.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Portfall](https://github.com/rekon-oss/portfall) - Un portail de redirection de port k8 pour un accès facile à toutes les interfaces de votre instance
|
||||
@ -0,0 +1,12 @@
|
||||
# Restic Browser
|
||||
|
||||
```mdx-code-block
|
||||
<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) - Une interface de sauvegarde simple et multiplateforme [restic](https://github.com/restic/restic) pour la navigation et la restauration de dépôts restic.
|
||||
@ -0,0 +1,21 @@
|
||||
# RiftShare
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/riftshare-main.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
Partage de fichiers facile, sécurisé et gratuit pour tout le monde. Apprenez-en plus sur [Riftshare.app](https://riftshare.app)
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
- Partage facile et sécurisé de fichiers entre ordinateurs à la fois sur le réseau local et via Internet
|
||||
- Supporte l'envoi de fichiers ou de répertoires de manière sécurisée par le protocole [magic wormhole](https://magic-wormhole.readthedocs.io/en/latest/)
|
||||
- Compatible avec toutes les autres applications utilisant magic wormhole (magic-wormhole or wormhole-william CLI, wormhole-gui, etc.)
|
||||
- Compression automatique de plusieurs fichiers sélectionnés à envoyer en même temps
|
||||
- Animations complètes, barre de progression et support d'annulation pour l'envoi et la réception
|
||||
- Sélection de fichier natif au système d'exploitation
|
||||
- Ouvrir les fichiers en un seul clic une fois reçus
|
||||
- Mise à jour automatique - ne vous inquiétez pas d'avoir la dernière version!
|
||||
@ -0,0 +1,10 @@
|
||||
# ScriptBar
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/scriptbar.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[ScriptBar](https://GitHub.com/raguay/ScriptBarApp) est un programme pour afficher la sortie de scripts ou d'un serveur [Node-Red](https://nodered.org). Il exécute des scripts définis dans le programme EmailIt et affiche la sortie. Des scripts de xBar ou TextBar peuvent être utilisés. Actuellement sur les scripts TextBar fonctionnent bien. Il affiche également la sortie des scripts sur votre système. ScriptBar ne les met pas dans la barre de menus, mais les a tous dans une fenêtre convenable pour une visualisation facile. Vous pouvez avoir plusieurs onglets pour voir plusieurs choses différentes. Vous pouvez également conserver les liens vers vos sites Web les plus visités.
|
||||
@ -0,0 +1,10 @@
|
||||
# Surge
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/surge.png").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Surge](https://getsurge.io/) est une application de partage de fichiers p2p conçue pour utiliser les technologies blockchain afin d'activer les transferts de fichiers 100 % anonymes. Surge est chiffré de bout en bout, décentralisé et open source.
|
||||
@ -0,0 +1,11 @@
|
||||
# Tiny RDM
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/tiny-rdm1.webp").default} />
|
||||
<img src={require("@site/static/img/showcase/tiny-rdm2.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
The [Tiny RDM](https://redis.tinycraft.cc/) application is an open-source, modern lightweight Redis GUI. It has a beautful UI, intuitive Redis database management, and compatible with Windows, Mac, and Linux. It provides visual key-value data operations, supports various data decoding and viewing options, built-in console for executing commands, slow log queries and more.
|
||||
@ -0,0 +1,10 @@
|
||||
# Wally
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/wally.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Wally](https://ergodox-ez.com/pages/wally) est le flasheur officiel du firmware pour les claviers [Ergodox](https://ergodox-ez.com/). C'est un excellent exemple de ce que vous pouvez réaliser avec Wails : la capacité de combiner la puissance de Go et les riches outils graphiques du monde du développement web.
|
||||
@ -0,0 +1,19 @@
|
||||
# Lanceur Minecraft pour WarMine
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/warmine1.png").default}
|
||||
/>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/warmine2.png").default}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Lanceur Minecraft pour WarMine](https://warmine.ru/) est une application Wails qui vous permet facilement de rejoindre le serveur de jeu contenant les mods, ainsi que la gestion de vos comptes de jeu.
|
||||
|
||||
Le Launcher télécharge les fichiers du jeu, vérifie leur intégrité et lance le jeu avec une large gamme d'options de personnalisation.
|
||||
|
||||
Le frontend est écrit en Svelte, le lanceur entier tient dans 9Mo et prend en charge Windows 7-11.
|
||||
@ -0,0 +1,10 @@
|
||||
# Wombat
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/wombat.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Wombat](https://github.com/rogchap/wombat) est un client gRPC multi-plateforme.
|
||||
@ -0,0 +1,10 @@
|
||||
# Ytd
|
||||
|
||||
```mdx-code-block
|
||||
<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) est une application pour télécharger des pistes depuis youtube, créer des listes de lecture hors ligne et les partager avec vos amis, vos amis seront en mesure de lire vos playlists ou de les télécharger pour l'écoute hors ligne, a un lecteur intégré.
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Modèles
|
||||
|
||||
Cette page sert de liste pour les modèles supportés par la communauté. Veuillez soumettre une PR (cliquez sur `Modifier cette page` en bas) pour inclure vos modèles. Pour construire votre propre modèle, veuillez consulter le guide [Modèles](../guides/templates.mdx).
|
||||
|
||||
Pour utiliser ces modèles, exécutez `wails init -n "Votre nom de projet" -t [le lien ci-dessous[@version]]`
|
||||
|
||||
S'il n'y a pas de suffixe de version, la branche principale du modèle de code sera alors utilisé par défaut. S'il y a un suffixe de version, le modèle de code correspondant au tag de cette version sera utilisé.
|
||||
|
||||
Exemple : `wails init -n "Votre nom de projet" -t https://github.com/misitebao/wails-template-vue`
|
||||
|
||||
:::warning Attention
|
||||
|
||||
**Le projet Wails n'entretient pas, et n'est pas responsable des modèles de tierces parties!**
|
||||
|
||||
Si vous n'êtes pas sûr d'un modèle, inspectez `package.json` et `wails.json` pour savoir quels scripts sont exécutés et quels paquets sont installés.
|
||||
|
||||
:::
|
||||
|
||||
## Vue
|
||||
|
||||
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - Modèle de Wails basé sur Vue (TypeScript intégré, thème sombre, internationalisation, routage de page unique, TailwindCSS)
|
||||
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - Vue 3 TypeScript avec Vite (et instructions pour ajouter des fonctionnalités)
|
||||
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - Vue 3 TypeScript avec Vite, Vuex, Vue Router, Sass, et ESLint + Prettier
|
||||
- [wails-template-quasar-js](https://github.com/sgosiaco/wails-template-quasar-js) - Un modèle utilisant JavaScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier)
|
||||
- [wails-template-quasar-ts](https://github.com/sgosiaco/wails-template-quasar-ts) - Un modèle utilisant TypeScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier, Composition API avec <script setup>)
|
||||
- [wails-template-naive](https://github.com/tk103331/wails-template-naive) - Modèle Wails basé sur Naive UI (Librairie de composants Vue 3)
|
||||
|
||||
## Angular
|
||||
|
||||
- [wails-template-angular](https://github.com/mateothegreat/wails-template-angular) - Modèle Angular 15+ prêt à être utilisé en production.
|
||||
- [wails-angular-template](https://github.com/TAINCER/wails-angular-template) - Angular avec TypeScript, Sass, rechargement à chaud, découpage dynamique de code et i18n
|
||||
|
||||
## React
|
||||
|
||||
- [wails-react-template](https://github.com/AlienRecall/wails-react-template) - Un modèle utilisant reactjs
|
||||
- [wails-react-template](https://github.com/flin7/wails-react-template) - Un modèle minimal pour React qui supporte le développement en direct
|
||||
- [wails-template-nextjs](https://github.com/LGiki/wails-template-nextjs) - Un modèle utilisant Next.js et TypeScript
|
||||
- [wails-vite-react-ts-tailwind-template](https://github.com/hotafrika/wails-vite-react-ts-tailwind-template) - Un modèle pour React + TypeScript + Vite + TailwindCSS
|
||||
- [wails-vite-react-ts-tailwind-shadcnui-template](https://github.com/Mahcks/wails-vite-react-tailwind-shadcnui-ts) - Un modèle avec Vite, React, TypeScript, TailwindCSS, et shadcn/ui
|
||||
|
||||
## Svelte
|
||||
|
||||
- [wails-svelte-template](https://github.com/raitonoberu/wails-svelte-template) - Un modèle utilisant Svelte
|
||||
- [wails-vite-svelte-template](https://github.com/BillBuilt/wails-vite-svelte-template) - Un modèle utilisant Svelte et Vite
|
||||
- [wails-vite-svelte-tailwind-template](https://github.com/BillBuilt/wails-vite-svelte-tailwind-template) - Un modèle utilisant Svelte et Vite avec TailwindCSS v3
|
||||
- [wails-svelte-tailwind-vite-template](https://github.com/PylotLight/wails-vite-svelte-tailwind-template/tree/master) - Un modèle mis à jour en utilisant Svelte v4.2.0 et Vite avec TailwindCSS v3.3.3
|
||||
- [wails-sveltekit-template](https://github.com/h8gi/wails-sveltekit-template) - Un modèle utilisant SvelteKit
|
||||
|
||||
## Solid
|
||||
|
||||
- [wails-template-vite-solid-ts](https://github.com/xijaja/wails-template-solid-ts) - Un modèle utilisant Solid + Ts + Vite
|
||||
- [wails-template-vite-solid-ts](https://github.com/xijaja/wails-template-solid-js) - Un modèle utilisant Solid + Js + Vite
|
||||
|
||||
## Elm
|
||||
|
||||
- [wails-elm-template](https://github.com/benjamin-thomas/wails-elm-template) - Développez votre application GUI avec de la programmation fonctionnelle et une configuration de développement en direct :tada: :rocket:
|
||||
- [wails-template-elm-tailwind](https://github.com/rnice01/wails-template-elm-tailwind) - Combine les puissances :muscle: d'Elm + Tailwind CSS + Wails ! Rechargement automatique pris en charge.
|
||||
|
||||
## HTMX
|
||||
|
||||
- [wails-htmx-templ-chi-tailwind](https://github.com/PylotLight/wails-hmtx-templ-template) - Utilisez une combinaison unique de htmx pour interactivité, et de templ pour créer des composants et des formes
|
||||
|
||||
## Pure JavaScript (Vanilla)
|
||||
|
||||
- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - Un modèle avec rien que du JavaScript, du HTML et du CSS de base
|
||||
@ -0,0 +1,22 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Compiler votre projet
|
||||
|
||||
À partir du répertoire du projet, exécutez `wails build`. Cela compilera votre projet et sauvegardera le binaire prêt à la production dans le répertoire `build/bin`.
|
||||
|
||||
Si vous exécutez le binaire, vous devriez voir l'application par défaut :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
Pour plus de détails sur les options de compilation, veuillez vous référer à la [documentation du CLI](../reference/cli.mdx#build).
|
||||
@ -0,0 +1,16 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Développez votre application
|
||||
|
||||
Vous pouvez exécuter votre application en mode développement en exécutant `wails dev` à partir du répertoire de votre projet. Cela fera les choses suivantes :
|
||||
|
||||
- Construire votre application et l'exécuter
|
||||
- Lier votre code Go au frontend pour qu'il puisse être appelé à partir de JavaScript
|
||||
- En utilisant la puissance de [Vite](https://vitejs.dev/), surveillera les modifications dans vos fichiers Go et reconstruira / ré-exécutera en cas de changement
|
||||
- Mettra en place un [serveur web](http://localhost:34115) qui servira votre application via un navigateur. Cela vous permet d'utiliser les extensions de votre navigateur préféré. Vous pouvez même appeler votre code Go depuis la console
|
||||
|
||||
Pour commencer, exécutez `wails dev` dans le répertoire du projet. Plus d'informations à ce sujet peuvent être trouvées [ici](../reference/cli.mdx#dev).
|
||||
|
||||
Prochainement : Tutoriel
|
||||
@ -0,0 +1,130 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Créer un projet
|
||||
|
||||
## Génération de projet
|
||||
|
||||
Maintenant que le CLI est installé, vous pouvez générer un nouveau projet en utilisant la commande `wails init`.
|
||||
|
||||
Choisissez votre framework favori :
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
|
||||
<Tabs
|
||||
defaultValue="Svelte"
|
||||
values={[
|
||||
{label: "Svelte", value: "Svelte"},
|
||||
{label: "React", value: "React"},
|
||||
{label: "Vue", value: "Vue"},
|
||||
{label: "Preact", value: "Preact"},
|
||||
{label: "Lit", value: "Lit"},
|
||||
{label: "Vanilla", value: "Vanilla"},
|
||||
]}
|
||||
>
|
||||
<TabItem value="Svelte">
|
||||
Générer un projet <a href={"https://svelte.dev/"}>Svelte</a> utilisant JavaScript avec:<br/><br/>
|
||||
|
||||
wails init -n myproject -t svelte
|
||||
|
||||
Si vous préférez utiliser TypeScript:<br/>
|
||||
|
||||
wails init -n myproject -t svelte-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="React">
|
||||
Générer un projet <a href={"https://reactjs.org/"}>React</a> utilisant JavaScript avec :<br/><br/>
|
||||
|
||||
wails init -n myproject -t react
|
||||
|
||||
Si vous préférez utiliser TypeScript:<br/>
|
||||
|
||||
wails init -n myproject -t react-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Vue">
|
||||
Générer un projet <a href={"https://vuejs.org/"}>Vue</a> utilisant JavaScript avec:<br/><br/>
|
||||
|
||||
wails init -n myproject -t vue
|
||||
|
||||
Si vous préférez TypeScript:<br/>
|
||||
|
||||
wails init -n myproject -t vue-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Preact">
|
||||
Générer un projet <a href={"https://preactjs.com/"}>Preact</a> utilisant JavaScript avec:<br/><br/>
|
||||
|
||||
wails init -n myproject -t preact
|
||||
|
||||
Si vous préférez TypeScript:<br/>
|
||||
|
||||
wails init -n myproject -t preact-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Lit">
|
||||
Générer un projet <a href={"https://lit.dev/"}>Lit</a> utilisant JavaScript avec:<br/><br/>
|
||||
|
||||
wails init -n myproject -t lit
|
||||
|
||||
Si vous préférez TypeScript:<br/>
|
||||
|
||||
wails init -n myproject -t lit-ts
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="Vanilla">
|
||||
Générer un projet Vanilla utilisant JavaScript avec :<br/><br/>
|
||||
|
||||
wails init -n myproject -t vanilla
|
||||
|
||||
Si vous préférez TypeScript:<br/>
|
||||
|
||||
wails init -n myproject -t vanilla-ts
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
<hr />
|
||||
|
||||
Il y a aussi [des modèles créés par la communauté](../community/templates.mdx) qui sont disponibles et qui offrent différentes possibilités.
|
||||
|
||||
Pour voir les autres options disponibles, vous pouvez exécuter `wails init -help`. Plus de détails peuvent être trouvés dans la [documentation du CLI](../reference/cli.mdx#init).
|
||||
|
||||
## Structure du projet
|
||||
|
||||
Les projets Wails ont la structure suivante:
|
||||
|
||||
```
|
||||
.
|
||||
├── build/
|
||||
│ ├── appicon.png
|
||||
│ ├── darwin/
|
||||
│ └── windows/
|
||||
├── frontend/
|
||||
├── go.mod
|
||||
├── go.sum
|
||||
├── main.go
|
||||
└── wails.json
|
||||
```
|
||||
|
||||
### Récapitulatif de la structure du projet
|
||||
|
||||
- `/main.go` - L'application principale
|
||||
- `/frontend/` - Fichiers de la partie frontend
|
||||
- `/build/` - Répertoire de construction du projet
|
||||
- `/build/appicon.png` - L'icône de l'application
|
||||
- `/build/darwin/` - Fichiers spécifiques pour Mac
|
||||
- `/build/windows/` - Fichiers spécifiques pour Windows
|
||||
- `/wails.json` - La configuration du projet
|
||||
- `/go.mod` - Le fichier du module Go
|
||||
- `/go.sum` - Le checksum du fichier du module Go
|
||||
|
||||
Le répertoire `frontend` n'a rien de spécifique à Wails et n'importe quel outil de frontend peut être utilisé.
|
||||
|
||||
Le répertoire `build` est utilisé pendant le processus de compilation. Ces fichiers peuvent être mis à jour pour personnaliser vos builds. Si fichiers sont supprimés du répertoire de compilation, les versions par défaut seront régénérées.
|
||||
|
||||
Le nom du module par défaut dans `go.mod` est "changeme". Vous devriez changer cela pour quelque chose de plus approprié.
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
## Plates-formes Prises en charge
|
||||
|
||||
- Windows 10/11 AMD64/ARM64
|
||||
- MacOS 10.13+ AMD64
|
||||
- MacOS 11.0+ ARM64
|
||||
- Linux AMD64/ARM64
|
||||
|
||||
## Dépendances
|
||||
|
||||
Wails a un certain nombre de dépendances communes qui sont nécessaires avant l'installation :
|
||||
|
||||
- Go 1.18+
|
||||
- NPM (Node 15+)
|
||||
|
||||
### Go
|
||||
|
||||
Télécharger Go à partir de la [Page de téléchargement](https://go.dev/dl/).
|
||||
|
||||
Assurez-vous que vous suivez les instructions officielles de [l'installation de Go](https://go.dev/doc/install). Vous devrez également vous assurer que votre variable d'environnement `PATH` inclut également le chemin vers votre répertoire `~/go/bin`. Redémarrez votre terminal et effectuez les vérifications suivantes :
|
||||
|
||||
- Vérifiez que Go est installé correctement : `go version`
|
||||
- Vérifiez que "~/go/bin" est dans votre variable PATH : `echo $PATH | grep go/bin`
|
||||
|
||||
### NPM
|
||||
|
||||
Téléchargez le NPM à partir de la [page de téléchargement de Node](https://nodejs.org/en/download/). Il est préférable d'utiliser la dernière version car c'est avec celle-là que nous effectuons nos tests.
|
||||
|
||||
Exécutez `npm --version` pour vérifier.
|
||||
|
||||
## Dépendances spécifiques aux plateformes
|
||||
|
||||
Vous devrez également installer des dépendances spécifiques liés à la plateforme que vous utilisez :
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
|
||||
<Tabs
|
||||
defaultValue="Windows"
|
||||
values={[
|
||||
{ label: "Windows", value: "Windows" },
|
||||
{ label: "MacOS", value: "MacOS" },
|
||||
{ label: "Linux", value: "Linux" },
|
||||
]}
|
||||
>
|
||||
<TabItem value="MacOS">
|
||||
Wails a besoin que les outils de command line xocde soient installés. Cela peut être fait
|
||||
en exécutant <code>xcode-select --install</code>.
|
||||
</TabItem>
|
||||
<TabItem value="Windows">
|
||||
Wails a besoin que <a href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a> runtime soit installé. Certaines installations de Windows auront déjà installé cette fonctionnalité. Vous pouvez vérifier en utilisant la commande <code>wails doctor</code>.
|
||||
</TabItem>
|
||||
<TabItem value={"Linux"}>
|
||||
Linux a besoin de <code>gcc</code> comme outil de compilation en plus de <code>libgtk3</code> et <code>libwebkit</code>. Plutôt que de lister une tonne de commandes pour différentes distributions, Wails peut essayer de déterminer ce que sont les commandes d'installation pour votre distribution. Exécutez <code>wails doctor</code> après l'installation pour voir de quelles dépendances vous avez besoin. Si votre gestionnaire de distribution/paquet n'est pas pris en charge, veuillez consulter le guide <a href={"/docs/guides/linux-distro-support"}>Ajouter une distribution Linux</a>.
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
## Dépendances optionnelles
|
||||
|
||||
- [UPX](https://upx.github.io/) pour compresser vos applications.
|
||||
- [NSIS](https://wails.io/docs/guides/windows-installer/) pour générer des installateurs Windows.
|
||||
|
||||
## Installer Wails
|
||||
|
||||
Exécutez `go go install github.com/wailsapp/wails/v2/cmd/wails@latest` pour installer le CLI.
|
||||
|
||||
Note: Si vous obtenez une erreur similaire à ceci:
|
||||
|
||||
```shell
|
||||
....\Go\pkg\mod\github.com\wailsapp\wails\v2@v2.1.0\pkg\templates\templates.go:28:12: pattern all:ides/*: no matching files found
|
||||
```
|
||||
vérifiez que vous avez installé Go 1.18+ :
|
||||
```shell
|
||||
go version
|
||||
```
|
||||
|
||||
## Vérification du système
|
||||
|
||||
Exécuter `wails doctor` qui vérifiera si vous avez les bonnes dépendances installées. Si ce n'est pas le cas, il vous conseillera sur ce qui manque et vous aidera à corriger tout problème.
|
||||
|
||||
## La commande `wails` semble manquer ?
|
||||
|
||||
Si votre système signale que la commande `wails` est manquante, assurez-vous que vous avez suivi le guide d'installation correctement. Normalement, cela signifie que le répertoire `go/bin` du répertoire racine de votre utilisateur n'est pas dans la variable d'environnement `PATH` . Vous devrez également normalement fermer et réouvrir toutes les commandes ouvertes afin que les modifications apportées à l'environnement par l'installateur soient reflétées dans l'invite de commande.
|
||||
@ -0,0 +1,14 @@
|
||||
# Angular
|
||||
|
||||
Bien que Wails n'ait pas de modèle Angular, il est possible d'utiliser Angular avec Wails.
|
||||
|
||||
## Dev Mode
|
||||
|
||||
Pour que le mode développeur fonctionne avec Angular, vous devez ajouter ce qui suit à votre fichier `wails.json`:
|
||||
|
||||
```json
|
||||
"frontend:build": "npx ng build",
|
||||
"frontend:install": "npm install",
|
||||
"frontend:dev:watcher": "npx ng serve",
|
||||
"frontend:dev:serverUrl": "http://localhost:4200",
|
||||
```
|
||||
@ -0,0 +1,215 @@
|
||||
# Développement d'applications
|
||||
|
||||
Il n'y a pas de règles gravées dans le marbre pour le développement d'applications avec Wails, mais il y a quelques lignes directrices de base.
|
||||
|
||||
## Configuration de l'application
|
||||
|
||||
Le modèle utilisé par défaut défini que `main.go` est utilisé pour configurer et démarrer l'application, tandis que `app.go` est utilisé pour définir la logique de l'application.
|
||||
|
||||
Le fichier `app.go` va définir une structure qui a 2 méthodes qui agissent comme crochets dans l'application principale:
|
||||
|
||||
```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) {
|
||||
}
|
||||
```
|
||||
|
||||
- La méthode startup est appelée d-s que Wails a donné les ressources nécessaires et qu'il est dans un bon état pour créer les ressources, mettre en place les event listeners et tout ce dont l'application peut avoir besoin pour démarrer. Il est donné un `context.Context` qui est généralement sauvegardé dans un champ struct. Ce contexte est nécessaire pour appeler le [runtime](../reference/runtime/intro.mdx). Si cette méthode renvoie une erreur, l'application se fermera. En mode développement, l'erreur sera affichée dans la console.
|
||||
|
||||
- La méthode d'arrêt sera appelée par Wails à la fin du processus d'arrêt. C'est un bon endroit pour vider la mémoire et effectuer toutes les tâches d'arrêt.
|
||||
|
||||
Le fichier `main.go` consiste généralement en un seul appel à `wails.Run()`, qui accepte la configuration de l'application. Le modèle utilisé par les templates fait qu'avant l'appel à `wails.Run()`, une instance du struct que l'on a définie dans `app.go` est créée et instanciée dans une variable appelée `app`. Cette configuration est l'endroit où nous ajoutons nos 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)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Plus d'informations sur les crochets du cycle de vie des applications peuvent être trouvées [ici](../howdoesitwork.mdx#application-lifecycle-callbacks).
|
||||
|
||||
## Méthodes de liaison
|
||||
|
||||
Il est probable que vous vouliez appeler les méthodes Go depuis le frontend. Cela se fait normalement en ajoutant des méthodes publiques à le struct déjà défini dans `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)
|
||||
}
|
||||
```
|
||||
|
||||
Dans la configuration principale de l'application, le paramètre `Bind` est l'endroit où nous pouvons dire à Wails ce que nous voulons lier :
|
||||
|
||||
```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)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Cela liera toutes les méthodes publiques de notre structure `App` (cela ne liera jamais les méthodes de démarrage et d'arrêt du système).
|
||||
|
||||
### Traiter avec le contexte lors de la liaison de plusieurs structures
|
||||
|
||||
Si vous voulez lier des méthodes pour des structures multiples, mais que vous voulez que chaque struct conserve une référence au contexte pour que vous puissiez utiliser les fonctions d'exécution... Un bon choix est de passer le contexte de la méthode `OnStartup` à vos instances struct :
|
||||
|
||||
```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)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Plus d'informations à sur Binding peuvent être trouvées [ici](../howdoesitwork.mdx#method-binding).
|
||||
|
||||
## Menu de l’application
|
||||
|
||||
Wails prend en charge l'ajout d'un menu à votre application. Ceci est fait en passant un [Menu](../reference/menus.mdx#menu) structuré à la configuration de l'application. Il est courant d'utiliser une méthode qui renvoie un Menu, et encore plus courant pour que cela soit une méthode sur la struct de l'`app` qui soit utilisée pour les hooks du cycle de vie.
|
||||
|
||||
```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)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Ressources
|
||||
|
||||
La grande chose à propos de la façon dont Wails v2 gère les ressources pour le frontend, est que ce n'est pas le cas! La seule chose que vous devez donner à Wails est un `embed.FS`. C'est à vous de décider comment vous y arrivez. Vous pouvez utiliser les fichiers html/css/js vanilla comme dans le modèle vanilla. Vous pourriez avoir un système de compilation compliqué, peu importe.
|
||||
|
||||
Quand la commande `wails dev` est exécutée, elle vérifiera le fichier de projet `wails.json` à la racine du projet. Il y a 2 clés dans le fichier du projet qui sont lues :
|
||||
|
||||
- "frontend:install"
|
||||
- "frontend:build"
|
||||
|
||||
Le premier, si fourni, sera exécuté dans le répertoire `frontend` pour installer les modules. Le second, si fourni, sera exécuté dans le répertoire `frontend` pour construire le projet frontend.
|
||||
|
||||
Si ces 2 clés ne sont pas fournies, alors Wails ne fait absolument rien avec le frontend. Il n'attend que `embed.FS`.
|
||||
|
||||
### AssetsHandler
|
||||
|
||||
Une application Wails v2 peut éventuellement définir un `http.Handler` dans `options.app`, qui permet de se connecter à l'AssetServer pour créer des fichiers à la volée ou traiter les requêtes POST/PUT. Les requêtes GET sont toujours traitées d'abord par le `assets` FS. Si le FS ne trouve pas le fichier demandé, la requête sera transmise au `http.Handler`. Toute requête autre que GET sera traitée directement par le `AssetsHandler` si spécifié. Il est également possible d'utiliser le `AssetsHandler` uniquement en spécifiant `nil` dans l'option `Assets`.
|
||||
|
||||
## Serveur de développement embarqué
|
||||
|
||||
Exécuter `wails dev` démarrera le serveur de développement intégré qui démarrera un observateur de fichiers dans votre répertoire de projet. Par par défaut, si un fichier change, wails vérifie s'il s'agit d'un fichier d'application (par défaut: `.go`, configurable avec l'option `-e`). Si c'est le cas, il reconstruira votre application et la relancera. Si le fichier modifié se trouvait dans les actifs, il lancera un rechargement après un court laps de temps.
|
||||
|
||||
Le serveur de développement utilise une technique appelée "debouncing", ce qui signifie qu'il ne se recharge pas tout de suite, comme il peut y avoir plusieurs fichiers modifiés en un court laps de temps. Lorsqu'un déclencheur se produit, il attend un temps défini avant d'émettre un rechargement. Si un autre déclencheur se produit, le temps d'attente se réinitialise avant un prochain rechargement. Par défaut, cette période est définie à `100ms`. Si cette valeur ne fonctionne pas pour votre projet, elle peut être configurée en utilisant l'option `-debounce`. Si elle est utilisée, cette valeur sera enregistrée dans la configuration de votre projet et deviendra la valeur par défaut.
|
||||
|
||||
## Serveur de développement externe
|
||||
|
||||
Certains frameworks sont fournis avec leur propre serveur de rechargement en direct, cependant ils ne seront pas en mesure de tirer parti des liaisons Wails Go. Dans ce scénario, il est préférable d'exécuter un script qui va surveiller le projet dans dossier build, dossier que Wails surveille aussi. Pour un exemple, voir le modèle svelte par défaut qui utilise [rollup](https://rollupjs.org/guide/en/).
|
||||
|
||||
### Créer une application React
|
||||
|
||||
Le processus pour créer un projet Reactest un peu plus compliqué. Afin de prendre en charge le rechargement du frontend en direct, la configuration suivante doit être ajoutée à votre `wails.json`:
|
||||
|
||||
```json
|
||||
"frontend:dev:watcher": "yarn start",
|
||||
"frontend:dev:serverUrl": "http://localhost:3000",
|
||||
```
|
||||
|
||||
La commande `frontend:dev:watcher` démarrera le serveur de développement React (hébergé sur le port `3000` typiquement). La commande `frontend:dev:serverUrl` demande ensuite à Wails d'exposer les ressources depuis le serveur de développement lors du chargement du frontend, plutôt que depuis le dossier de construction. En plus de ce qui précède, le fichier `index.html` doit être mis à jour avec les éléments suivants :
|
||||
|
||||
```html
|
||||
<head>
|
||||
<meta name="wails-options" content="noautoinject" />
|
||||
<script src="/wails/ipc.js"></script>
|
||||
<script src="/wails/runtime.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
Ceci est nécessaire, car la commande watcher qui reconstruit le frontend empêche Wails de les injecter. Ça contourne le problème en assurant les scripts sont toujours injectés. Avec cette configuration, `wails dev` peut être exécuté, ce qui construira le frontend et le backend de manière appropriée avec le rechargement à chaud activé. De plus, lorsque vous accédez à l'application à partir d'un navigateur, les outils de développement de React peuvent maintenant être utilisés sur une version non minifiée de l'application pour le débogage. Enfin, pour des compilations plus rapides, `wails dev -s` peut être exécuté pour passer la construction par défaut du frontend par Wails car c'est une étape inutile.
|
||||
|
||||
## Module Go
|
||||
|
||||
Les modèles Wails par défaut génèrent un fichier `go.mod` qui contient le nom de module "changeme". Vous devriez changer ceci pour quelque chose de plus approprié après la génération du projet.
|
||||
@ -0,0 +1,66 @@
|
||||
# Crossplatform build with Github Actions
|
||||
|
||||
To build a Wails project for all the available platforms, you need to create an application build for each operating system. One effective method to achieve this is by utilizing GitHub Actions.
|
||||
|
||||
An action that facilitates building a Wails app is available at:
|
||||
https://github.com/dAppServer/wails-build-action
|
||||
|
||||
In case the existing action doesn't fulfill your requirements, you can select only the necessary steps from the source:
|
||||
https://github.com/dAppServer/wails-build-action/blob/main/action.yml
|
||||
|
||||
Below is a comprehensive example that demonstrates building an app upon the creation of a new Git tag and subsequently uploading it to the Actions artifacts:
|
||||
|
||||
```yaml
|
||||
name: Wails build
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
# Match any new tag
|
||||
- '*'
|
||||
|
||||
env:
|
||||
# Necessary for most environments as build failure can occur due to OOM issues
|
||||
NODE_OPTIONS: "--max-old-space-size=4096"
|
||||
|
||||
jobs:
|
||||
build:
|
||||
strategy:
|
||||
# Failure in one platform build won't impact the others
|
||||
fail-fast: false
|
||||
matrix:
|
||||
build:
|
||||
- name: 'App'
|
||||
platform: 'linux/amd64'
|
||||
os: 'ubuntu-latest'
|
||||
- name: 'App'
|
||||
platform: 'windows/amd64'
|
||||
os: 'windows-latest'
|
||||
- name: 'App'
|
||||
platform: 'darwin/universal'
|
||||
os: 'macos-latest'
|
||||
|
||||
runs-on: ${{ matrix.build.os }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
submodules: recursive
|
||||
|
||||
- name: Build wails
|
||||
uses: dAppServer/wails-build-action@v2.2
|
||||
id: build
|
||||
with:
|
||||
build-name: ${{ matrix.build.name }}
|
||||
build-platform: ${{ matrix.build.platform }}
|
||||
package: false
|
||||
go-version: '1.20'
|
||||
```
|
||||
|
||||
This example offers opportunities for various enhancements, including:
|
||||
|
||||
- Caching dependencies
|
||||
- Code signing
|
||||
- Uploading to platforms like S3, Supbase, etc.
|
||||
- Injecting secrets as environment variables
|
||||
- Utilizing environment variables as build variables (such as version variable extracted from the current Git tag)
|
||||
@ -0,0 +1,204 @@
|
||||
# Custom Protocol Scheme association
|
||||
|
||||
Custom Protocols feature allows you to associate specific custom protocol with your app so that when users open links with this protocol,
|
||||
your app is launched to handle them. This can be particularly useful to connect your desktop app with your web app.
|
||||
In this guide, we'll walk through the steps to implement custom protocols in Wails app.
|
||||
|
||||
## Set Up Custom Protocol Schemes Association:
|
||||
|
||||
To set up custom protocol, you need to modify your application's wails.json file.
|
||||
In "info" section add a "protocols" section specifying the protocols your app should be associated with.
|
||||
|
||||
For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"info": {
|
||||
"protocols": [
|
||||
{
|
||||
"scheme": "myapp",
|
||||
"description": "My App Protocol",
|
||||
"role": "Editor"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| :---------- | :------------------------------------------------------------------------------------ |
|
||||
| scheme | Custom Protocol scheme. e.g. myapp |
|
||||
| description | Windows-only. The description. |
|
||||
| role | macOS-only. The app’s role with respect to the type. Corresponds to CFBundleTypeRole. |
|
||||
|
||||
## Platform Specifics:
|
||||
|
||||
### macOS
|
||||
|
||||
When you open custom protocol with your app, the system will launch your app and call the `OnUrlOpen` function in your Wails app. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
Mac: &mac.Options{
|
||||
OnUrlOpen: func(url string) { println(url) },
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
println("Error:", err.Error())
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Windows
|
||||
|
||||
On Windows Custom Protocol Schemes is supported only with NSIS installer. During installation, the installer will create a
|
||||
registry entry for your schemes. When you open url with your app, new instance of app is launched and url is passed
|
||||
as argument to your app. To handle this you should parse command line arguments in your app. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
argsWithoutProg := os.Args[1:]
|
||||
|
||||
if len(argsWithoutProg) != 0 {
|
||||
println("launchArgs", argsWithoutProg)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You also can enable single instance lock for your app. In this case, when you open url with your app, new instance of app is not launched
|
||||
and arguments are passed to already running instance. Check single instance lock guide for details. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
SingleInstanceLock: &options.SingleInstanceLock{
|
||||
UniqueId: "e3984e08-28dc-4e3d-b70a-45e961589cdc",
|
||||
OnSecondInstanceLaunch: app.onSecondInstanceLaunch,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Linux
|
||||
|
||||
Currently, Wails doesn't support bundling for Linux. So, you need to create file associations manually.
|
||||
For example if you distribute your app as a .deb package, you can create file associations by adding required files in you bundle.
|
||||
You can use [nfpm](https://nfpm.goreleaser.com/) to create .deb package for your app.
|
||||
|
||||
1. Create a .desktop file for your app and specify file associations there (note that `%u` is important in Exec). Example:
|
||||
|
||||
```ini
|
||||
[Desktop Entry]
|
||||
Categories=Office
|
||||
Exec=/usr/bin/wails-open-file %u
|
||||
Icon=wails-open-file.png
|
||||
Name=wails-open-file
|
||||
Terminal=false
|
||||
Type=Application
|
||||
MimeType=x-scheme-handler/myapp;
|
||||
```
|
||||
|
||||
2. Prepare postInstall/postRemove scripts for your package. Example:
|
||||
|
||||
```sh
|
||||
# reload desktop database to load app in list of available
|
||||
update-desktop-database /usr/share/applications
|
||||
```
|
||||
|
||||
3. Configure nfpm to use your scripts and files. Example:
|
||||
|
||||
```yaml
|
||||
name: "wails-open-file"
|
||||
arch: "arm64"
|
||||
platform: "linux"
|
||||
version: "1.0.0"
|
||||
section: "default"
|
||||
priority: "extra"
|
||||
maintainer: "FooBarCorp <FooBarCorp@gmail.com>"
|
||||
description: "Sample Package"
|
||||
vendor: "FooBarCorp"
|
||||
homepage: "http://example.com"
|
||||
license: "MIT"
|
||||
contents:
|
||||
- src: ../bin/wails-open-file
|
||||
dst: /usr/bin/wails-open-file
|
||||
- src: ./main.desktop
|
||||
dst: /usr/share/applications/wails-open-file.desktop
|
||||
- src: ../appicon.svg
|
||||
dst: /usr/share/icons/hicolor/scalable/apps/wails-open-file.svg
|
||||
# copy icons to Yaru theme as well. For some reason Ubuntu didn't pick up fileicons from hicolor theme
|
||||
- src: ../appicon.svg
|
||||
dst: /usr/share/icons/Yaru/scalable/apps/wails-open-file.svg
|
||||
scripts:
|
||||
postinstall: ./postInstall.sh
|
||||
postremove: ./postRemove.sh
|
||||
```
|
||||
|
||||
6. Build your .deb package using nfpm:
|
||||
|
||||
```sh
|
||||
nfpm pkg --packager deb --target .
|
||||
```
|
||||
|
||||
7. Now when your package is installed, your app will be associated with custom protocol scheme. When you open url with your app,
|
||||
new instance of app is launched and file path is passed as argument to your app.
|
||||
To handle this you should parse command line arguments in your app. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
argsWithoutProg := os.Args[1:]
|
||||
|
||||
if len(argsWithoutProg) != 0 {
|
||||
println("launchArgs", argsWithoutProg)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You also can enable single instance lock for your app. In this case, when you open url with your app, new instance of app is not launched
|
||||
and arguments are passed to already running instance. Check single instance lock guide for details. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
SingleInstanceLock: &options.SingleInstanceLock{
|
||||
UniqueId: "e3984e08-28dc-4e3d-b70a-45e961589cdc",
|
||||
OnSecondInstanceLaunch: app.onSecondInstanceLaunch,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
# Ressources dynamiques
|
||||
|
||||
Si vous voulez charger ou générer des ressources pour votre frontend de manière dynamique, vous pouvez y parvenir en utilisant l'option [AssetsHandler](../reference/options#assetshandler). Le AssetsHandler est un générique`http.Handler` qui sera appelé pour toute requête non GET sur le serveur d'assets et pour les requêtes GET qui ne peuvent pas être servies car l'asset n'est pas trouvé.
|
||||
|
||||
En installant un AssetsHandler personnalisé, vous pouvez servir vos propres ressources en utilisant un serveur de ressources personnalisé.
|
||||
|
||||
## Exemple
|
||||
|
||||
Dans notre exemple de projet, nous allons créer un gestionnaire de ressources simple qui chargera les fichiers à partir du disque:
|
||||
|
||||
```go title=main.go {17-36,49}
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"fmt"
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
"net/http"
|
||||
"os"
|
||||
"strings"
|
||||
)
|
||||
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
type FileLoader struct {
|
||||
http.Handler
|
||||
}
|
||||
|
||||
func NewFileLoader() *FileLoader {
|
||||
return &FileLoader{}
|
||||
}
|
||||
|
||||
func (h *FileLoader) ServeHTTP(res http.ResponseWriter, req *http.Request) {
|
||||
var err error
|
||||
requestedFilename := strings.TrimPrefix(req.URL.Path, "/")
|
||||
println("Requesting file:", requestedFilename)
|
||||
fileData, err := os.ReadFile(requestedFilename)
|
||||
if err != nil {
|
||||
res.WriteHeader(http.StatusBadRequest)
|
||||
res.Write([]byte(fmt.Sprintf("Could not load file %s", requestedFilename)))
|
||||
}
|
||||
|
||||
res.Write(fileData)
|
||||
}
|
||||
|
||||
func main() {
|
||||
// Create an instance of the app structure
|
||||
app := NewApp()
|
||||
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "helloworld",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
Handler: NewFileLoader(),
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 255},
|
||||
OnStartup: app.startup,
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
println("Error:", err)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Lorsque nous exécutons l'application en mode dev en utilisant `wails dev`, nous verrons la sortie suivante :
|
||||
|
||||
```
|
||||
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico'
|
||||
DEB | [ExternalAssetHandler] Loading 'http://localhost:3001/favicon.ico' failed, using AssetHandler
|
||||
Requesting file: favicon.ico
|
||||
```
|
||||
|
||||
Comme vous pouvez le voir, le gestionnaire d'actifs est appelé lorsque le serveur d'assets par défaut est incapable de servir le fichier `favicon.ico`.
|
||||
|
||||
Si vous faites un clic droit sur l'application principale et sélectionnez "inspecter" pour afficher les devtools, vous pouvez tester cette fonctionnalité en tapant ce qui suit dans la console :
|
||||
|
||||
```
|
||||
let response = await fetch('does-not-exist.txt');
|
||||
```
|
||||
|
||||
Cela générera une erreur dans les devtools. Nous pouvons voir que l'erreur est ce que nous attendons est retourné par notre gestionnaire de ressources personnalisées :
|
||||
|
||||
```mdx-code-block
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
```
|
||||
|
||||
Cependant, si nous demandons `go.mod`, nous verrons la sortie suivante :
|
||||
|
||||
```mdx-code-block
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
```
|
||||
|
||||
Cette technique peut être utilisée pour charger des images directement dans la page. Si nous avons mis à jour notre modèle vanilla par défaut et a remplacé l'image du logo :
|
||||
|
||||
```html
|
||||
<img id="logo" class="logo" />
|
||||
```
|
||||
|
||||
avec :
|
||||
|
||||
```html
|
||||
<img src="build/appicon.png" style="width: 300px" />
|
||||
```
|
||||
|
||||
Nous verrions ensuite ce qui suit:
|
||||
|
||||
```mdx-code-block
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
```
|
||||
|
||||
:::warning
|
||||
|
||||
Exposer votre système de fichiers de cette manière est un risque de sécurité. Il est recommandé de gérer correctement l'accès à votre système de fichiers.
|
||||
|
||||
:::
|
||||
@ -0,0 +1,244 @@
|
||||
# File Association
|
||||
|
||||
File association feature allows you to associate specific file types with your app so that when users open those files,
|
||||
your app is launched to handle them. This can be particularly useful for text editors, image viewers, or any application
|
||||
that works with specific file formats. In this guide, we'll walk through the steps to implement file association in Wails app.
|
||||
|
||||
## Set Up File Association:
|
||||
|
||||
To set up file association, you need to modify your application's wails.json file.
|
||||
In "info" section add a "fileAssociations" section specifying the file types your app should be associated with.
|
||||
|
||||
For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"info": {
|
||||
"fileAssociations": [
|
||||
{
|
||||
"ext": "wails",
|
||||
"name": "Wails",
|
||||
"description": "Wails Application File",
|
||||
"iconName": "wailsFileIcon",
|
||||
"role": "Editor"
|
||||
},
|
||||
{
|
||||
"ext": "jpg",
|
||||
"name": "JPEG",
|
||||
"description": "Image File",
|
||||
"iconName": "jpegFileIcon",
|
||||
"role": "Editor"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ext | The extension (minus the leading period). e.g. png |
|
||||
| name | The name. e.g. PNG File |
|
||||
| iconName | The icon name without extension. Icons should be located in build folder. Proper icons will be generated from .png file for both macOS and Windows |
|
||||
| description | Windows-only. The description. It is displayed on the `Type` column on Windows Explorer. |
|
||||
| role | macOS-only. The app’s role with respect to the type. Corresponds to CFBundleTypeRole. |
|
||||
|
||||
## Platform Specifics:
|
||||
|
||||
### macOS
|
||||
|
||||
When you open file (or files) with your app, the system will launch your app and call the `OnFileOpen` function in your Wails app. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
Mac: &mac.Options{
|
||||
OnFileOpen: func(filePaths []string) { println(filestring) },
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
println("Error:", err.Error())
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Windows
|
||||
|
||||
On Windows file association is supported only with NSIS installer. During installation, the installer will create a
|
||||
registry entry for your file associations. When you open file with your app, new instance of app is launched and file path is passed
|
||||
as argument to your app. To handle this you should parse command line arguments in your app. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
argsWithoutProg := os.Args[1:]
|
||||
|
||||
if len(argsWithoutProg) != 0 {
|
||||
println("launchArgs", argsWithoutProg)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You also can enable single instance lock for your app. In this case, when you open file with your app, new instance of app is not launched
|
||||
and arguments are passed to already running instance. Check single instance lock guide for details. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
SingleInstanceLock: &options.SingleInstanceLock{
|
||||
UniqueId: "e3984e08-28dc-4e3d-b70a-45e961589cdc",
|
||||
OnSecondInstanceLaunch: app.onSecondInstanceLaunch,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Linux
|
||||
|
||||
Currently, Wails doesn't support bundling for Linux. So, you need to create file associations manually.
|
||||
For example if you distribute your app as a .deb package, you can create file associations by adding required files in you bundle.
|
||||
You can use [nfpm](https://nfpm.goreleaser.com/) to create .deb package for your app.
|
||||
|
||||
1. Create a .desktop file for your app and specify file associations there. Example:
|
||||
|
||||
```ini
|
||||
[Desktop Entry]
|
||||
Categories=Office
|
||||
Exec=/usr/bin/wails-open-file %u
|
||||
Icon=wails-open-file.png
|
||||
Name=wails-open-file
|
||||
Terminal=false
|
||||
Type=Application
|
||||
MimeType=application/x-wails;application/x-test
|
||||
```
|
||||
|
||||
2. Create mime types file. Example:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<mime-info xmlns="http://www.freedesktop.org/standards/shared-mime-info">
|
||||
<mime-type type="application/x-wails">
|
||||
<comment>Wails Application File</comment>
|
||||
<glob pattern="*.wails"/>
|
||||
</mime-type>
|
||||
</mime-info>
|
||||
```
|
||||
|
||||
3. Create icons for your file types. SVG icons are recommended.
|
||||
4. Prepare postInstall/postRemove scripts for your package. Example:
|
||||
|
||||
```sh
|
||||
# reload mime types to register file associations
|
||||
update-mime-database /usr/share/mime
|
||||
# reload desktop database to load app in list of available
|
||||
update-desktop-database /usr/share/applications
|
||||
# update icons
|
||||
update-icon-caches /usr/share/icons/*
|
||||
```
|
||||
|
||||
5. Configure nfpm to use your scripts and files. Example:
|
||||
|
||||
```yaml
|
||||
name: "wails-open-file"
|
||||
arch: "arm64"
|
||||
platform: "linux"
|
||||
version: "1.0.0"
|
||||
section: "default"
|
||||
priority: "extra"
|
||||
maintainer: "FooBarCorp <FooBarCorp@gmail.com>"
|
||||
description: "Sample Package"
|
||||
vendor: "FooBarCorp"
|
||||
homepage: "http://example.com"
|
||||
license: "MIT"
|
||||
contents:
|
||||
- src: ../bin/wails-open-file
|
||||
dst: /usr/bin/wails-open-file
|
||||
- src: ./main.desktop
|
||||
dst: /usr/share/applications/wails-open-file.desktop
|
||||
- src: ./application-wails-mime.xml
|
||||
dst: /usr/share/mime/packages/application-x-wails.xml
|
||||
- src: ./application-test-mime.xml
|
||||
dst: /usr/share/mime/packages/application-x-test.xml
|
||||
- src: ../appicon.svg
|
||||
dst: /usr/share/icons/hicolor/scalable/apps/wails-open-file.svg
|
||||
- src: ../wailsFileIcon.svg
|
||||
dst: /usr/share/icons/hicolor/scalable/mimetypes/application-x-wails.svg
|
||||
- src: ../testFileIcon.svg
|
||||
dst: /usr/share/icons/hicolor/scalable/mimetypes/application-x-test.svg
|
||||
# copy icons to Yaru theme as well. For some reason Ubuntu didn't pick up fileicons from hicolor theme
|
||||
- src: ../appicon.svg
|
||||
dst: /usr/share/icons/Yaru/scalable/apps/wails-open-file.svg
|
||||
- src: ../wailsFileIcon.svg
|
||||
dst: /usr/share/icons/Yaru/scalable/mimetypes/application-x-wails.svg
|
||||
- src: ../testFileIcon.svg
|
||||
dst: /usr/share/icons/Yaru/scalable/mimetypes/application-x-test.svg
|
||||
scripts:
|
||||
postinstall: ./postInstall.sh
|
||||
postremove: ./postRemove.sh
|
||||
```
|
||||
|
||||
6. Build your .deb package using nfpm:
|
||||
|
||||
```sh
|
||||
nfpm pkg --packager deb --target .
|
||||
```
|
||||
|
||||
7. Now when your package is installed, your app will be associated with specified file types. When you open file with your app,
|
||||
new instance of app is launched and file path is passed as argument to your app.
|
||||
To handle this you should parse command line arguments in your app. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
argsWithoutProg := os.Args[1:]
|
||||
|
||||
if len(argsWithoutProg) != 0 {
|
||||
println("launchArgs", argsWithoutProg)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You also can enable single instance lock for your app. In this case, when you open file with your app, new instance of app is not launched
|
||||
and arguments are passed to already running instance. Check single instance lock guide for details. Example:
|
||||
|
||||
```go title="main.go"
|
||||
func main() {
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
SingleInstanceLock: &options.SingleInstanceLock{
|
||||
UniqueId: "e3984e08-28dc-4e3d-b70a-45e961589cdc",
|
||||
OnSecondInstanceLaunch: app.onSecondInstanceLaunch,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
# Applications sans cadre
|
||||
|
||||
Wails prend en charge la création d'applications qui n'ont pas de cadres. Ceci peut être réalisé en utilisant le champ [frameless](../reference/options.mdx#frameless) dans [Application Options](../reference/options.mdx#application-options).
|
||||
|
||||
Wails offre une solution simple pour faire glisser la fenêtre: N'importe quel élément HTML qui a le style CSS `--wails-draggable:drag` agira comme une "poignée de glisser". Cette propriété s'applique à tous les éléments enfants. Si vous devez indiquer qu'un élément imbriqué ne doit pas glisser, alors utilisez l'attribut '--wails-draggable:no-drag' sur cet élément.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
Pour certains projets, l'utilisation d'une variable CSS peut ne pas être possible en raison du style dynamique. Dans ce cas, vous pouvez utiliser les options `CSSDragProperty` et `CSSDragValue` pour définir une propriété et une valeur qui seront utilisées pour indiquer régions glissables :
|
||||
|
||||
```go title=main.go
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
)
|
||||
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
func main() {
|
||||
// Create an instance of the app structure
|
||||
app := NewApp()
|
||||
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "alwaysontop",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
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 Plein écran
|
||||
|
||||
Si vous autorisez votre application à être en plein écran, cette fonctionnalité de glissement sera désactivée.
|
||||
|
||||
:::
|
||||
@ -0,0 +1,72 @@
|
||||
# Frontend
|
||||
|
||||
## Injection de script
|
||||
|
||||
Quand Wails sert votre fichier `index.html`, par défaut, il injectera 2 entrées de script dans la balise `<body>` pour charger `/wails/ipc.js` et `/wails/runtime.js`. Ces fichiers installent respectivement les bindings et les runtime.
|
||||
|
||||
Le code ci-dessous montre où ils sont injectés par défaut :
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Remplacer l'injection de script par défaut
|
||||
|
||||
Pour fournir plus de flexibilité aux développeurs, il y a une balise meta qui peut être utilisée pour personnaliser ce comportement:
|
||||
|
||||
```html
|
||||
<meta name="wails-options" content="[options]" />
|
||||
```
|
||||
|
||||
Les options sont les suivantes :
|
||||
|
||||
| Valeur | Description |
|
||||
| ------------------- | -------------------------------------------------------------- |
|
||||
| noautoinjectruntime | Pour désactiver l'injection automatique de `/wails/runtime.js` |
|
||||
| noautoinjectipc | Pour désactiver l'injection automatique de `/wails/ipc.js` |
|
||||
| noautoinject | Pour désactiver l'injection automatique de tous les scripts |
|
||||
|
||||
Plusieurs options peuvent être utilisées à condition qu'elles soient séparées par des virgules.
|
||||
|
||||
Ce code est parfaitement valide et fonctionne de la même manière que la version avec l'auto-injection :
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
# IDEs
|
||||
|
||||
Wails vise à fournir une grande expérience de développement. À cet effet, nous supportons maintenant la génération d'une configuration spécifique IDE pour fournir une configuration plus souple du projet.
|
||||
|
||||
Actuellement, nous prenons en charge [Visual Studio Code](https://code.visualstudio.com/) mais nous visons à prendre en charge d'autres IDE comme Goland.
|
||||
|
||||
## Visual Studio Code
|
||||
|
||||
```mdx-code-block
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
```
|
||||
|
||||
Lors de la génération d'un projet en utilisant l'option `-ide vscode` , les fichiers IDE seront créés à côté des autres fichiers du projet. Ces fichiers sont placés dans le répertoire `.vscode` et fournissent la configuration correcte pour déboguer votre application.
|
||||
|
||||
Les 2 fichiers générés sont `tasks.json` et `launch.json`. Ci-dessous se trouvent les fichiers générés par défaut :
|
||||
|
||||
```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": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Configuration des étapes d'installation et de construction
|
||||
|
||||
Le fichier `tasks.json` est simple pour le projet par défaut car il n'y a pas d'étapes `npm install` ou `npm build` nécessaire. Pour les projets qui ont une étape de construction en frontend comme avec Svelte, nous devrions modifier `tasks.json` pour ajouter les étapes d'installation et de construction suivantes :
|
||||
|
||||
```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 Améliorations futures
|
||||
|
||||
Dans le futur, nous espérons générer un `tasks.json` qui inclut les étapes d'installation et de construction automatiquement.
|
||||
|
||||
:::
|
||||
@ -0,0 +1,103 @@
|
||||
# Prise en charge des distributions Linux
|
||||
|
||||
## Vue d'ensemble
|
||||
|
||||
Wails offre le support de Linux, mais fournir des instructions d'installation pour toutes les distributions disponibles est une tâche impossible. À la place, Wails essaie de déterminer si les paquets dont vous avez besoin pour développer des applications sont disponibles via le gestionnaire de paquets de votre système. Actuellement, nous supportons les gestionnaires de paquets suivants :
|
||||
|
||||
- apt
|
||||
- dnf
|
||||
- emerge
|
||||
- eopkg
|
||||
- nixpkgs
|
||||
- pacman
|
||||
- zypper
|
||||
|
||||
## Ajout des noms de paquets
|
||||
|
||||
Il peut y avoir des cas où votre distribution de linux utilise un des gestionnaires de paquets pris en charge mais le nom du paquet est différent. Par exemple, vous pouvez utiliser un dérivé Ubuntu, mais le nom du paquet pour gtk peut être différent. Wails tente de trouver le paquet correct en itérant une liste de noms de paquets. La liste des paquets est stockée dans un fichier spécifique dans le dossier `v2/internal/system/packagemanager` . Dans notre exemple, ce serait `v2/internal/system/packagemanager/apt.go`.
|
||||
|
||||
Dans ce fichier, la liste des paquets est définie par la méthode `Packages()`:
|
||||
|
||||
```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},
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Supposons que dans notre distribution linux, `libgtk-3` est empaqueté sous le nom `lib-gtk3-dev`. Nous pourrions ajouter le support de ce paquet en ajoutant la ligne suivante :
|
||||
|
||||
```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},
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Ajout de nouveaux gestionnaires de paquets
|
||||
|
||||
Pour ajouter un nouveau gestionnaire de paquets, effectuez les étapes suivantes :
|
||||
|
||||
- Créez un nouveau fichier dans `v2/internal/system/packagemanager` appelé `<pm>.go`, où `<pm>` est le nom du gestionnaire de paquets.
|
||||
- Définit une structure conforme à l'interface du gestionnaire de paquets définie dans `pm.go`:
|
||||
|
||||
```go
|
||||
type PackageManager interface {
|
||||
Name() string
|
||||
Packages() packagemap
|
||||
PackageInstalled(*Package) (bool, error)
|
||||
PackageAvailable(*Package) (bool, error)
|
||||
InstallCommand(*Package) string
|
||||
}
|
||||
```
|
||||
|
||||
- `Name()` doit retourner le nom du gestionnaire de paquets
|
||||
- `Packages()` doit retourner une `packagemap`, qui fournit des noms de fichiers candidats pour les dépendances
|
||||
- `PackageInstalled()` devrait retourner `true` si le paquet donné est installé
|
||||
- `PackageAvailable()` devrait retourner `true` si le paquet donné n'est pas installé mais disponible pour l'installation
|
||||
- `InstallCommand()` doit retourner la commande exacte pour installer le nom du paquet donné
|
||||
|
||||
Jetez un coup d'œil au code des autres gestionnaires de paquets pour avoir une idée de comment cela fonctionne.
|
||||
|
||||
:::info Rappel
|
||||
|
||||
Si vous ajoutez le support d'un nouveau gestionnaire de paquets, n'oubliez pas de mettre également à jour cette page !
|
||||
|
||||
:::
|
||||
@ -0,0 +1,18 @@
|
||||
# Linux
|
||||
|
||||
Cette page a divers guides liés au développement d'applications Wails pour Linux.
|
||||
|
||||
## Le tag vidéo ne déclenche pas l'événement "terminé"
|
||||
|
||||
Lorsque vous utilisez un tag vidéo, l'événement "terminé" n'est pas déclenché lorsque la vidéo est finie. Ceci est un bogue dans WebkitGTK, cependant vous pouvez utiliser le contournement suivant pour le corriger :
|
||||
|
||||
```js
|
||||
videoTag.addEventListener("timeupdate", (event) => {
|
||||
if (event.target.duration - event.target.currentTime < 0.2) {
|
||||
let ended = new Event("ended");
|
||||
event.target.dispatchEvent(ended);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Source : [Lyimmi](https://github.com/Lyimmi) sur le [forum de discussion](https://github.com/wailsapp/wails/issues/1729#issuecomment-1212291275)
|
||||
@ -0,0 +1,55 @@
|
||||
# Développement local
|
||||
|
||||
## Vue d'ensemble
|
||||
|
||||
Wails est en développement constant et les nouvelles versions sont régulièrement "tagguées". Cela se produit généralement lorsque tout le nouveau code sur `master` a été testé et confirmé fonctionnel. Si vous avez besoin d'un correctif ou d'une fonctionnalité qui ne l'a pas encore fait pour une version, il est possible d'utiliser la dernière version "non validée" en utilisant les étapes suivantes :
|
||||
|
||||
- `git clone https://github.com/wailsapp/wails`
|
||||
- `cd wails/v2/cmd/wails`
|
||||
- `go install`
|
||||
|
||||
REMARQUE : Le répertoire dans lequel vous avez cloné le projet sera maintenant appelé "clonedir".
|
||||
|
||||
Le CLI de Wails sera maintenant à la dernière version.
|
||||
|
||||
### Mise à jour du projet
|
||||
|
||||
Pour mettre à jour vos projets pour utiliser la dernière version de la bibliothèque Wails, mettez à jour le fichier `go.mod` et assurez-vous que la ligne suivante est en bas du fichier :
|
||||
|
||||
`replace github.com/wailsapp/wails/v2 => <clonedir>`
|
||||
|
||||
Exemple:
|
||||
|
||||
Sur Windows: `replace github.com/wailsapp/wails/v2 => C:\Users\leaan\Documents\wails-v2-beta\wails\v2`
|
||||
|
||||
Sur 'nix: `replace github.com/wailsapp/wails/v2 => /home/me/projects/wails/v2`
|
||||
|
||||
Pour revenir à une version stable, exécutez :
|
||||
|
||||
`go install github.com/wailsapp/wails/v2/cmd/wails@latest`
|
||||
|
||||
## Tester une branche
|
||||
|
||||
Si vous voulez tester une branche, suivez les instructions ci-dessus, mais assurez-vous de bien vous mettre sur la branche que vous voulez tester avant d'installer :
|
||||
|
||||
- `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`
|
||||
|
||||
Assurez-vous de [mettre à jour votre projet](#updating-your-project) comme décrit ci-dessus.
|
||||
|
||||
## Tester une PR
|
||||
|
||||
Si vous voulez tester une PR, suivez les instructions ci-dessus, mais assurez-vous de récupérer la PR et d'être sur la branche de la PR avant de faire l'installation. Veuillez remplacer `[IDofThePR]` par l'ID de la PR affiché sur 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`
|
||||
|
||||
Assurez-vous de [mettre à jour votre projet](#updating-your-project) comme décrit ci-dessus.
|
||||
@ -0,0 +1,97 @@
|
||||
# Guide pour Mac App Store
|
||||
|
||||
Cette page donne un bref aperçu de la façon de soumettre votre application Wails au Mac App Store.
|
||||
|
||||
## Prérequis
|
||||
|
||||
- Vous devrez avoir un compte développeur Apple. Veuillez trouver plus d'informations sur le site [Apple Developer Program](https://developer.apple.com/support/compare-memberships/)
|
||||
- Vous aurez besoin que vos certificats, identifiants et applications soient créés sur le portail développeur. Plus d'infos sur ce sujet ci-dessous
|
||||
- L'utilitaire Xcode devront être installés sur votre machine locale pour être utilisé en ligne de commandes
|
||||
|
||||
#### Créer des certificats et des identifiants
|
||||
|
||||
1. Allez sur votre [Compte Développeur Apple](https://developer.apple.com/account/)
|
||||
2. Sous `Certificats, Identificateurs & Profils`, cliquez sur `Identifiants` et Enregistrez un nouvel identifiant d'application. Utiliser le format (com.example.app)
|
||||
3. Sous la même page, cliquez sur `Certificats` et générez de nouveaux certificats pour la distribution de l'App Store Mac. Téléchargez-les et importez les certificats dans votre trousseau sur votre machine locale.
|
||||
|
||||
#### Créer une soumission d'application
|
||||
|
||||
1. Allez sur le [site de connexion de l'App Store](https://appstoreconnect.apple.com/apps)
|
||||
2. Enregistrez une nouvelle application et liez l'ID du lot que vous avez créé à l'étape précédente
|
||||
3. Remplissez votre application avec les bonnes captures d'écran, descriptions, etc. selon les besoins d'Apple
|
||||
4. Créer une nouvelle version de votre application
|
||||
|
||||
#### Create Provisioning Profile
|
||||
1. Go to the [Apple Developer Profiles](https://developer.apple.com/account/resources/profiles/list) page
|
||||
2. Add a new provisioning profile for Mac App Store Distribution
|
||||
3. Set the Profile Type as Mac and select the App ID for the application created above
|
||||
4. Select the Mac App Distribution certificate
|
||||
5. Name the Provisioning Profile embedded and download the created profile.
|
||||
|
||||
## Processus Mac App Store
|
||||
|
||||
#### Activation du Sandbox Apple
|
||||
|
||||
Les applications soumises au Mac App Store doivent tourner dans la [Sandbox](https://developer.apple.com/app-sandboxing/) Apple. Vous devez créer un fichier `entitlements.plist` pour que cela fonctionne. La recommandation est de créer ce fichier sous ce chemin `{PROJECT_DIR}/build/darwin/entitlements.plist`.
|
||||
|
||||
**Example de fichier Entitlements**
|
||||
|
||||
Ceci est un exemple du fichier entitlements de l'application [RiftShare](https://github.com/achhabra2/riftshare). Pour référence, veuillez mettre dans les droits requis par votre application. Reportez-vous à [ce site](https://developer.apple.com/documentation/bundleresources/entitlements) pour plus d'informations. You will need to replace the Team ID and Application Name with the ones you registered above.
|
||||
|
||||
```xml title="entitlements.plist"
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.app-sandbox</key>
|
||||
<true/>
|
||||
<key>com.apple.security.network.client</key>
|
||||
<true/>
|
||||
<key>com.apple.security.network.server</key>
|
||||
<true/>
|
||||
<key>com.apple.security.files.user-selected.read-write</key>
|
||||
<true/>
|
||||
<key>com.apple.security.files.downloads.read-write</key>
|
||||
<true/>
|
||||
<key>com.apple.application-identifier</key>
|
||||
<string>TEAM_ID.APP_NAME</string>
|
||||
<key>com.apple.developer.team-identifier</key>
|
||||
<string>TEAM_ID</string>
|
||||
</dict>
|
||||
</plist>
|
||||
```
|
||||
|
||||
**Add the Embedded Provisioning Profile** The Provisioning Profile created above needs to be added to the root of the applicaton. It needs to be named embedded.provisionprofile.
|
||||
|
||||
#### Construire et signer le package de l'application
|
||||
|
||||
Ce qui suit est un exemple de script pour construire et signer votre application pour la soumission de l'App Store Mac. Il suppose que vous exécutez le script depuis la racine de votre projet.
|
||||
|
||||
Notez que les certificats pour signer l'application et l'installateur sont différents. Veuillez vous assurer que les deux sont importés dans votre trousseau. Trouvez les chaînes de caractères dans Trousseau et insérez-les ci-dessous. Remplissez le nom de votre certificat et le nom de l'application ci-dessous. Exécuter le script suivant générera un fichier `app.pkg` signé à la racine de votre application.
|
||||
|
||||
```bash title="macappstore-build.sh"
|
||||
#!/bin/bash
|
||||
|
||||
APP_CERTIFICATE="3rd Party Mac Developer Application: YOUR NAME (CODE)"
|
||||
PKG_CERTIFICATE="3rd Party Mac Developer Installer: YOUR NAME (CODE)"
|
||||
APP_NAME="YourApp"
|
||||
|
||||
wails build -platform darwin/universal -clean
|
||||
|
||||
cp ./embedded.provisionprofile "./build/bin/$APP_NAME.app/Contents"
|
||||
|
||||
codesign --timestamp --options=runtime -s "$APP_CERTIFICATE" -v --entitlements ./build/darwin/entitlements.plist ./build/bin/$APP_NAME.app
|
||||
|
||||
productbuild --sign "$PKG_CERTIFICATE" --component ./build/bin/$APP_NAME.app /Applications ./$APP_NAME.pkg
|
||||
```
|
||||
|
||||
#### Télécharger l'application
|
||||
|
||||
Vous devrez télécharger le fichier de package généré et l'associer à votre application avant de pouvoir le soumettre pour vérification.
|
||||
|
||||
1. Téléchargez l' [App Transporter](https://apps.apple.com/us/app/transporter/id1450874784) depuis le Mac App Store
|
||||
2. Ouvrez-le et connectez-vous avec votre identifiant Apple
|
||||
3. Cliquez sur le signe + et sélectionnez le fichier `APP_NAME.pkg` que vous avez généré à l'étape précédente. Télécharger le
|
||||
4. Retournez sur le site [App Store Connect](https://appstoreconnect.apple.com/apps) et retournez dans la soumission de votre application. Sélectionnez la version que vous êtes prêt à mettre à disposition sur l'App Store. Sous `Build` sélectionnez le package que vous avez téléchargé via Transporter.
|
||||
|
||||
C'est terminé ! Vous pouvez maintenant utiliser le site pour soumettre votre application pour vérification. Après quelques jours ouvrables si tout se passe bien, vous devriez voir votre application en direct sur le Mac App Store.
|
||||
@ -0,0 +1,95 @@
|
||||
# Compilations manuelles
|
||||
|
||||
Le CLI Wails fait beaucoup de travail pour le projet, mais il est parfois souhaitable de construire manuellement votre projet. Ce document discutera des différentes opérations que fait le CLI et des différentes façons d'y parvenir.
|
||||
|
||||
## Processus de construction
|
||||
|
||||
Lorsque `wails build` ou `wails dev` sont utilisés, le CLI Wails effectue un processus de construction commun:
|
||||
|
||||
- Installation des dépendances frontend
|
||||
- Construire le projet frontend
|
||||
- Générer des ressources de construction
|
||||
- Compiler l'application
|
||||
- [optionnel] Compresser l'application
|
||||
|
||||
### Installation des dépendances frontend
|
||||
|
||||
#### Étapes CLI
|
||||
|
||||
- Si l'option `-s` est donné, cette étape est ignorée
|
||||
- Vérifie `wails.json` pour voir s'il y a une commande install dans `frontend:install`
|
||||
- S'il n'y en a pas, il saute cette étape
|
||||
- Si le fichier existe, vérifie si `package.json` existe dans le répertoire du frontend. S'il n'existe pas, il saute cette étape
|
||||
- Un hash MD5 est générée à partir du contenu du fichier `package.json`
|
||||
- Il vérifie l'existence de `package.json.md5` et, s'il existe, compare son contenu (une somme MD5) avec celui généré pour voir si le contenu a changé. S'ils sont les mêmes, cette étape est ignorée
|
||||
- Si `package.json.md5` n'existe pas, il le crée en utilisant la somme MD5 générée
|
||||
- Si une compilation est maintenant requise, ou si `node_modules` n'existe pas, ou si l'option `-f` est donnée, la commande install est exécutée dans le répertoire frontend
|
||||
|
||||
#### Étapes manuelles
|
||||
|
||||
Cette étape peut être réalisée à partir de la ligne de commande ou d'un script avec `npm install`.
|
||||
|
||||
### Construire le projet frontend
|
||||
|
||||
#### CLI Wails
|
||||
|
||||
- Si l'option `-s` est donné, cette étape est ignorée
|
||||
- Vérifie `wails.json` pour voir s'il y a une commande de construction dans la clé `frontend:build`
|
||||
- S'il n'y en a pas, il saute cette étape
|
||||
- S'il existe, il est exécuté dans le répertoire du frontend
|
||||
|
||||
#### Étapes manuelles
|
||||
|
||||
Cette étape peut être réalisée à partir de la ligne de commande ou d'un script avec `npm run build` ou quel que soit le script de construction du frontend.
|
||||
|
||||
### Générer les ressources
|
||||
|
||||
#### CLI Wails
|
||||
|
||||
- Si l'option `-nopackage` est activée, cette étape est ignorée
|
||||
- Si le fichier `build/appicon.png` n'existe pas, un fichier par défaut est créé
|
||||
- Pour Windows, voir [ Empaquetage pour Windows](#windows)
|
||||
- Si `build/windows/icon.ico` n'existe pas, il la créera à partir de l'image `build/appicon.png`.
|
||||
|
||||
##### Windows
|
||||
|
||||
- If `build/windows/icon.ico` does not exist, it will create it from `build/appicon.png` using icon sizes of 256, 128, 64, 48, 32 and 16. This is done using [winicon](https://github.com/leaanthony/winicon).
|
||||
- If the `build/windows/<projectname>.manifest` file does not exist, it creates it from a default version.
|
||||
- Compiles the application as a production build (above)
|
||||
- Uses [winres](https://github.com/tc-hib/winres) to bundle the icon and manifest into a `.syso` file ready for linking.
|
||||
|
||||
#### Étapes manuelles
|
||||
|
||||
- Create `icon.ico` using the [winicon](https://github.com/leaanthony/winicon) CLI tool (or any other tool).
|
||||
- Create / Update a `.manifest` file for your application
|
||||
- Use the [winres CLI](https://github.com/tc-hib/go-winres) to generate a `.syso` file.
|
||||
|
||||
### Compiler l'application
|
||||
|
||||
#### CLI Wails
|
||||
|
||||
- If the `-clean` flag is provided, the `build` directory is deleted and recreated
|
||||
- For `wails dev`, the following default Go flags are used: `-tags dev -gcflags "all=-N -l"`
|
||||
- For `wails build`, the following default Go flags are used: `-tags desktop,production -ldflags "-w -s"`
|
||||
- On Windows, `-ldflags "-w -h -H windowsgui"`
|
||||
- Additional tags passed to the CLI using `-tags` are added to the defaults
|
||||
- Additional ldflags passed to the CLI using `-ldflags` are added to the defaults
|
||||
- The `-o` flag is passed through
|
||||
- The Go compiler specified by `-compiler` will be used for compilation
|
||||
|
||||
#### Manual steps
|
||||
|
||||
- For dev build, the minimum command would be: `go build -tags dev -gcflags "all=-N -l"`
|
||||
- For production build, the minimum command would be: `go build -tags desktop,production -ldflags "-w -s -H windowsgui"`
|
||||
- Ensure that you compile in the same directory as the `.syso` file
|
||||
|
||||
### Compress application
|
||||
|
||||
#### CLI Wails
|
||||
|
||||
- If the `-upx` flag has been given, the `upx` program will be run to compress the application with the default settings
|
||||
- If `-upxflags` is also passed, these flags are used instead of the default ones
|
||||
|
||||
#### Manual steps
|
||||
|
||||
- Run `upx [flags]` manually to compress the application.
|
||||
@ -0,0 +1,191 @@
|
||||
# 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,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
basic,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Binding
|
||||
|
||||
In v1, it was possible to bind both arbitrary functions and structs. In v2, this has been simplified to only binding structs. The struct instances that were previously passed to the `Bind()` method in v1, are now specified in the `Bind` field of the [application options](../reference/options.mdx#application-options):
|
||||
|
||||
```go title="v1"
|
||||
app := wails.CreateApp(/* options */)
|
||||
app.Bind(basic)
|
||||
```
|
||||
|
||||
```go title="v2"
|
||||
err := wails.Run(&options.App{
|
||||
/* other options */
|
||||
Bind: []interface{}{
|
||||
basic,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
In v1, bound methods were available to the frontend at `window.backend`. This has changed to `window.go`.``
|
||||
|
||||
### Application Lifecycle
|
||||
|
||||
In v1, there were 2 special methods in a bound struct: `WailsInit()` and `WailsShutdown()`. These have been replaced with 3 lifecycle hooks as part of the [application options](../reference/options.mdx#application-options):
|
||||
|
||||
- [OnStartup](../reference/options.mdx#onstartup)
|
||||
- [OnShutdown](../reference/options.mdx#onshutdown)
|
||||
- [OnDomReady](../reference/options.mdx#ondomready)
|
||||
|
||||
Note: [OnDomReady](../reference/options.mdx#ondomready) replaces the `wails:ready` system event in v1.
|
||||
|
||||
These methods can be standard functions, but a common practice is to have them part of a struct:
|
||||
|
||||
```go title="v2"
|
||||
basic := NewBasicApp()
|
||||
err := wails.Run(&options.App{
|
||||
/* Other Options */
|
||||
OnStartup: basic.startup,
|
||||
OnShutdown: basic.shutdown,
|
||||
OnDomReady: basic.domready,
|
||||
})
|
||||
...
|
||||
type Basic struct {
|
||||
ctx context.Context
|
||||
}
|
||||
func (b *Basic) startup(ctx context.Context) {
|
||||
b.ctx = ctx
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### Runtime
|
||||
|
||||
The runtime in v2 is much richer than v1 with support for menus, window manipulation and better dialogs. The signature of the methods has changed slightly - please refer the the [Runtime Reference](../reference/runtime/intro.mdx).
|
||||
|
||||
In v1, the [runtime](../reference/runtime/intro.mdx) was available via a struct passed to `WailsInit()`. In v2, the runtime has been moved out to its own package. Each method in the runtime takes the `context.Context` that is passed to the [OnStartup](../reference/options.mdx#onstartup) method.
|
||||
|
||||
```go title="Runtime Example"
|
||||
package main
|
||||
|
||||
import "github.com/wailsapp/wails/v2/pkg/runtime"
|
||||
|
||||
type Basic struct {
|
||||
ctx context.Context
|
||||
}
|
||||
|
||||
// startup is called at application startup
|
||||
func (a *App) startup(ctx context.Context) {
|
||||
a.ctx = ctx
|
||||
runtime.LogInfo(ctx, "Application Startup called!")
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Assets
|
||||
|
||||
The _biggest_ change in v2 is how assets are handled.
|
||||
|
||||
In v1, assets were passed via 2 application options:
|
||||
|
||||
- `JS` - The application's JavaScript
|
||||
- `CSS` - The application's CSS
|
||||
|
||||
This meant that the responsibility of generating a single JS and CSS file was on the developer. This essentially required the use of complicated packers such as webpack.
|
||||
|
||||
In v2, Wails makes no assumptions about your frontend assets, just like a webserver. All of your application assets are passed to the application options as an `embed.FS`.
|
||||
|
||||
**This means there is no requirement to bundle your assets, encode images as Base64 or attempt the dark art of bundler configuration to use custom fonts**.
|
||||
|
||||
At startup, Wails will scan the given `embed.FS` for `index.html` and use its location as the root path for all the other application assets - just like a webserver would.
|
||||
|
||||
Example: An application has the following project layout. All final assets are placed in the `frontend/dist` directory:
|
||||
|
||||
```shell
|
||||
.
|
||||
├── build/
|
||||
├── frontend/
|
||||
│ └── dist/
|
||||
│ ├── index.html
|
||||
│ ├── main.js
|
||||
│ ├── main.css
|
||||
│ └── logo.svg
|
||||
├── main.go
|
||||
└── wails.json
|
||||
```
|
||||
|
||||
Those assets may be used by the application by simply creating an `embed.FS`:
|
||||
|
||||
```go title="Assets Example"
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
func main() {
|
||||
err := wails.Run(&options.App{
|
||||
/* Other Options */
|
||||
AssetServer: &assetserver.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>
|
||||
@ -0,0 +1,25 @@
|
||||
# Mouse Buttons
|
||||
|
||||
The Wails runtime intercepts mouse clicks to determine whether a frameless window needs resizing or a window needs to be moved. It has been asked how to detect when a mouse click has occurred, because `window.onclick` doesn't report the mouse buttons correctly. The following code shows how to detect mouse clicks:
|
||||
|
||||
```javascript
|
||||
window.addEventListener("mousedown", handleMouseButtonDown);
|
||||
|
||||
function handleMouseButtonDown(event) {
|
||||
if (event.button === 0) {
|
||||
// left mouse button
|
||||
} else if (event.button === 1) {
|
||||
// middle mouse button
|
||||
} else if (event.button === 2) {
|
||||
// right mouse button
|
||||
} else if (event.button === 3) {
|
||||
// back mouse button
|
||||
} else if (event.button === 4) {
|
||||
// forward mouse button
|
||||
} else {
|
||||
// other mouse button
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
|
||||
@ -0,0 +1,40 @@
|
||||
# Obfuscated Builds
|
||||
|
||||
Wails includes support for obfuscating your application using [garble](https://github.com/burrowers/garble).
|
||||
|
||||
To produce an obfuscated build, you can use the `-obfuscate` flag with the `wails build` command:
|
||||
|
||||
```bash
|
||||
wails build -obfuscated
|
||||
```
|
||||
|
||||
To customise the obfuscation settings, you can use the `-garbleargs` flag:
|
||||
|
||||
```bash
|
||||
wails build -obfuscated -garbleargs "-literals -tiny -seed=myrandomseed"
|
||||
```
|
||||
|
||||
These settings may be persisted in your [project config](../reference/project-config).
|
||||
|
||||
## How it works
|
||||
|
||||
In a standard build, all bound methods are available in the frontend under the `window.go` variable. When these methods are called, the corresponding backend method is called using the fully qualified function name. When using an obfuscated build, methods are bound using an ID instead of a name. The bindings generated in the `wailsjs` directory use these IDs to call the backend functions.
|
||||
|
||||
:::note
|
||||
|
||||
To ensure that your application will work in obfuscated mode, you must use the generated bindings under the `wailsjs` directory in your application.
|
||||
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
Importing the "Greet" method from the bindings like this:
|
||||
|
||||
```js
|
||||
import { Greet } from "../../wailsjs/go/main/App";
|
||||
|
||||
// snip
|
||||
Greet("World");
|
||||
```
|
||||
|
||||
will ensure that the method will work correctly in obfuscated mode, as the bindings will be regenerated with IDs and the call mechanism updated.
|
||||
@ -0,0 +1,10 @@
|
||||
# Overscroll
|
||||
|
||||
[Overscroll](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) is the "bounce effect" you sometimes get when you scroll beyond a page's content boundaries. This is common in mobile apps. This can be disabled using CSS:
|
||||
|
||||
```css
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,47 @@
|
||||
# Routing
|
||||
|
||||
Routing is a popular way to switch views in an application. This page offers some guidance around how to do that.
|
||||
|
||||
## Vue
|
||||
|
||||
The recommended approach for routing in Vue is [Hash Mode](https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode):
|
||||
|
||||
```js
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
//...
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Angular
|
||||
|
||||
The recommended approach for routing in Angular is [HashLocationStrategy](https://codecraft.tv/courses/angular/routing/routing-strategies#_hashlocationstrategy):
|
||||
|
||||
```ts
|
||||
RouterModule.forRoot(routes, { useHash: true });
|
||||
```
|
||||
|
||||
## React
|
||||
|
||||
The recommended approach for routing in React is [HashRouter](https://reactrouter.com/en/main/router-components/hash-router):
|
||||
|
||||
```jsx
|
||||
import { HashRouter } from "react-router-dom";
|
||||
|
||||
ReactDOM.render(
|
||||
<HashRouter basename={"/"}>
|
||||
{/* The rest of your app goes here */}
|
||||
<Routes>
|
||||
<Route path="/" element={<Page0 />} exact />
|
||||
<Route path="/page1" element={<Page1 />} />
|
||||
<Route path="/page2" element={<Page2 />} />
|
||||
{/* more... */}
|
||||
</Routes>
|
||||
</HashRouter>,
|
||||
root
|
||||
);
|
||||
```
|
||||
@ -0,0 +1,387 @@
|
||||
# Code Signing
|
||||
|
||||
This is a guide on how you can sign your binaries generated with Wails on MacOS and Windows. The guide will target CI environments, more specifically GitHub Actions.
|
||||
|
||||
## Windows
|
||||
|
||||
First off you need a code signing certificate. If you do not already have one, Microsoft's info page lists some providers [here](https://docs.microsoft.com/en-us/windows-hardware/drivers/dashboard/get-a-code-signing-certificate). Please note that an EV certificate is not required unless you need to write kernel-level software such as device drivers. For signing your Wails app, a standard code signing certificate will do just fine.
|
||||
|
||||
It may be a good idea to check with your certificate provider how to sign your binaries on your local machine before targeting automated build systems, just so you know if there are any special requirements. For instance, [here](https://www.ssl.com/how-to/using-your-code-signing-certificate/) is SSL.com's code signing guide for Windows. If you know how to sign locally, it will be easier to troubleshoot any potential issues in a CI environment. For instance, SSL.com code signing certificates require the `/tr` flag for [SignTool.exe](https://docs.microsoft.com/en-us/windows/win32/seccrypto/signtool) while other providers may only need the `/t` flag for providing the timestamping server. Popular GitHub Actions for signing Windows binaries like [this one](https://github.com/Dana-Prajea/code-sign-action) does not support the `/tr` flag on SignTool.exe. Therefore this guide will focus on signing our app manually with PowerShell commands, but you can use actions like the [code-sign-action](https://github.com/Dana-Prajea/code-sign-action) Action if you prefer.
|
||||
|
||||
First off, let's make sure we are able to build our Wails app in our GitHub CI. Here is a small workflow template:
|
||||
|
||||
```yaml
|
||||
name: "example"
|
||||
on:
|
||||
workflow_dispatch:
|
||||
# This Action only starts when you go to Actions and manually run the workflow.
|
||||
|
||||
jobs:
|
||||
package:
|
||||
strategy:
|
||||
matrix:
|
||||
platform: [windows-latest, macos-latest]
|
||||
go-version: [1.18]
|
||||
runs-on: ${{ matrix.platform }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Install Go
|
||||
uses: actions/setup-go@v2
|
||||
with:
|
||||
go-version: ${{ matrix.go-version }}
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
# You may need to manually build you frontend manually here, unless you have configured frontend build and install commands in wails.json.
|
||||
- name: Get Wails
|
||||
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
|
||||
- name: Build Wails app
|
||||
run: |
|
||||
wails build
|
||||
- name: upload artifacts macOS
|
||||
if: matrix.platform == 'macos-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-macos
|
||||
path: build/bin/*
|
||||
- name: upload artifacts windows
|
||||
if: matrix.platform == 'windows-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-windows
|
||||
path: build/bin/*
|
||||
```
|
||||
|
||||
Next we need to give the GitHub workflow access to our signing certificate. This is done by encoding your .pfx or .p12 certificate into a base64 string. To do this in PowerShell, you can use the following command assuming your certificate is called 'my-cert.p12':
|
||||
|
||||
```PowerShell
|
||||
certutil -encode .\my-cert.p12 my-cert-base64.txt
|
||||
```
|
||||
|
||||
You should now have your .txt file with the base64 encoded certificate. It should start with _-----BEGIN CERTIFICATE-----_ and end with _-----END CERTIFICATE-----_. Now you need to make two action secrets on GitHub. Navigate to _Settings -> Secrets -> Actions_ and create the two following secrets:
|
||||
|
||||
- **WIN_SIGNING_CERT** with the contents of your base64 encoded certificate text.
|
||||
- **WIN_SIGNING_CERT_PASSWORD** with the contents of your certificate password.
|
||||
|
||||
Now we're ready to implement the signing in our workflow using one of the two methods:
|
||||
|
||||
### Method 1: signing with commands
|
||||
|
||||
This method uses PowerShell commands to sign our app, and leaves you control over the entire signing process.
|
||||
|
||||
After the `"Build Wails app"` step, we can add the following step to our workflow:
|
||||
|
||||
```yaml
|
||||
- name: Sign Windows binaries
|
||||
if: matrix.platform == 'windows-latest'
|
||||
run: |
|
||||
echo "Creating certificate file"
|
||||
New-Item -ItemType directory -Path certificate
|
||||
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
|
||||
certutil -decode certificate\certificate.txt certificate\certificate.pfx
|
||||
echo "Signing our binaries"
|
||||
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd <signing algorithm> /t <timestamping server> /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' <path to binary>
|
||||
|
||||
```
|
||||
|
||||
This script creates a new directory for your certificate file, creates the certificate file from our base64 secret, converts it to a .pfx file, and finally signs the binary. The following variables needs to be replaced in the last line:
|
||||
|
||||
- **signing algorithm**: usually sha256.
|
||||
- **timestamping server**: URL to the timestamping server to use with your certificate.
|
||||
- **path to binary**: path to the binary you want to sign.
|
||||
|
||||
Given that our Wails config has `outputfilename` set to "app.exe" and that we have a certificate from SSL.com, this would be our workflow:
|
||||
|
||||
```yaml
|
||||
name: "example"
|
||||
on:
|
||||
workflow_dispatch:
|
||||
# This Action only starts when you go to Actions and manually run the workflow.
|
||||
|
||||
jobs:
|
||||
package:
|
||||
strategy:
|
||||
matrix:
|
||||
platform: [windows-latest, macos-latest]
|
||||
go-version: [1.18]
|
||||
runs-on: ${{ matrix.platform }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Install Go
|
||||
uses: actions/setup-go@v2
|
||||
with:
|
||||
go-version: ${{ matrix.go-version }}
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
|
||||
- name: Get Wails
|
||||
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
|
||||
- name: Build Wails app
|
||||
run: |
|
||||
wails build
|
||||
- name: Sign Windows binaries
|
||||
if: matrix.platform == 'windows-latest'
|
||||
run: |
|
||||
echo "Creating certificate file"
|
||||
New-Item -ItemType directory -Path certificate
|
||||
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
|
||||
certutil -decode certificate\certificate.txt certificate\certificate.pfx
|
||||
echo "Signing our binaries"
|
||||
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd sha256 /tr http://ts.ssl.com /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' .\build\bin\app.exe
|
||||
|
||||
- name: upload artifacts macOS
|
||||
if: matrix.platform == 'macos-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-macos
|
||||
path: build/bin/*
|
||||
- name: upload artifacts windows
|
||||
if: matrix.platform == 'windows-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-windows
|
||||
path: build/bin/*
|
||||
```
|
||||
|
||||
### Method 2: automatically signing with Action
|
||||
|
||||
It is possible to use a Windows code signing Action like [this](https://github.com/marketplace/actions/code-sign-a-file-with-pfx-certificate) one, but note it requires a SHA1 hash for the certificate and a certificate name. View an example of how to configure it on the Action's [marketplace](https://github.com/marketplace/actions/code-sign-a-file-with-pfx-certificate).
|
||||
|
||||
---
|
||||
|
||||
## MacOS
|
||||
|
||||
First off you need your code signing certificate from Apple. If you do not have one, a simple Google search will help you acquire one. Once you have your certificate, you need to export it and encode it to base64. [This tutorial](https://localazy.com/blog/how-to-automatically-sign-macos-apps-using-github-actions) shows you how to do that in an easy manner. Once you have exported your .p12 certificate file, you can encode it to base64 as seen in the tutorial with the following command:
|
||||
|
||||
```bash
|
||||
base64 Certificates.p12 | pbcopy
|
||||
```
|
||||
|
||||
Now you're ready to create some GitHub project secrets, just as with Windows:
|
||||
|
||||
- **APPLE_DEVELOPER_CERTIFICATE_P12_BASE64** with the contents of your newly copied base64 certificate.
|
||||
- **APPLE_DEVELOPER_CERTIFICATE_PASSWORD** with the contents of your certificate password.
|
||||
- **APPLE_PASSWORD** with the contents of an App-Specific password to your Apple-ID account which you can generate [here](https://appleid.apple.com/account/manage).
|
||||
|
||||
Let's make sure we are able to build our Wails app in our GitHub Action workflow. Here is a small template:
|
||||
|
||||
```yaml
|
||||
name: "example"
|
||||
on:
|
||||
workflow_dispatch:
|
||||
# This Action only starts when you go to Actions and manually run the workflow.
|
||||
|
||||
jobs:
|
||||
package:
|
||||
strategy:
|
||||
matrix:
|
||||
platform: [windows-latest, macos-latest]
|
||||
go-version: [1.18]
|
||||
runs-on: ${{ matrix.platform }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Install Go
|
||||
uses: actions/setup-go@v2
|
||||
with:
|
||||
go-version: ${{ matrix.go-version }}
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
|
||||
- name: Get Wails
|
||||
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
|
||||
- name: Build Wails app
|
||||
run: |
|
||||
wails build
|
||||
- name: upload artifacts macOS
|
||||
if: matrix.platform == 'macos-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-macos
|
||||
path: build/bin/*
|
||||
- name: upload artifacts windows
|
||||
if: matrix.platform == 'windows-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-windows
|
||||
path: build/bin/*
|
||||
```
|
||||
|
||||
For code signing on macOS, [gon](https://github.com/mitchellh/gon) is a very handy tool for code signing and communicating with Apple servers, also written in Go, and will be used in this guide.
|
||||
|
||||
After the `Build Wails app` step, add the following to the workflow:
|
||||
|
||||
```yaml
|
||||
- name: MacOS download gon for code signing and app notarization
|
||||
if: matrix.platform == 'macos-latest'
|
||||
run: |
|
||||
brew install mitchellh/gon/gon
|
||||
```
|
||||
|
||||
Now we need to configure some gon config files in our `build/darwin` directory:
|
||||
|
||||
1. gon-sign.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"source": ["./build/bin/app.app"],
|
||||
"bundle_id": "app.myapp",
|
||||
"apple_id": {
|
||||
"username": "my-appleid@email.com",
|
||||
"password": "@env:APPLE_PASSWORD"
|
||||
},
|
||||
"sign": {
|
||||
"application_identity": "Developer ID Application: My Name"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Where `source` is your Wails binary, `bundle_id` is your bundle ID, `apple_id` contains your Apple ID username and App-Specific password which you created earlier, and `sign.application_identity` is your identity which you can find by running the following command:
|
||||
|
||||
```bash
|
||||
security find-identity -v -p codesigning
|
||||
```
|
||||
|
||||
2. entitlements.plist:
|
||||
|
||||
```plist
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>com.apple.security.app-sandbox</key>
|
||||
<true/>
|
||||
<key>com.apple.security.network.client</key>
|
||||
<true/>
|
||||
<key>com.apple.security.network.server</key>
|
||||
<true/>
|
||||
<key>com.apple.security.files.user-selected.read-write</key>
|
||||
<true/>
|
||||
<key>com.apple.security.files.downloads.read-write</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
```
|
||||
|
||||
In this file you configure the entitlements you need for you app, e.g. camera permissions if your app uses the camera. Read more about entitlements [here](https://developer.apple.com/documentation/bundleresources/entitlements).
|
||||
|
||||
Make sure you have updated your `Info.plist` file with the same bundle ID as you entered in `gon-sign.json`. Here's an example `Info.plist` file:
|
||||
|
||||
```plist
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0"><dict>
|
||||
<key>CFBundlePackageType</key><string>APPL</string>
|
||||
<key>CFBundleName</key><string>MyApp</string>
|
||||
<key>CFBundleExecutable</key><string>app</string>
|
||||
<key>CFBundleIdentifier</key><string>app.myapp</string>
|
||||
<key>CFBundleVersion</key><string>0.1.0</string>
|
||||
<key>CFBundleGetInfoString</key><string>My app is cool and nice and chill and</string>
|
||||
<key>CFBundleShortVersionString</key><string>0.1.0</string>
|
||||
<key>CFBundleIconFile</key><string>iconfile</string>
|
||||
<key>LSMinimumSystemVersion</key><string>10.13.0</string>
|
||||
<key>NSHighResolutionCapable</key><string>true</string>
|
||||
<key>LSApplicationCategoryType</key><string>public.app-category.utilities</string>
|
||||
<key>NSHumanReadableCopyright</key><string>© Me</string>
|
||||
</dict></plist>
|
||||
```
|
||||
|
||||
Now we're ready to add the signing step in our workflow after building the Wails app:
|
||||
|
||||
```yaml
|
||||
- name: Import Code-Signing Certificates for macOS
|
||||
if: matrix.platform == 'macos-latest'
|
||||
uses: Apple-Actions/import-codesign-certs@v1
|
||||
with:
|
||||
# The certificates in a PKCS12 file encoded as a base64 string
|
||||
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
|
||||
# The password used to import the PKCS12 file.
|
||||
p12-password: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_PASSWORD }}
|
||||
- name: Sign our macOS binary
|
||||
if: matrix.platform == 'macos-latest'
|
||||
run: |
|
||||
echo "Signing Package"
|
||||
gon -log-level=info ./build/darwin/gon-sign.json
|
||||
```
|
||||
|
||||
Please note that signing binaries with Apple could take anywhere from minutes to hours.
|
||||
|
||||
## Combined workflow file:
|
||||
|
||||
Here is our GitHub workflow file with Windows + macOS combined:
|
||||
|
||||
```yaml
|
||||
name: "example combined"
|
||||
on:
|
||||
workflow_dispatch:
|
||||
# This Action only starts when you go to Actions and manually run the workflow.
|
||||
|
||||
jobs:
|
||||
package:
|
||||
strategy:
|
||||
matrix:
|
||||
platform: [windows-latest, macos-latest]
|
||||
go-version: [1.18]
|
||||
runs-on: ${{ matrix.platform }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Install Go
|
||||
uses: actions/setup-go@v2
|
||||
with:
|
||||
go-version: ${{ matrix.go-version }}
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 14
|
||||
# You may need to manually build you frontend here, unless you have configured frontend build and install commands in wails.json.
|
||||
- name: Get Wails
|
||||
run: go install github.com/wailsapp/wails/v2/cmd/wails@latest
|
||||
- name: Build Wails app
|
||||
run: |
|
||||
wails build
|
||||
- name: MacOS download gon for code signing and app notarization
|
||||
if: matrix.platform == 'macos-latest'
|
||||
run: |
|
||||
brew install mitchellh/gon/gon
|
||||
- name: Import Code-Signing Certificates for macOS
|
||||
if: matrix.platform == 'macos-latest'
|
||||
uses: Apple-Actions/import-codesign-certs@v1
|
||||
with:
|
||||
# The certificates in a PKCS12 file encoded as a base64 string
|
||||
p12-file-base64: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_P12_BASE64 }}
|
||||
# The password used to import the PKCS12 file.
|
||||
p12-password: ${{ secrets.APPLE_DEVELOPER_CERTIFICATE_PASSWORD }}
|
||||
- name: Sign our macOS binary
|
||||
if: matrix.platform == 'macos-latest'
|
||||
run: |
|
||||
echo "Signing Package"
|
||||
gon -log-level=info ./build/darwin/gon-sign.json
|
||||
- name: Sign Windows binaries
|
||||
if: matrix.platform == 'windows-latest'
|
||||
run: |
|
||||
echo "Creating certificate file"
|
||||
New-Item -ItemType directory -Path certificate
|
||||
Set-Content -Path certificate\certificate.txt -Value '${{ secrets.WIN_SIGNING_CERT }}'
|
||||
certutil -decode certificate\certificate.txt certificate\certificate.pfx
|
||||
echo "Signing our binaries"
|
||||
& 'C:/Program Files (x86)/Windows Kits/10/bin/10.0.17763.0/x86/signtool.exe' sign /fd sha256 /tr http://ts.ssl.com /f certificate\certificate.pfx /p '${{ secrets.WIN_SIGNING_CERT_PASSWORD }}' .\build\bin\Monitor.exe
|
||||
- name: upload artifacts macOS
|
||||
if: matrix.platform == 'macos-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-macos
|
||||
path: build/bin/*
|
||||
- name: upload artifacts windows
|
||||
if: matrix.platform == 'windows-latest'
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: wails-binaries-windows
|
||||
path: build/bin/*
|
||||
```
|
||||
|
||||
# End notes
|
||||
|
||||
This guide inspired by the RiftShare project and its workflow, which is highly recommended to check out [here](https://github.com/achhabra2/riftshare/blob/main/.github/workflows/build.yaml).
|
||||
@ -0,0 +1,81 @@
|
||||
# Single Instance Lock
|
||||
|
||||
Single instance lock is a mechanism that allows you to prevent multiple instances of your app from running at the same time.
|
||||
It is useful for apps that are designed to open files from the command line or from the OS file explorer.
|
||||
|
||||
## Important
|
||||
|
||||
Single Instance Lock does not implement a secure communications protocol between instances. When using single instance lock,
|
||||
your app should treat any data passed to it from second instance callback as untrusted.
|
||||
You should verify that args that you receive are valid and don't contain any malicious data.
|
||||
|
||||
## How it works
|
||||
|
||||
Windows: Single instance lock is implemented using a named mutex. The mutex name is generated from the unique id that you provide. Data is passed to the first instance via a shared window using [SendMessage](https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-sendmessage)
|
||||
macOS: Single instance lock is implemented using a named mutex. The mutex name is generated from the unique id that you provide. Data is passed to the first instance via [NSDistributedNotificationCenter](https://developer.apple.com/documentation/foundation/nsdistributednotificationcenter)
|
||||
Linux: Single instance lock is implemented using [dbus](https://www.freedesktop.org/wiki/Software/dbus/). The dbus name is generated from the unique id that you provide. Data is passed to the first instance via [dbus](https://www.freedesktop.org/wiki/Software/dbus/)
|
||||
|
||||
## Usage
|
||||
|
||||
When creating your app, you can enable single instance lock by passing a `SingleInstanceLock` struct to the `App` struct.
|
||||
Use the `UniqueId` field to specify a unique id for your app.
|
||||
This id is used to generate the mutex name on Windows and macOS and the dbus name on Linux. Use a UUID to ensure that the id is unique.
|
||||
The `OnSecondInstanceLaunch` field is used to specify a callback that is called when a second instance of your app is launched.
|
||||
The callback receives a `SecondInstanceData` struct that contains the command line arguments passed to the second instance and the working directory of the second instance.
|
||||
|
||||
Note that OnSecondInstanceLaunch don't trigger windows focus.
|
||||
You need to call `runtime.WindowUnminimise` and `runtime.Show` to bring your app to the front.
|
||||
Note that on linux systems window managers may prevent your app from being brought to the front to avoid stealing focus.
|
||||
|
||||
```go title="main.go"
|
||||
var wailsContext *context.Context
|
||||
|
||||
// NewApp creates a new App application struct
|
||||
func NewApp() *App {
|
||||
return &App{}
|
||||
}
|
||||
|
||||
// startup is called when the app starts. The context is saved
|
||||
// so we can call the runtime methods
|
||||
func (a *App) startup(ctx context.Context) {
|
||||
wailsContext = &ctx
|
||||
}
|
||||
|
||||
func (a *App) onSecondInstanceLaunch(secondInstanceData options.SecondInstanceData) {
|
||||
secondInstanceArgs = secondInstanceData.Args
|
||||
|
||||
println("user opened second instance", strings.Join(secondInstanceData.Args, ","))
|
||||
println("user opened second from", secondInstanceData.WorkingDirectory)
|
||||
runtime.WindowUnminimise(*wailsContext)
|
||||
runtime.Show(*wailsContext)
|
||||
go runtime.EventsEmit(*wailsContext, "launchArgs", secondInstanceArgs)
|
||||
}
|
||||
|
||||
func main() {
|
||||
// Create an instance of the app structure
|
||||
app := NewApp()
|
||||
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "wails-open-file",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
|
||||
OnStartup: app.startup,
|
||||
SingleInstanceLock: &options.SingleInstanceLock{
|
||||
UniqueId: "e3984e08-28dc-4e3d-b70a-45e961589cdc",
|
||||
OnSecondInstanceLaunch: app.onSecondInstanceLaunch,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
println("Error:", err.Error())
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,153 @@
|
||||
# SvelteKit
|
||||
|
||||
This guide will go into:
|
||||
|
||||
1. Miminal Installation Steps - The steps needed to get a minimum Wails setup working for SvelteKit.
|
||||
2. Install Script - Bash script for accomplishing the Minimal Installation Steps with optional Wails branding.
|
||||
3. Important Notes - Issues that can be encountered when using SvelteKit + Wails and fixes.
|
||||
|
||||
## 1. Minimal Installation Steps
|
||||
|
||||
##### Install Wails for Svelte.
|
||||
|
||||
- `wails init -n myapp -t svelte`
|
||||
|
||||
##### Delete the svelte frontend.
|
||||
|
||||
- Navigate into your newly created myapp folder.
|
||||
- Delete the folder named "frontend"
|
||||
|
||||
##### While in the Wails project root. Use your favorite package manager and install SvelteKit as the new frontend. Follow the prompts.
|
||||
|
||||
- `npm create svelte@latest frontend`
|
||||
|
||||
##### Modify wails.json.
|
||||
|
||||
- Add `"wailsjsdir": "./frontend/src/lib",` Do note that this is where your Go and runtime functions will appear.
|
||||
- Change your package manager frontend here if not using npm.
|
||||
|
||||
##### Modify main.go.
|
||||
|
||||
- The first comment `//go:embed all:frontend/dist` needs to be changed to `//go:embed all:frontend/build`
|
||||
|
||||
##### Install/remove dependencies using your favorite package manager.
|
||||
|
||||
- Navigate into your "frontend" folder.
|
||||
- `npm i`
|
||||
- `npm uninstall @sveltejs/adapter-auto`
|
||||
- `npm i -D @sveltejs/adapter-static`
|
||||
|
||||
##### Change adapter in svelte.config.js
|
||||
|
||||
- First line of file change `import adapter from '@sveltejs/adapter-auto';` to `import adapter from '@sveltejs/adapter-static';`
|
||||
|
||||
##### Put SvelteKit into SPA mode with prerendering.
|
||||
|
||||
- Create a file under myapp/frontend/src/routes/ named +layout.ts/+layout.js.
|
||||
- Add two lines into the newly created file `export const prerender = true` and `export const ssr = false`
|
||||
|
||||
##### Test installation.
|
||||
|
||||
- Navigate back into the Wails project root (one directory up).
|
||||
- run `wails dev`
|
||||
- If the application doesn't run please check through the previous steps.
|
||||
|
||||
## 2. Install Script
|
||||
|
||||
##### This Bash Script does the steps listed above. Make sure to read over the script and understand what the script is doing on your computer.
|
||||
|
||||
- Create a file sveltekit-wails.sh
|
||||
- Copy the below code into the new file then save it.
|
||||
- Make it executable with `chmod +x sveltekit-wails.sh`
|
||||
- Brand is an optional param below that adds back in the wails branding. Leave third param blank to not insert the Wails branding.
|
||||
- Example usage: `./sveltekit-wails.sh pnpm newapp brand`
|
||||
|
||||
##### sveltekit-wails.sh:
|
||||
|
||||
```
|
||||
manager=$1
|
||||
project=$2
|
||||
brand=$3
|
||||
wails init -n $project -t svelte
|
||||
cd $project
|
||||
sed -i "s|npm|$manager|g" wails.json
|
||||
sed -i 's|"auto",|"auto",\n "wailsjsdir": "./frontend/src/lib",|' wails.json
|
||||
sed -i "s|all:frontend/dist|all:frontend/build|" main.go
|
||||
if [[ -n $brand ]]; then
|
||||
mv frontend/src/App.svelte +page.svelte
|
||||
sed -i "s|'./assets|'\$lib/assets|" +page.svelte
|
||||
sed -i "s|'../wails|'\$lib/wails|" +page.svelte
|
||||
mv frontend/src/assets .
|
||||
fi
|
||||
rm -r frontend
|
||||
$manager create svelte@latest frontend
|
||||
if [[ -n $brand ]]; then
|
||||
mv +page.svelte frontend/src/routes/+page.svelte
|
||||
mkdir frontend/src/lib
|
||||
mv assets frontend/src/lib/
|
||||
fi
|
||||
cd frontend
|
||||
$manager i
|
||||
$manager uninstall @sveltejs/adapter-auto
|
||||
$manager i -D @sveltejs/adapter-static
|
||||
echo -e "export const prerender = true\nexport const ssr = false" > src/routes/+layout.ts
|
||||
sed -i "s|-auto';|-static';|" svelte.config.js
|
||||
cd ..
|
||||
wails dev
|
||||
```
|
||||
|
||||
## 3. Important Notes
|
||||
|
||||
##### Server files will cause build failures.
|
||||
|
||||
- \+layout.server.ts, +page.server.ts, +server.ts or any file with "server" in the name will fail to build as all routes are prerendered.
|
||||
|
||||
##### The Wails runtime unloads with full page navigations!
|
||||
|
||||
- Anything that causes full page navigations: `window.location.href = '/<some>/<page>'` or Context menu reload when using wails dev. What this means is that you can end up losing the ability to call any runtime breaking the app. There are two ways to work around this.
|
||||
- Use `import { goto } from '$app/navigation'` then call `goto('/<some>/<page>')` in your +page.svelte. This will prevent a full page navigation.
|
||||
- If full page navigation can't be prevented the Wails runtime can be added to all pages by adding the below into the `<head>` of myapp/frontend/src/app.html
|
||||
|
||||
```
|
||||
<head>
|
||||
...
|
||||
<meta name="wails-options" content="noautoinject" />
|
||||
<script src="/wails/ipc.js"></script>
|
||||
<script src="/wails/runtime.js"></script>
|
||||
...
|
||||
</head>
|
||||
```
|
||||
|
||||
See https://wails.io/docs/guides/frontend for more information.
|
||||
|
||||
##### Inital data can be loaded and refreshed from +page.ts/+page.js to +page.svelte.
|
||||
|
||||
- \+page.ts/+page.js works well with load() https://kit.svelte.dev/docs/load#page-data
|
||||
- invalidateAll() in +page.svelte will call load() from +page.ts/+page.js https://kit.svelte.dev/docs/load#rerunning-load-functions-manual-invalidation.
|
||||
|
||||
##### Error Handling
|
||||
|
||||
- Expected errors using Throw error works in +page.ts/+page.js with a +error.svelte page. https://kit.svelte.dev/docs/errors#expected-errors
|
||||
- Unexpected errors will cause the application to become unusable. Only recovery option (known so far) from unexpected errors is to reload the app. To do this create a file myapp/frontend/src/hooks.client.ts then add the below code to the file.
|
||||
|
||||
```
|
||||
import { WindowReloadApp } from '$lib/wailsjs/runtime/runtime'
|
||||
export async function handleError() {
|
||||
WindowReloadApp()
|
||||
}
|
||||
```
|
||||
|
||||
##### Using Forms and handling functions
|
||||
|
||||
- The simplest way is to call a function from the form is the standard, bind:value your variables and prevent submission `<form method="POST" on:submit|preventDefault={handle}>`
|
||||
- The more advanced way is to use:enhance (progressive enhancement) which will allow for convenient access to formData, formElement, submitter. The important note is to always cancel() the form which prevents server side behavior. https://kit.svelte.dev/docs/form-actions#progressive-enhancement Example:
|
||||
|
||||
```
|
||||
<form method="POST" use:enhance={({cancel, formData, formElement, submitter}) => {
|
||||
cancel()
|
||||
console.log(Object.fromEntries(formData))
|
||||
console.log(formElement)
|
||||
console.log(submitter)
|
||||
handle()
|
||||
}}>
|
||||
```
|
||||
@ -0,0 +1,97 @@
|
||||
# Templates
|
||||
|
||||
Wails generates projects from pre-created templates. In v1, this was a difficult to maintain set of projects that were subject to going out of date. In v2, to empower the community, a couple of new features have been added for templates:
|
||||
|
||||
- Ability to generate projects from [Remote Templates](../reference/cli.mdx#remote-templates)
|
||||
- Tooling to help create your own templates
|
||||
|
||||
## Creating Templates
|
||||
|
||||
To create a template, you can use the `wails generate template` command. To generate a default template, run:
|
||||
|
||||
`wails generate template -name mytemplate`
|
||||
|
||||
This creates the directory "mytemplate" with default files:
|
||||
|
||||
```shell title=mytemplate/
|
||||
.
|
||||
|-- NEXTSTEPS.md
|
||||
|-- README.md
|
||||
|-- app.tmpl.go
|
||||
|-- frontend
|
||||
| `-- dist
|
||||
| |-- assets
|
||||
| | |-- fonts
|
||||
| | | |-- OFL.txt
|
||||
| | | `-- nunito-v16-latin-regular.woff2
|
||||
| | `-- images
|
||||
| | `-- logo-dark.svg
|
||||
| |-- index.html
|
||||
| |-- main.css
|
||||
| `-- main.js
|
||||
|-- go.mod.tmpl
|
||||
|-- main.tmpl.go
|
||||
|-- template.json
|
||||
`-- wails.tmpl.json
|
||||
```
|
||||
|
||||
### Template Overview
|
||||
|
||||
The default template consists of the following files and directories:
|
||||
|
||||
| Filename / Dir | Description |
|
||||
| --------------- | -------------------------------------------- |
|
||||
| NEXTSTEPS.md | Instructions on how to complete the template |
|
||||
| README.md | The README published with the template |
|
||||
| app.tmpl.go | `app.go` template file |
|
||||
| frontend/ | The directory containing frontend assets |
|
||||
| go.mod.tmpl | `go.mod` template file |
|
||||
| main.tmpl.go | `main.go` template file |
|
||||
| template.json | The template metadata |
|
||||
| wails.tmpl.json | `wails.json` template file |
|
||||
|
||||
At this point it is advisable to follow the steps in `NEXTSTEPS.md`.
|
||||
|
||||
## Creating a Template from an Existing Project
|
||||
|
||||
It's possible to create a template from an existing frontend project by passing the path to the project when generating the template. We will now walk through how to create a Vue 3 template:
|
||||
|
||||
- Install the vue cli: `npm install -g @vue/cli`
|
||||
- Create the default project: `vue create vue3-base`
|
||||
- Select `Default (Vue 3) ([Vue 3] babel, eslint)`
|
||||
- After the project has been generated, run:
|
||||
|
||||
```shell
|
||||
> wails generate template -name wails-vue3-template -frontend .\vue3-base\
|
||||
Extracting base template files...
|
||||
Migrating existing project files to frontend directory...
|
||||
Updating package.json data...
|
||||
Renaming package.json -> package.tmpl.json...
|
||||
Updating package-lock.json data...
|
||||
Renaming package-lock.json -> package-lock.tmpl.json...
|
||||
```
|
||||
|
||||
- The template may now be customised as specified in the `NEXTSTEPS.md` file
|
||||
- Once the files are ready, it can be tested by running: `wails init -n my-vue3-project -t .\wails-vue3-template\`
|
||||
- To test the new project, run: `cd my-vue3-project` then `wails build`
|
||||
- Once the project has compiled, run it: `.\build\bin\my-vue3-project.exe`
|
||||
- You should have a fully functioning Vue3 application:
|
||||
|
||||
```mdx-code-block
|
||||
<div className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vue3-template.png").default}
|
||||
width="50%"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Publishing Templates
|
||||
|
||||
Publishing a template is simply pushing the files to GitHub. The following best practice is encouraged:
|
||||
|
||||
- Remove any unwanted files and directories (such as `.git`) from your frontend directory
|
||||
- Ensure that `template.json` is complete, especially `helpurl`
|
||||
- Push the files to GitHub
|
||||
- Create a PR on the [Community Templates](../community/templates.mdx) page
|
||||
- Announce the template on the [Template Announcement](https://github.com/wailsapp/wails/discussions/825) discussion board
|
||||
@ -0,0 +1,368 @@
|
||||
# Troubleshooting
|
||||
|
||||
An assortment of troubleshooting tips.
|
||||
|
||||
## 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.
|
||||
|
||||
## My application is displaying a white/blank screen
|
||||
|
||||
Check that your application includes the assets from the correct directory. In your `main.go` file, you will have something similar to the following code:
|
||||
|
||||
```go
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
```
|
||||
|
||||
Check that `frontend/dist` contains your application assets.
|
||||
|
||||
### Mac
|
||||
|
||||
If this happens on Mac, try adding the following to your `Info.plist`:
|
||||
|
||||
```xml
|
||||
<key>NSAppTransportSecurity</key>
|
||||
<dict>
|
||||
<key>NSAllowsLocalNetworking</key>
|
||||
<true/>
|
||||
</dict>
|
||||
```
|
||||
|
||||
Reference: https://github.com/wailsapp/wails/issues/1504#issuecomment-1174317433
|
||||
|
||||
## Mac application not valid
|
||||
|
||||
If your built application looks like this in finder:
|
||||
|
||||
```mdx-code-block
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={
|
||||
require("@site/static/img/troubleshooting/invalid_mac_app.png").default
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
```
|
||||
|
||||
it's likely that your application's `info.plist` is invalid. Update the file in `build/<yourapp>.app/Contents/info.plist` and check if the data is valid, EG check the binary name is correct. To persist the changes, copy the file back to the `build/darwin` directory.
|
||||
|
||||
## My application is not displaying the correct icon in Windows Explorer
|
||||
|
||||
If your application is not displaying the correct icon, try deleting the hidden `IconCache.db` file located in the `C:\Users\<your username>\AppData\Local` directory. This will force Windows to rebuild the icon cache.
|
||||
|
||||
Source: https://github.com/wailsapp/wails/issues/2360#issuecomment-1556070036
|
||||
|
||||
## Cannot call backend method from frontend with variadic arguments
|
||||
|
||||
If you have a backend method defined with variadic parameters, eg:
|
||||
|
||||
```go
|
||||
func (a *App) TestFunc(msg string, args ...interface{}) error {
|
||||
// Code
|
||||
}
|
||||
```
|
||||
|
||||
calling this method from the frontend like this will fail:
|
||||
|
||||
```js
|
||||
var msg = "Hello: ";
|
||||
var args = ["Go", "JS"];
|
||||
window.go.main.App.TestFunc(msg, ...args)
|
||||
.then((result) => {
|
||||
//do things here
|
||||
})
|
||||
.catch((error) => {
|
||||
//handle error
|
||||
});
|
||||
```
|
||||
|
||||
Workaround:
|
||||
|
||||
```js
|
||||
var msg = "Hello ";
|
||||
var args = ["Go", "JS"];
|
||||
window.go.main.App.TestFunc(msg, args)
|
||||
.then((result) => {
|
||||
//without the 3 dots
|
||||
//do things here
|
||||
})
|
||||
.catch((error) => {
|
||||
//handle error
|
||||
});
|
||||
```
|
||||
|
||||
Credit: https://github.com/wailsapp/wails/issues/1186
|
||||
|
||||
## I'm having getting proxy errors when trying to install Wails
|
||||
|
||||
If you are getting errors like this:
|
||||
|
||||
```
|
||||
"https://proxy.golang.org/github.com/wailsapp/wails/cmd/wails/@v/list": dial tcp 172.217.163.49:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
|
||||
```
|
||||
|
||||
it's probably because the official Go Proxy is being blocked (Users in China have reported this). The solution is to set up the proxy manually, eg:
|
||||
|
||||
```
|
||||
go env -w GO111MODULE=on
|
||||
go env -w GOPROXY=https://goproxy.cn,direct
|
||||
```
|
||||
|
||||
Source: https://github.com/wailsapp/wails/issues/1233
|
||||
|
||||
## The generated TypeScript doesn't have the correct types
|
||||
|
||||
Sometimes the generated TypeScript doesn't have the correct types. To mitigate this, it is possible to specify what types should be generated using the `ts_type` struct tag. For more details, please read [this](https://github.com/tkrajina/typescriptify-golang-structs#custom-types).
|
||||
|
||||
## When I navigate away from `index.html`, I am unable to call methods on the frontend
|
||||
|
||||
If you navigate away from `index.html` to a new html file, the context will be lost. This can be fixed by adding the following imports to the `<head>` section of any new page you navigate to:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<script src="/wails/ipc.js"></script>
|
||||
<script src="/wails/runtime.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
Source: https://github.com/wailsapp/wails/discussions/1512
|
||||
|
||||
## I get `too many open files` errors on my Mac when I run `wails dev`
|
||||
|
||||
By default, macOS will only allow you to open a maximum of 256 files. This can affect the `wails dev` command. This limit can be increased by running: `ulimit -n 1024` in the terminal.
|
||||
|
||||
FSNotify is [looking to move to Apple's fsevents](https://github.com/fsnotify/fsnotify/issues/11) for Mac. If this isn't completed soon, we will create our own implementation, tracked [here](https://github.com/wailsapp/wails/issues/1733).
|
||||
|
||||
## My Mac app gives me weird compilation errors
|
||||
|
||||
A few users have reported seeing compilation errors such as the following:
|
||||
|
||||
```shell
|
||||
# github.com/wailsapp/wails/v2/internal/frontend/desktop/darwin
|
||||
In file included from ../../pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.44.2/internal/frontend/desktop/darwin/callbacks.go:9:
|
||||
In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/Foundation.h:12:
|
||||
/Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSBundle.h:91:143: error: function does not return NSString
|
||||
- (NSAttributedString *)localizedAttributedStringForKey:(NSString *)key value:(nullable NSString *)value table:(nullable NSString *)tableName NS_FORMAT_ARGUMENT(1) NS_REFINED_FOR_SWIFT API_AVAILABLE(macos(12.0), ios(15.0), watchos(8.0), tvos(15.0));
|
||||
~~~~~~~~~~~~~~ ^ ~
|
||||
/Library/Developer/CommandLineTools/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Foundation.framework/Headers/NSObjCRuntime.h:103:48: note: expanded from macro 'NS_FORMAT_ARGUMENT'
|
||||
#define NS_FORMAT_ARGUMENT(A) __attribute__ ((format_arg(A)))
|
||||
```
|
||||
|
||||
This is _normally_ due to a mismatch with the OS version you are running and the version of the XCode Command Line Tools installed. If you see an error like this, try upgrading your XCode Command Line Tools to the latest version.
|
||||
|
||||
If reinstalling Xcode Command Tools still fails, you can check the path where the toolkit is located using:
|
||||
|
||||
`xcode-select -p`
|
||||
|
||||
If `/Applications/Xcode.app/Contents/Developer` is displayed, run `sudo xcode-select --switch /Library/Developer/CommandLineTools`
|
||||
|
||||
Sources: https://github.com/wailsapp/wails/issues/1806 and https://github.com/wailsapp/wails/issues/1140#issuecomment-1290446496
|
||||
|
||||
## My application won't compile on Mac
|
||||
|
||||
If you are getting errors like this:
|
||||
|
||||
```shell
|
||||
l1@m2 GoEasyDesigner % go build -tags dev -gcflags "all=-N -l"
|
||||
/Users/l1/sdk/go1.20.5/pkg/tool/darwin_arm64/link: running clang failed: exit status 1
|
||||
Undefined symbols for architecture arm64:
|
||||
"_OBJC_CLASS_$_UTType", referenced from:
|
||||
objc-class-ref in 000016.o
|
||||
ld: symbol(s) not found for architecture arm64
|
||||
clang: error: linker command failed with exit code 1 (use -v to see invocation)
|
||||
```
|
||||
Ensure you have the latest SDK installed. If so and you're still experiencing this issue, try the following:
|
||||
|
||||
```shell
|
||||
export CGO_LDFLAGS="-framework UniformTypeIdentifiers" && go build -tags dev -gcflags "all=-N -l"
|
||||
```
|
||||
|
||||
Sources: https://github.com/wailsapp/wails/pull/2925#issuecomment-1726828562
|
||||
|
||||
|
||||
--
|
||||
|
||||
## Cannot start service: Host version "x.x.x does not match binary version "x.x.x"
|
||||
|
||||
It's preferable to add `frontend/node_modules` and `frontend/package-lock.json` to your `.gitignore`. Otherwise when opening your repository on another machine that may have different versions of Node installed, you may not be able to run your application.
|
||||
|
||||
If this does happen, simply delete `frontend/node_modules` and `frontend/package-lock.json` and run your `wails build` or `wails dev` command again.
|
||||
|
||||
## Build process stuck on "Generating bindings"
|
||||
|
||||
Bindings generation process runs your application in a special mode. If application, intentionally or unintentionally, contains an endless loop (i.e. not exiting after `wails.Run()` finished), this can lead to build process stuck on the stage of bindings generation. Please make sure your code exits properly.
|
||||
|
||||
## Mac application flashes white at startup
|
||||
|
||||
This is due to the default background of the webview being white. If you want to use the window background colour instead, you can make the webview background transparent using the following config:
|
||||
|
||||
```go
|
||||
err := wails.Run(&options.App{
|
||||
Title: "macflash",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
// Other settings
|
||||
Mac: &mac.Options{
|
||||
WebviewIsTransparent: true,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## I get a "Microsoft Edge can't read or write to its data directory" error when running my program as admin on Windows
|
||||
|
||||
You set your program to require admin permissions and it worked great! Unfortunately, some users are seeing a "Microsoft Edge can't read or write to its data directory" error when running it.
|
||||
|
||||
When a Windows machine has two local accounts:
|
||||
|
||||
- Alice, an admin
|
||||
- Bob, a regular user
|
||||
|
||||
Bob sees a UAC prompt when running your program. Bob enters Alice's admin credentials into this prompt. The app launches with admin permissions under Alice's account.
|
||||
|
||||
Wails instructs WebView2 to store user data at the specified `WebviewUserDataPath`. It defaults to `%APPDATA%\[BinaryName.exe]`.
|
||||
|
||||
Because the application is running under Alice's account, `%APPDATA%\[BinaryName.exe]` resolves to `C:\Users\Alice\AppData\Roaming\[BinaryName.exe]`.
|
||||
|
||||
WebView2 [creates some child processes under Bob's logged-in account instead of Alice's admin account](https://github.com/MicrosoftEdge/WebView2Feedback/issues/932#issue-807464179). Since Bob cannot access `C:\Users\Alice\AppData\Roaming\[BinaryName.exe]`, the "Microsoft Edge can't read or write to its data directory" error is shown.
|
||||
|
||||
Possible solution #1:
|
||||
|
||||
Refactor your application to work without constant admin permissions. If you just need to perform a small set of admin tasks (such as running an updater), you can run your application with the minimum permissions and then use the `runas` command to run these tasks with admin permissions as needed:
|
||||
|
||||
```go
|
||||
//go:build windows
|
||||
|
||||
package sample
|
||||
|
||||
import (
|
||||
"golang.org/x/sys/windows"
|
||||
"syscall"
|
||||
)
|
||||
|
||||
// Calling RunAs("C:\path\to\my\updater.exe") shows Bob a UAC prompt. Bob enters Alice's admin credentials. The updater launches with admin permissions under Alice's account.
|
||||
func RunAs(path string) error {
|
||||
verbPtr, _ := syscall.UTF16PtrFromString("runas")
|
||||
exePtr, _ := syscall.UTF16PtrFromString(path)
|
||||
cwdPtr, _ := syscall.UTF16PtrFromString("")
|
||||
argPtr, _ := syscall.UTF16PtrFromString("")
|
||||
|
||||
var showCmd int32 = 1 //SW_NORMAL
|
||||
|
||||
err := windows.ShellExecute(0, verbPtr, exePtr, argPtr, cwdPtr, showCmd)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
return nil
|
||||
}
|
||||
```
|
||||
|
||||
Possible solution #2:
|
||||
|
||||
Run your application with extended permissions. If you absolutely must run with constant admin permissions, WebView2 will function correctly if you use a data directory accessible by both users and you also launch your app with the `SeBackupPrivilege`, `SeDebugPrivilege`, and `SeRestorePrivilege` permissions. Here's an example:
|
||||
|
||||
```go
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"os"
|
||||
"runtime"
|
||||
|
||||
"github.com/fourcorelabs/wintoken"
|
||||
"github.com/hectane/go-acl"
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/windows"
|
||||
)
|
||||
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
const (
|
||||
fixedTokenKey = "SAMPLE_RANDOM_KEY"
|
||||
fixedTokenVal = "with-fixed-token"
|
||||
webviewDir = "C:\\ProgramData\\Sample"
|
||||
)
|
||||
|
||||
func runWithFixedToken() {
|
||||
println("Re-launching self")
|
||||
token, err := wintoken.OpenProcessToken(0, wintoken.TokenPrimary) //pass 0 for own process
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer token.Close()
|
||||
|
||||
token.EnableTokenPrivileges([]string{
|
||||
"SeBackupPrivilege",
|
||||
"SeDebugPrivilege",
|
||||
"SeRestorePrivilege",
|
||||
})
|
||||
|
||||
cmd := exec.Command(os.Args[0])
|
||||
cmd.Args = os.Args
|
||||
cmd.Env = os.Environ()
|
||||
cmd.Env = append(cmd.Env, fmt.Sprintf("%v=%v", fixedTokenKey, fixedTokenVal))
|
||||
cmd.Stdin = os.Stdin
|
||||
cmd.Stdout = os.Stdout
|
||||
cmd.Stderr = os.Stderr
|
||||
cmd.SysProcAttr = &syscall.SysProcAttr{Token: syscall.Token(token.Token())}
|
||||
if err := cmd.Run(); err != nil {
|
||||
println("Error after launching self:", err)
|
||||
os.Exit(1)
|
||||
}
|
||||
println("Clean self launch :)")
|
||||
os.Exit(0)
|
||||
}
|
||||
|
||||
func main() {
|
||||
if runtime.GOOS == "windows" && os.Getenv(fixedTokenKey) != fixedTokenVal {
|
||||
runWithFixedToken()
|
||||
}
|
||||
|
||||
println("Setting data dir to", webviewDir)
|
||||
if err := os.MkdirAll(webviewDir, os.ModePerm); err != nil {
|
||||
println("Failed creating dir:", err)
|
||||
}
|
||||
if err := acl.Chmod(webviewDir, 0777); err != nil {
|
||||
println("Failed setting ACL on dir:", err)
|
||||
}
|
||||
|
||||
app := NewApp()
|
||||
|
||||
err := wails.Run(&options.App{
|
||||
Title: "sample-data-dir",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
Windows: &windows.Options{
|
||||
WebviewUserDataPath: webviewDir,
|
||||
},
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
println("Error:", err.Error())
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you use a data directory accessible by both users but not the extended privileges, you will receive a WebView2 `80010108 The object invoked has disconnected from its clients` error.
|
||||
|
||||
Possible future solution #3: [run WebView2 using an in-memory mode if implemented](https://github.com/MicrosoftEdge/WebView2Feedback/issues/3637#issuecomment-1728300982).
|
||||
|
||||
## WebView2 installation succeeded, but the wails doctor command shows that it is not installed
|
||||
|
||||
If you have installed WebView2, but the `wails doctor` command shows that it is not installed, it is likely that the WebView2 runtime installed was for a different architecture. You can download the correct runtime from [here](https://developer.microsoft.com/en-us/microsoft-edge/webview2/).
|
||||
|
||||
Source: https://github.com/wailsapp/wails/issues/2917
|
||||
|
||||
## WebVie2wProcess failed with kind
|
||||
|
||||
If your Windows app generates this kind of error, you can check out what the error means [here](https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2processfailedkind?view=webview2-winrt-1.0.2045.28).
|
||||
|
||||
@ -0,0 +1,82 @@
|
||||
|
||||
# Visual Studio Code
|
||||
|
||||
This page is for miscellaneous tips and tricks when using Visual Studio Code with Wails.
|
||||
|
||||
## Vetur Configuration
|
||||
|
||||
Many thanks to [@Lyimmi](https://github.com/Lyimmi) for this tip. Originally posted [here](https://github.com/wailsapp/wails/issues/1791#issuecomment-1228158349).
|
||||
|
||||
Vetur is a popular plugin for Visual Studio Code that provides syntax highlighting and code completion for Vue projects. When loading a Wails project in VSCode, Vetur will throw an error as it is expecting to find the frontend project in the root directory. To fix this, you can do the following:
|
||||
|
||||
Create a file named `vetur.config.js` in the project's root.
|
||||
|
||||
```javascript
|
||||
// vetur.config.js
|
||||
/** @type {import('vls').VeturConfig} */
|
||||
module.exports = {
|
||||
// **optional** default: `{}`
|
||||
// override vscode settings
|
||||
// Notice: It only affects the settings used by Vetur.
|
||||
settings: {
|
||||
"vetur.useWorkspaceDependencies": true,
|
||||
"vetur.experimental.templateInterpolationService": true
|
||||
},
|
||||
// **optional** default: `[{ root: './' }]`
|
||||
// support monorepos
|
||||
projects: [
|
||||
{
|
||||
// **required**
|
||||
// Where is your project?
|
||||
// It is relative to `vetur.config.js`.
|
||||
// root: './packages/repo1',
|
||||
root: './frontend',
|
||||
// **optional** default: `'package.json'`
|
||||
// Where is `package.json` in the project?
|
||||
// We use it to determine the version of vue.
|
||||
// It is relative to root property.
|
||||
package: './package.json',
|
||||
// **optional**
|
||||
// Where is TypeScript config file in the project?
|
||||
// It is relative to root property.
|
||||
tsconfig: './tsconfig.json',
|
||||
// **optional** default: `'./.vscode/vetur/snippets'`
|
||||
// Where is vetur custom snippets folders?
|
||||
snippetFolder: './.vscode/vetur/snippets',
|
||||
// **optional** default: `[]`
|
||||
// Register globally Vue component glob.
|
||||
// If you set it, you can get completion by that components.
|
||||
// It is relative to root property.
|
||||
// Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
|
||||
globalComponents: [
|
||||
'./src/components/**/*.vue'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Next, configure `frontend/tsconfig.json`:
|
||||
|
||||
```javascript
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "system",
|
||||
"noImplicitAny": true,
|
||||
"removeComments": true,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true,
|
||||
"outFile": "../../built/local/tsc.js",
|
||||
"allowJs": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/*.spec.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"wailsjs/**/*.ts"
|
||||
]
|
||||
}
|
||||
```
|
||||
This should enable you to now use Vetur as expected.
|
||||
@ -0,0 +1,58 @@
|
||||
# Installateur NSIS
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
Wails prend en charge la génération d'installateurs Windows en utilisant l'installateur [NSIS](https://nsis.sourceforge.io/).
|
||||
|
||||
## Installation de NSIS
|
||||
|
||||
### Windows
|
||||
|
||||
L'installateur est disponible sur la page [de téléchargement NSIS](https://nsis.sourceforge.io/Download).
|
||||
|
||||
Si vous utilisez le gestionnaire de paquets chocolatey, exécutez le script suivant :
|
||||
|
||||
```
|
||||
choco install nsis
|
||||
```
|
||||
|
||||
Si vous installez NSIS manuellement, vous devez ajouter le dossier _Bin_ , qui contient `makensis.exe`, dans la variable d'environnement PATH. [Cette page](https://www.architectryan.com/2018/03/17/add-to-the-path-on-windows-10/) est un bon tutoriel sur comment ajouter un dossier dans votre variable d'environnement PATH sur Windows.
|
||||
|
||||
### Linux
|
||||
|
||||
Le paquet `nsis` devrait être disponible via le gestionnaire de paquets de votre distribution.
|
||||
|
||||
### MacOS
|
||||
|
||||
NSIS est disponible via homebrew en utilisant : `brew install nsis`.
|
||||
|
||||
## Génération de l'installateur
|
||||
|
||||
Lorsqu'un nouveau projet est créé, Wails génère les fichiers de configuration NSIS dans `build/windows/installer`. La configuration est lue dans `installer/info.json`, et est configuré pour utiliser la section info du fichier `wails.json` :
|
||||
|
||||
```json
|
||||
// ...
|
||||
"Info": {
|
||||
"companyName": "My Company Name",
|
||||
"productName": "Wails Vite",
|
||||
"productVersion": "1.0.0",
|
||||
"copyright": "Copyright.........",
|
||||
"comments": "Built using Wails (https://wails.io)"
|
||||
},
|
||||
```
|
||||
|
||||
Pour générer l'installateur de votre application, utilisez l'option `-nsis` avec la commande `wails build`:
|
||||
|
||||
```
|
||||
wails build -nsis
|
||||
```
|
||||
|
||||
L'installateur sera ensuite disponible dans le dossier `build/bin`.
|
||||
@ -0,0 +1,61 @@
|
||||
# Windows
|
||||
|
||||
This page has miscellaneous guides related to developing Wails applications for Windows.
|
||||
|
||||
## Handling the WebView2 Runtime Dependency
|
||||
|
||||
Wails applications built for Windows have a runtime requirement on the Microsoft [WebView2 Runtime](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). Windows 11 will have this installed by default, but some machines won't. Wails offers an easy approach to dealing with this dependency.
|
||||
|
||||
By using the `-webview2` flag when building, you can decide what your application will do when a suitable runtime is not detected (including if the installed runtime is too old). The four options are:
|
||||
|
||||
1. Download
|
||||
2. Embed
|
||||
3. Navigateur
|
||||
4. Error
|
||||
|
||||
### Download
|
||||
|
||||
This option will prompt the user that no suitable runtime has been found and then offer to download and run the official bootstrapper from Microsoft's WebView2 site. If the user proceeds, the official bootstrapper will be downloaded and run.
|
||||
|
||||
### Embed
|
||||
|
||||
This option embeds the official bootstrapper within the application. If no suitable runtime has been found, the application will offer to run the bootstrapper. This adds ~150k to the binary size.
|
||||
|
||||
### Navigateur
|
||||
|
||||
This option will prompt the user that no suitable runtime has been found and then offer to open a browser to the official WebView2 page where the bootstrapper can be downloaded and installed. The application will then exit, leaving the installation up to the user.
|
||||
|
||||
### Error
|
||||
|
||||
If no suitable runtime is found, an error is given to the user and no further action taken.
|
||||
|
||||
## Fixed version runtime
|
||||
|
||||
Another way of dealing with webview2 dependency is shipping it yourself. You can download [fixed version runtime](https://developer.microsoft.com/microsoft-edge/webview2/#download-section) and bundle or download it with your application.
|
||||
|
||||
Also, you should specify path to fixed version of webview2 runtime in the `windows.Options` structure when launching wails.
|
||||
|
||||
```go
|
||||
wails.Run(&options.App{
|
||||
Windows: &windows.Options{
|
||||
WebviewBrowserPath: "",
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Note: When `WebviewBrowserPath` is specified, `error` strategy will be forced in case of minimal required version mismatch or invalid path to a runtime.
|
||||
|
||||
## Spawning other programs
|
||||
|
||||
When spawning other programs, such as scripts, you will see the window appear on the screen. To hide the window, you can use the following code:
|
||||
|
||||
```go
|
||||
cmd := exec.Command("your_script.exe")
|
||||
cmd.SysProcAttr = &syscall.SysProcAttr{
|
||||
HideWindow: true,
|
||||
CreationFlags: 0x08000000,
|
||||
}
|
||||
cmd.Start()
|
||||
```
|
||||
|
||||
Solution provided by [sithembiso](https://github.com/sithembiso) on the [discussions board](https://github.com/wailsapp/wails/discussions/1734#discussioncomment-3386172).
|
||||
@ -0,0 +1,369 @@
|
||||
---
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
# Comment ça marche ?
|
||||
|
||||
Une application Wails est une application Go standard, avec une interface graphique webkit. La partie Go de l'application se compose du code de l'application et d'une bibliothèque d'exécution qui fournit un certain nombre d'opérations utiles, comme le contrôle de la fenêtre de l'application. Le frontend est une fenêtre webkit qui affichera les ressources graphiques. Une version de la bibliothèque runtime de Javascript est aussi disponible depuis le frontend. Enfin, il est possible de lier les méthodes Go au frontend, et ceux-ci apparaîtront comme des méthodes Javascript qui peuvent être appelées, comme s'il s'agissait de méthodes locales Javascript.
|
||||
|
||||
```mdx-code-block
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.webp").default} style={{"width":"75%", "max-width":"800px"}} />
|
||||
</div>
|
||||
```
|
||||
|
||||
## L'Application Principale
|
||||
|
||||
### Vue d’ensemble
|
||||
|
||||
L'application principale consiste en un seul appel à `wails.Run()`. Il accepte la configuration de l'application qui décrit la taille de la fenêtre d'application, le titre de la fenêtre, qu'elles sont les ressources à utiliser, etc. Une application de base pourrait ressembler à ceci :
|
||||
|
||||
```go title="main.go"
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"log"
|
||||
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
)
|
||||
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
func main() {
|
||||
|
||||
app := &App{}
|
||||
|
||||
err := wails.Run(&options.App{
|
||||
Title: "Basic Demo",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
OnStartup: app.startup,
|
||||
OnShutdown: app.shutdown,
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
type App struct {
|
||||
ctx context.Context
|
||||
}
|
||||
|
||||
func (b *App) startup(ctx context.Context) {
|
||||
b.ctx = ctx
|
||||
}
|
||||
|
||||
func (b *App) shutdown(ctx context.Context) {}
|
||||
|
||||
func (b *App) Greet(name string) string {
|
||||
return fmt.Sprintf("Hello %s!", name)
|
||||
}
|
||||
```
|
||||
|
||||
### Description des options
|
||||
|
||||
Cet exemple a les options suivantes :
|
||||
|
||||
- `Title` - Le texte qui devrait apparaître dans la barre de titre de la fenêtre
|
||||
- `Width` & `Height` - Les dimensions de la fenêtre
|
||||
- `Assets` - Les ressources du frontend de l'application
|
||||
- `OnStartup` - Nom de la fonction à appeler quand la fenêtre est créée et est sur le point de commencer à charger les ressources du frontend
|
||||
- `OnShutdown` - Nom de la fonction à appeler quand la fenêtre est sur le point d'être fermée
|
||||
- `Bind` - La liste des structures Go à exposer au frontend
|
||||
|
||||
Une liste complète des options d'application peut être trouvée dans la [Référence d'options](reference/options).
|
||||
|
||||
#### Ressources
|
||||
|
||||
L'option `Assets` est obligatoire car vous ne pouvez pas avoir d'application Wails sans ressources en frontend. Ces ressources peuvent être n'importe quel fichier que vous attendriez à trouver dans une application web - html, js, css, svg, png, etc. **Il n'y a aucune obligation d'utiliser un générateur de code ou framework** - des fichiers bruts suffisent. Lorsque l'application démarre, elle tentera de charger le fichier `index.html` à partir de vos ressources et le frontend fonctionnera essentiellement comme un navigateur à partir de ce point. Il est intéressant de noter que il n'y a pas de condition sur l'emplacement de `embed.FS`. Il est probable que le chemin d'intégration utilise un répertoire imbriqué par rapport au code de votre application principale, comme `frontend/dist`:
|
||||
|
||||
```go title="main.go"
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
```
|
||||
|
||||
Au démarrage, Wails va itérer les fichiers embarqués à la recherche du répertoire contenant `index.html`. Tous les autres actifs seront chargés par rapport à à ce répertoire.
|
||||
|
||||
Comme les binaires de production utilisent les fichiers contenus dans `embed.FS`, il n'y a aucun fichier externe requis pour être expédié avec l'application.
|
||||
|
||||
Lorsque vous exécutez en mode développement en utilisant la commande `wails dev` , les assets sont chargés à partir du disque, et tous les changements résultent en un "rechargement en direct". L'emplacement des actifs sera déduit de la `embed.FS`.
|
||||
|
||||
Plus de détails peuvent être trouvés dans le [Guide de développement d'applications](guides/application-development.mdx).
|
||||
|
||||
#### Callbacks du cycle de vie de l'application
|
||||
|
||||
Juste avant que le frontend ne soit sur le point de charger `index.html`, un callback est fait à la fonction fournie dans [OnStartup](reference/options.mdx#onstartup). Un contexte standard Go est passé à cette méthode. Ce contexte est requis lors de l'appel à l'exécution, donc une bonne pratique est de sauvegarder une référence dans cette méthode. Juste avant que l'application ne s'arrête, la fonction de rappel [OnShutdown](reference/options.mdx#onshutdown) est appelée de la même manière, à nouveau avec le contexte. Il y a aussi un callback [OnDomReady](reference/options.mdx#ondomready) pour quand le frontend a terminé le chargement de tous les assets de `index.html` et est équivalent à l'événement [`body onload`](https://www.w3schools.com/jsref/event_onload.asp) en JavaScript. Il est également possible de s'accrocher à l'événement de fermeture de la fenêtre (ou de quitter l'application) en définissant l'option [OnBeforeClose](reference/options.mdx#onbeforeclose).
|
||||
|
||||
#### Binding de méthodes
|
||||
|
||||
L'option `Bind` est l'une des options les plus importantes dans une application Wails. Il spécifie quelles méthodes de structs sont à exposer au frontend. Pensez à des "contrôleurs" dans une application web traditionnelle. Quand l'application démarre, elle examine les instances structurées listées dans l'option `Bind`, détermine quelles méthodes sont publiques (commence par une lettre majuscule) et générera des versions JavaScript de ces méthodes qui peuvent être appelées par le code en frontend.
|
||||
|
||||
:::info Note
|
||||
|
||||
Wails exige que vous passiez dans une _instance_ du struct pour qu'il le lie correctement
|
||||
|
||||
:::
|
||||
|
||||
Dans cet exemple, nous créons une nouvelle instance `App` puis ajoutons cette instance à l'option `Bind` dans `wails.Run`:
|
||||
|
||||
```go {17,27} title="main.go"
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"log"
|
||||
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
)
|
||||
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
func main() {
|
||||
|
||||
app := &App{}
|
||||
|
||||
err := wails.Run(&options.App{
|
||||
Title: "Basic Demo",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
})
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
type App struct {
|
||||
ctx context.Context
|
||||
}
|
||||
|
||||
func (a *App) Greet(name string) string {
|
||||
return fmt.Sprintf("Hello %s!", name)
|
||||
}
|
||||
```
|
||||
|
||||
Vous pouvez lier autant de structures que vous le souhaitez. Assurez-vous juste de créer une instance de celle-ci et de la passer dans `Bind`:
|
||||
|
||||
```go {10-12}
|
||||
//...
|
||||
err := wails.Run(&options.App{
|
||||
Title: "Basic Demo",
|
||||
Width: 1024,
|
||||
Height: 768,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
&mystruct1{},
|
||||
&mystruct2{},
|
||||
},
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
Lorsque vous exécutez `wails dev` (ou `wails generate module`), un module frontend sera généré contenant les éléments suivants :
|
||||
|
||||
- JavaScript bindings pour toutes les méthodes liées
|
||||
- Déclarations TypeScript pour toutes les méthodes liées
|
||||
- Définitions TypeScript pour toutes les structures Go utilisées comme entrées ou sorties par les méthodes liées
|
||||
|
||||
Cela rend incroyablement simple d'appeler le code Go depuis le frontend, en utilisant les mêmes structures de données.
|
||||
|
||||
## Le frontend
|
||||
|
||||
### Vue d’ensemble
|
||||
|
||||
Le frontend est une collection de fichiers rendus par webkit. C'est comme un navigateur et un serveur web en un. Il y a virtuellement[^1] aucune limite vis à vis des frameworks ou des bibliothèques que vous pouvez utiliser. Les principaux points d'interaction entre le frontend et votre code Go sont:
|
||||
|
||||
- L'appel des méthodes Go liées
|
||||
- L'appel des méthodes d'exécution
|
||||
|
||||
### L'appel des méthodes Go liées
|
||||
|
||||
Lorsque vous exécutez votre application avec `wails dev`, il générera automatiquement des liaisons JavaScript pour vos structures dans un répertoire appelé `wailsjs/go` (Vous pouvez aussi le faire en exécutant `wails generate module`). Les fichiers générés reflètent les noms de paquets dans votre application. Dans l'exemple ci-dessus, nous associons `app`, qui a une méthode publique `Greet`. Cela conduira à la génération des fichiers suivants :
|
||||
|
||||
```bash
|
||||
wailsjs
|
||||
└─go
|
||||
└─main
|
||||
├─App.d.ts
|
||||
└─App.js
|
||||
```
|
||||
|
||||
Ici nous pouvons voir qu'il y a un dossier `main` qui contient les liaisons JavaScript pour la structure `App` liée, ainsi que que le fichier de déclaration TypeScript pour ces méthodes. Pour appeler `Greet` depuis notre frontend, nous importons simplement la méthode et l'appelons comme une fonction JavaScript régulière:
|
||||
|
||||
```javascript
|
||||
// ...
|
||||
import { Greet } from "../wailsjs/go/main/App";
|
||||
|
||||
function doGreeting(name) {
|
||||
Greet(name).then((result) => {
|
||||
// Do something with result
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
La déclaration en TypeScript vous donne les bons types pour les méthodes paramètres et la valeur retournée :
|
||||
|
||||
```ts
|
||||
export function Greet(arg1: string): Promise<string>;
|
||||
```
|
||||
|
||||
Les méthodes générées retournent une Promise. Un appel réussi entraînera la première valeur de retour de l'appel Go à passer au `resolve` handler. Un appel infructueux est quand une méthode Go qui a un type d'erreur comme valeur de deuxième retour, passe une erreur à l'appelant. Ceci est passé en arrière via le handler `reject`. Dans l'exemple ci-dessus, `Greet` ne retourne qu'un `string` donc l'appel JavaScript ne sera jamais rejeté - à moins que des données non valides ne lui soient passées.
|
||||
|
||||
Tous les types de données sont correctement traduits entre Go et JavaScript. Même les structs. Si vous renvoyez un struct d'un appel Go, il sera retourné à votre frontend en tant que classe JavaScript.
|
||||
|
||||
:::info Note
|
||||
|
||||
Les champs Struct _doivent avoir_ le champ `json` de défini afin de pouvoir l'inclure dans le TypeScript généré.
|
||||
|
||||
Les structures imbriquées anonymes ne sont pas supportées pour le moment.
|
||||
|
||||
:::
|
||||
|
||||
Il est possible d'envoyer des structures à Go. N'importe quelle map/classe JavaScript passée comme argument, sera convertie en son équivalent. Pour faciliter ce processus, en mode `dev` un module TypeScript est généré, définissant tous les types de structures utilisés dans les méthodes liées. En utilisant ce module, il est possible de construire et envoyer des objets JavaScript natifs au code Go.
|
||||
|
||||
Il y a aussi le support des méthodes Go qui utilisent les structures dans leur signature. Toutes les structures Go spécifiées par une méthode liée (que ce soit en tant que paramètres ou types de retour) auront les versions TypeScript automatiques générées dans le module de gestion de code Go. En utilisant ceux-ci, il est possible de partager le même modèle de données entre Go et JavaScript.
|
||||
|
||||
Exemple: Nous mettons à jour notre méthode `Greet` pour accepter une `Person` au lieu d'une chaîne de caractères :
|
||||
|
||||
```go title="main.go"
|
||||
type Person struct {
|
||||
Name string `json:"name"`
|
||||
Age uint8 `json:"age"`
|
||||
Address *Address `json:"address"`
|
||||
}
|
||||
|
||||
type Address struct {
|
||||
Street string `json:"street"`
|
||||
Postcode string `json:"postcode"`
|
||||
}
|
||||
|
||||
func (a *App) Greet(p Person) string {
|
||||
return fmt.Sprintf("Hello %s (Age: %d)!", p.Name, p.Age)
|
||||
}
|
||||
```
|
||||
|
||||
Le fichier `wailsjs/go/main/App.js` aura toujours le code suivant :
|
||||
|
||||
```js title="App.js"
|
||||
export function Greet(arg1) {
|
||||
return window["go"]["main"]["App"]["Greet"](arg1);
|
||||
}
|
||||
```
|
||||
|
||||
Mais le fichier `wailsjs/go/main/App.d.ts` sera mis à jour avec le code suivant :
|
||||
|
||||
```ts title="App.d.ts"
|
||||
import { main } from "../models";
|
||||
|
||||
export function Greet(arg1: main.Person): Promise<string>;
|
||||
```
|
||||
|
||||
Comme nous pouvons le voir, le namespace "main" est importé à partir du nouveau fichier "models.ts". Ce fichier contient toutes les définitions de struct utilisées par nos méthodes liées. Dans cet exemple, c'est une struct `Person`. Si nous regardons `models.ts`, nous pouvons voir comment les modèles sont définis :
|
||||
|
||||
```ts title="models.ts"
|
||||
export namespace main {
|
||||
export class Address {
|
||||
street: string;
|
||||
postcode: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new Address(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ("string" === typeof source) source = JSON.parse(source);
|
||||
this.street = source["street"];
|
||||
this.postcode = source["postcode"];
|
||||
}
|
||||
}
|
||||
export class Person {
|
||||
name: string;
|
||||
age: number;
|
||||
address?: Address;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new Person(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ("string" === typeof source) source = JSON.parse(source);
|
||||
this.name = source["name"];
|
||||
this.age = source["age"];
|
||||
this.address = this.convertValues(source["address"], Address);
|
||||
}
|
||||
|
||||
convertValues(a: any, classs: any, asMap: boolean = false): any {
|
||||
if (!a) {
|
||||
return a;
|
||||
}
|
||||
if (a.slice) {
|
||||
return (a as any[]).map((elem) => this.convertValues(elem, classs));
|
||||
} else if ("object" === typeof a) {
|
||||
if (asMap) {
|
||||
for (const key of Object.keys(a)) {
|
||||
a[key] = new classs(a[key]);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
return new classs(a);
|
||||
}
|
||||
return a;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Tant que vous avez TypeScript dans votre configuration de compilation en frontend, vous pouvez utiliser ces modèles de la manière suivante:
|
||||
|
||||
```js title="mycode.js"
|
||||
import { Greet } from "../wailsjs/go/main/App";
|
||||
import { main } from "../wailsjs/go/models";
|
||||
|
||||
function generate() {
|
||||
let person = new main.Person();
|
||||
person.name = "Peter";
|
||||
person.age = 27;
|
||||
Greet(person).then((result) => {
|
||||
console.log(result);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
La combinaison des liaisons générées et des modèles TypeScript crée un environnement de développement puissant.
|
||||
|
||||
Plus d'informations sur la liaison peuvent être trouvées dans la section [Méthodes de liaison](guides/application-development.mdx#binding-methods) de la [Guide de développement d'applications](guides/application-development.mdx).
|
||||
|
||||
### Appeler les méthodes runtime
|
||||
|
||||
Le runtime JavaScript se trouve dans `window.runtime` et contient de nombreuses méthodes pour faire diverses tâches telles qu'émettre un événement ou effectuer des opérations de journalisation :
|
||||
|
||||
```js title="mycode.js"
|
||||
window.runtime.EventsEmit("my-event", 1);
|
||||
```
|
||||
|
||||
Plus de détails sur l'exécutable JS peuvent être trouvés dans la [Référence d'exécution](reference/runtime/intro).
|
||||
|
||||
[^1]: Il y a un très petit sous-ensemble de bibliothèques qui utilisent des fonctionnalités non prises en charge dans WebViews. Il y a souvent des alternatives et des solutions de contournement pour de tels cas.
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Wails est un projet qui vous permet d'écrire des applications de bureau en utilisant les technologies Go et web.
|
||||
|
||||
Considérez cela comme une alternative légère et rapide d'Electron pour Go. Vous pouvez facilement construire des applications avec la flexibilité et la puissance de Go, combinée à un frontend riche et moderne.
|
||||
|
||||
### Fonctionnalités
|
||||
|
||||
- Menus natifs, Boîtes de dialogues, Thèmes et Translucidité
|
||||
- Prise en charge de Windows, macOS et Linux
|
||||
- Modèles intégrés pour Svelte, React, Preact, Vue, Lit et Vanilla JS
|
||||
- Appeler facilement les méthodes Go depuis JavaScript
|
||||
- Génération automatique du modèle TypeScript à partir des struct Go
|
||||
- Aucun CGO ou DLL externe requis sous Windows
|
||||
- Mode développement en direct en utilisant la puissance de [Vite](https://vitejs.dev/)
|
||||
- CLI puissant pour créer, construire et empaqueter facilement des applications
|
||||
- Une riche bibliothèque [runtime](/docs/reference/runtime/intro)
|
||||
- Les applications construites avec Wails sont conformes aux Stores Apple & Microsoft
|
||||
|
||||
Ceci est varly - une application de bureau pour MacOS & Windows écrite à l'aide de Wails. Non seulement elle est belle, elle utilise les menus natifs et la translucidité - tout ce que vous pouvez attendre d'une application native moderne.
|
||||
|
||||
```mdx-code-block
|
||||
<p class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/showcase/varly2.webp").default}
|
||||
style={{ width: "75%", "max-width": "800px" }}
|
||||
/>
|
||||
</p>
|
||||
```
|
||||
|
||||
### Modèles de créations rapides
|
||||
|
||||
Wails est livré avec un certain nombre de modèles préconfigurés qui vous permettent de faire fonctionner votre application rapidement. Il y a des modèles pour les frameworks suivants : Svelte, React, Vue, Preact, Lit et Vanilla. Il existe à la fois des versions JavaScript et TypeScript pour chaque modèle.
|
||||
|
||||
### Éléments natifs
|
||||
|
||||
Wails utilise une bibliothèque conçue pour gérer les éléments natifs tels que les fenêtres, menus, boîtes de dialogues, etc, pour que vous puissiez construire des applications de bureau riches en fonctionnalités.
|
||||
|
||||
**It does not embed a browser**, so it delivers a small runtime. Instead, it reuses the native rendering engine for the platform. Sous Windows, c'est la nouvelle bibliothèque Microsoft Webview2, construite sur Chromium.
|
||||
|
||||
### Interopérabilité Go & Javascript
|
||||
|
||||
Wails met automatiquement vos méthodes Go à la disposition de Javascript, afin que vous puissiez les appeler par nom depuis votre frontend ! Il génère même des modèles Typescript pour les structures utilisées par vos méthodes Go, pour que vous puissiez passer les mêmes structures de données entre Go et Javascript.
|
||||
|
||||
### Librairie d'exécution
|
||||
|
||||
Wails fournit une bibliothèque runtime, pour Go et Javascript, qui gère beaucoup de choses dont les applications modernes ont besoin, comme Logging, Boîtes de dialogue, etc.
|
||||
|
||||
### Expérience de développement en direct
|
||||
|
||||
#### Reconstructions automatiques
|
||||
|
||||
Lorsque vous exécutez votre application en mode "dev", Wails construira votre application en tant qu'application de bureau native, mais lira vos ressources depuis le disque. Il détectera toutes les modifications apportées à votre code Go, puis reconstruira et relancera automatiquement votre application .
|
||||
|
||||
#### Rechargement automatique
|
||||
|
||||
Lorsque des changements sont détectés dans les ressources de votre application, votre application en cours d'exécution sera "rechargée", reflétant presque immédiatement vos modifications .
|
||||
|
||||
#### Développez votre application dans un navigateur
|
||||
|
||||
Si vous préférez déboguer et vous développer dans un navigateur, Wails vous couvre. L'application en cours d'exécution a également un serveur web qui exécutera votre application depuis n'importe quel navigateur qui s'y connecte. Il sera aussi actualisé lorsque vos fichiers seront modifiés.
|
||||
|
||||
### Binaires natifs prêts à la production
|
||||
|
||||
Lorsque vous êtes prêt à faire une version finale de votre application, le CLI le compilera en un seul exécutable, avec tous les actifs qui y sont intégrés. Sous Windows et MacOS, il est possible de créer un paquet natif pour la distribution. Les ressources utilisées dans la compilation de l'application (icône, info. list, fichier manifest, etc) font partie de votre projet et peuvent être personnalisés, ce qui vous donne le contrôle total sur la façon dont vos applications sont construites.
|
||||
|
||||
### Outils
|
||||
|
||||
Le CLI Wails fournit un moyen sans tracas de générer, de construire et de regrouper vos applications. Il s'occupera de la lourde tâche de créer des icônes, de compiler votre application avec des paramètres optimaux et de fournir un binaire distribuable et prêt à la production. Choisissez parmi un certain nombre de modèles de démarrage pour démarrer rapidement !
|
||||
@ -0,0 +1,241 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# CLI
|
||||
|
||||
Le CLI Wails a un certain nombre de commandes qui sont utilisées pour gérer vos projets. Toutes les commandes sont exécutées de la manière suivante:
|
||||
|
||||
`wails <commande> <options>`
|
||||
|
||||
## init
|
||||
|
||||
`wails init` est utilisé pour générer des projets.
|
||||
|
||||
| Option | Description | Par défaut |
|
||||
|:------------------------- |:---------------------------------------------------------------------------------------------------------------------- |:-------------:|
|
||||
| -n "nom du projet" | Nom du projet. **Obligatoire**. | |
|
||||
| -d "Répertoire du projet" | Dossier de projet à créer | Nom du projet |
|
||||
| -g | Initialisation du dépôt git | |
|
||||
| -l | Liste des modèles de projet disponibles | |
|
||||
| -q | Supprimer les logs dans la console | |
|
||||
| -t "nom du modèle" | Modèle de projet à utiliser. Cela peut être le nom d'un modèle par défaut ou d'une URL d'un projet hébergé sur github. | vanilla |
|
||||
| -ide | Générer les fichiers du projet IDE | |
|
||||
| -f | Forcer la compilation de l'application | false |
|
||||
|
||||
Exemple: `wails init -n test -d mytestproject -g -ide vscode -q`
|
||||
|
||||
Cela va générer un projet appelé "test" dans le répertoire "mytestproject", initialiser git, générer des fichiers de projet vscode et le faire silencieusement.
|
||||
|
||||
Plus d'informations sur l'utilisation des IDEs avec Wails peuvent être trouvées [ici](../guides/ides.mdx).
|
||||
|
||||
### Modèles à distance
|
||||
|
||||
Les modèles distants (hébergés sur GitHub) sont pris en charge et peuvent être installés en utilisant l'URL du projet du modèle.
|
||||
|
||||
Exemple : `wails init -n test -t https://github.com/leaanthony/testtemplate[@v1.0.0]`
|
||||
|
||||
Une liste de modèles gérés par la communauté peut être trouvée [ici](../community/templates.mdx)
|
||||
|
||||
:::warning Attention
|
||||
|
||||
**Le projet Wails n'entretient pas, n'est pas responsable ni responsable des modèles tiers !**
|
||||
|
||||
Si vous n'êtes pas sûr d'un modèle, inspectez les fichiers `package.json` et `wails.json` pour savoir quels scripts sont exécutés et quels paquets sont installés.
|
||||
|
||||
:::
|
||||
|
||||
## build
|
||||
|
||||
`wails build` est utilisé pour compiler votre projet vers un binaire prêt à la production.
|
||||
|
||||
| Option | Description | Par défaut |
|
||||
|:-------------------- |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| -clean | Nettoie le répertoire `build/bin` | |
|
||||
| -compiler "compiler" | Utiliser un autre compilateur pour compiler, par exemple go1.15beta1 | go |
|
||||
| -debug | Conserve les informations de débogage dans l'application et affiche la console de débogage. Permet l'utilisation des outils de développement dans la fenêtre de l'application | |
|
||||
| -devtools | Allows the use of the devtools in the application window in production (when -debug is not used). Ctrl/Cmd+Shift+F12 may be used to open the devtools window. *NOTE*: This option will make your application FAIL Mac appstore guidelines. Use for debugging only. | |
|
||||
| -dryrun | Affiche la commande build sans l'exécuter | |
|
||||
| -f | Forcer la compilation de l'application | |
|
||||
| -garbleargs | Arguments à passer à garble | `-literals -tiny -seed=random` |
|
||||
| -ldflags "flags" | Options supplémentaires à passer au compilateur | |
|
||||
| -m | Permet d'ignorer mod tidy avant la compilation | |
|
||||
| -nopackage | Ne pas empaqueter l'application | |
|
||||
| -nocolour | Désactive la couleur des logs dans le terminal | |
|
||||
| -nosyncgomod | Ne pas synchroniser go.mod avec la version Wails | |
|
||||
| -nsis | Génère l'installateur NSIS pour Windows | |
|
||||
| -o filename | Nom du fichier de sortie | |
|
||||
| -obfuscated | Cacher le code de l'application en utilisant [garble](https://github.com/burrowers/garble) | |
|
||||
| -platform | Construit pour les [plates-formes](../reference/cli.mdx#platforms) données (séparées par des virgules) par exemple. `windows/arm64`. Notez que si vous ne donnez pas l'architecture, `runtime.GOARCH` est utilisé. | platform = le contenu de la variable d'environnement `GOOS` si elle existe, autrement `runtime.GOOS`.<br/>arch = le contenu de la variable d'environnement `GOARCH` si elle existe, autrement `runtime.GOARCH`. |
|
||||
| -race | Construire avec le détecteur Go race | |
|
||||
| -s | Ignorer la construction du frontend | |
|
||||
| -skipbindings | Ignorer la génération des liaisons | |
|
||||
| -tags "extra tags" | Options de compilation à passer au compilateur Go. Doivent être entre guillemets. Séparés par un espace ou une virgule (pas les deux) | |
|
||||
| -trimpath | Supprimer tous les chemins vers les fichiers système de l'exécutable final. | |
|
||||
| -u | Met à jour le `go.mod de votre projet` pour utiliser la même version de Wails que le CLI | |
|
||||
| -upx | Compresser le binaire final en utilisant "upx" | |
|
||||
| -upxflags | Options à passer à upx | |
|
||||
| -v int | Niveau de verbosité (0 - silencieux, 1 - par défaut, 2 - verbeux) | 1 |
|
||||
| -webview2 | Stratégie d'installation WebView2 : download,embed,browser,error | download |
|
||||
| -windowsconsole | Garder la fenêtre de la console lors de la construction d'une version pour Windows | |
|
||||
|
||||
Pour une description détaillée des options `webview2` , veuillez vous référer au Guide de [Windows](../guides/windows.mdx).
|
||||
|
||||
Si vous préférez construire en utilisant l'outil Go standard, veuillez consulter le guide [Constructions manuelles](../guides/manual-builds.mdx) .
|
||||
|
||||
Exemple:
|
||||
|
||||
`wails build -clean -o myproject.exe`
|
||||
|
||||
:::info
|
||||
|
||||
Info
|
||||
Sur Mac, l'application sera livrée avec `Info.plist`, pas `Info.dev.plist`.
|
||||
|
||||
:::
|
||||
|
||||
:::info UPX sur Apple Silicon
|
||||
|
||||
Il y a [problèmes](https://github.com/upx/upx/issues/446) avec l'utilisation de UPX avec Apple Silicon.
|
||||
|
||||
:::
|
||||
|
||||
:::info UPX sur Windows
|
||||
|
||||
Certains antivirus marquent de manière erronée les binaires compressés d'`upx` comme virus, voir [la description du problème](https://github.com/upx/upx/issues/437).
|
||||
|
||||
:::
|
||||
|
||||
### Platformes
|
||||
|
||||
Plateformes supportées:
|
||||
|
||||
| Plateforme | Description |
|
||||
|:---------------- |:-------------------------------------------------- |
|
||||
| darwin | MacOS + Architecture de la machine de construction |
|
||||
| darwin/amd64 | MacOS 10.13+ AMD64 |
|
||||
| darwin/arm64 | MacOS 11.0+ ARM64 |
|
||||
| darwin/universal | Application universelle MacOS AMD64+ARM64 |
|
||||
| windows | Windows 10/11 + architecture de la machine |
|
||||
| windows/amd64 | Windows 10/11 AMD64 |
|
||||
| windows/arm64 | Windows 10/11 ARM64 |
|
||||
| linux | Linux + architecture de la machine |
|
||||
| linux/amd64 | Linux AMD64 |
|
||||
| linux/arm64 | Linux ARM64 |
|
||||
|
||||
## doctor
|
||||
|
||||
`wails doctor` effectuera des diagnostics pour vous assurer que votre système est prêt pour développer avec wails.
|
||||
|
||||
Exemple:
|
||||
|
||||
```
|
||||
Wails CLI v2.0.0-beta
|
||||
|
||||
Scanning system - Please wait (this may take a long time)...Done.
|
||||
|
||||
System
|
||||
------
|
||||
OS: Windows 10 Pro
|
||||
Version: 2009 (Build: 19043)
|
||||
ID: 21H1
|
||||
Go Version: go1.18
|
||||
Platform: windows
|
||||
Architecture: amd64
|
||||
|
||||
Dependency Package Name Status Version
|
||||
---------- ------------ ------ -------
|
||||
WebView2 N/A Installed 93.0.961.52
|
||||
npm N/A Installed 6.14.15
|
||||
*upx N/A Installed upx 3.96
|
||||
|
||||
* - Optional Dependency
|
||||
|
||||
Diagnosis
|
||||
---------
|
||||
Your system is ready for Wails development!
|
||||
|
||||
```
|
||||
|
||||
## dev
|
||||
|
||||
`wails dev` est utilisé pour exécuter votre application en mode « développement en direct ». Ceci signifie que :
|
||||
|
||||
- Le fichier `go.mod` de l'application sera mis à jour pour utiliser la même version de Wails que le CLI
|
||||
- L'application est compilée et exécutée automatiquement
|
||||
- Un observateur est démarré et déclenchera une reconstruction de votre application de développement s'il détecte des changements dans vos fichiers go
|
||||
- Un serveur web est lancé sur `http://localhost:34115` qui sert votre application (et pas seulement le frontend) sur http. Cela vous permet d'utiliser les extensions de développement de votre navigateur favori
|
||||
- Tous les assets de l'application sont chargés à partir du disque. Si elles sont modifiées, l'application se rechargera automatiquement (pas de recompilation). Tous les navigateurs connectés rechargeront également
|
||||
- Un module JS est généré fournissant les éléments suivants :
|
||||
- Les méthodes Javascript permettant d'appeler vos méthodes Go avec JSDoc autogénérée, vous fournissant des indications sur les méthodes
|
||||
- Les versions TypeScript de vos structures Go, qui peuvent être construites et transmises à vos méthodes
|
||||
- Un second module JS est généré qui fournit une déclaration des méthodes et structures pour l'exécutable
|
||||
- Sur macOS, il regroupera l'application dans un fichier `.app` et l'exécutera. Il utilisera un `build/darwin/Info.dev.plist` pour le développement.
|
||||
|
||||
| Option | Description | Par défaut |
|
||||
|:------------------------------------ |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:------------------------ |
|
||||
| -appargs "args" | Arguments passés à l'application en style shell | |
|
||||
| -assetdir "./chemin/vers/les/assets" | Sert les assets depuis le répertoire donné au lieu d'utiliser le fichier FS fourni | Valeur dans `wails.json` |
|
||||
| -browser | Ouvre un navigateur à `http://localhost:34115` au démarrage | |
|
||||
| -compiler "compiler" | Utiliser un autre compilateur pour compiler, par exemple go1.15beta1 | go |
|
||||
| -debounce | Le temps d'attente pour le rechargement après qu'une modification d'actif est détectée | 100 (millisecondes) |
|
||||
| -devserver "host:port" | L'adresse à laquelle lier le serveur de développement wails | "localhost:34115" |
|
||||
| -extensions | Extensions pour déclencher les rebuilds (séparés par des virgules) | go |
|
||||
| -forcebuild | Force la compilation de l'application | |
|
||||
| -frontenddevserverurl "url" | Utiliser l'url du serveur de développement tiers pour servir les actifs, EG Vite | "" |
|
||||
| -ldflags "flags" | Options supplémentaires à passer au compilateur | |
|
||||
| -loglevel "loglevel" | Niveau de log à utiliser - Trace, Debug, Info, Warning, Error | Debug |
|
||||
| -nocolour | Désactiver la couleur dans le terminal | false |
|
||||
| -noreload | Désactiver le rechargement automatique lorsque les actifs changent | |
|
||||
| -nosyncgomod | Ne pas synchroniser go.mod avec la version Wails | false |
|
||||
| -race | Construire avec le détecteur Go race | false |
|
||||
| -reloaddirs | Répertoires supplémentaires pour déclencher les recharges (séparés par des virgules) | Valeur dans `wails.json` |
|
||||
| -s | Ignorer la construction du frontend | false |
|
||||
| -save | Sauvegarde les options `assetdir`, `reloaddirs`, `wailsjsdir`, `debounce`, `devserver` and `frontenddevserverurl` dans `wails.json` pour quelles deviennent les informations par défaut pour les prochaines utilisations. | |
|
||||
| -skipbindings | Ignorer la génération des liaisons | |
|
||||
| -tags "extra tags" | Options de construction à passer au compilateur (séparées par des guillemets et des espaces) | |
|
||||
| -v | Niveau de verbosité (0 - silencieux, 1 - par défaut, 2 - verbeux) | 1 |
|
||||
| -wailsjsdir | Le répertoire où stocker les modules JS Wails générés | Valeur dans `wails.json` |
|
||||
|
||||
Exemple:
|
||||
|
||||
`wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src -browser`
|
||||
|
||||
Cette commande fera ce qui suit :
|
||||
|
||||
- Construisez l'application et exécutez-la (plus de détails [ici](../guides/manual-builds.mdx)
|
||||
- Générer les modules JS Wails dans `./frontend/src`
|
||||
- Surveillez les mises à jour des fichiers dans `./frontend/dist` et rechargez en cas de changement
|
||||
- Ouvre un navigateur et se connecte à l'application
|
||||
|
||||
Il y a plus d'informations sur l'utilisation de cette fonctionnalité avec les scripts de framework existants [ici](../guides/application-development.mdx#live-reloading).
|
||||
|
||||
## generate
|
||||
|
||||
### template
|
||||
|
||||
Wails utilise des modèles pour la génération de projets. La commande `wails génère le template` aide à échafauder un modèle afin que il puisse être utilisé pour générer des projets.
|
||||
|
||||
| Option | Description |
|
||||
|:---------------- |:-------------------------------------------------------- |
|
||||
| -name | Le nom du modèle (Obligatoire) |
|
||||
| -frontend "path" | Chemin vers le projet frontend à utiliser dans le modèle |
|
||||
|
||||
Pour plus de détails sur la création de modèles, consultez le [Guide sur les modèles](../guides/templates.mdx).
|
||||
|
||||
### module
|
||||
|
||||
La commande `wails génère le module` vous permet de générer manuellement le répertoire `wailsjs` pour votre application.
|
||||
|
||||
## update
|
||||
|
||||
`wails update` va mettre à jour la version du CLI Wails.
|
||||
|
||||
| Option | Description |
|
||||
|:------------------ |:----------------------------------------------------- |
|
||||
| -pre | Mettre à jour la version avec la dernière pre-release |
|
||||
| -version "version" | Installer une version spécifique du CLI |
|
||||
|
||||
## version
|
||||
|
||||
`wails version` va simplement afficher la version actuelle du CLI.
|
||||
@ -0,0 +1,230 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Menus
|
||||
|
||||
Il est possible d'ajouter un menu applicatif aux projets Wails. Ceci est réalisé en définissant une structure [Menu](#menu) et en la définissant dans la configuration de l'application [`Menu`](../reference/options.mdx#menu) , ou en appelant la méthode d'exécution [MenuSetApplicationMenu](../reference/runtime/menu.mdx#menusetapplicationmenu).
|
||||
|
||||
Un exemple de définition d'un menu :
|
||||
|
||||
```go
|
||||
|
||||
app := NewApp()
|
||||
|
||||
AppMenu := menu.NewMenu()
|
||||
FileMenu := AppMenu.AddSubmenu("File")
|
||||
FileMenu.AddText("&Open", keys.CmdOrCtrl("o"), openFile)
|
||||
FileMenu.AddSeparator()
|
||||
FileMenu.AddText("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
|
||||
runtime.Quit(app.ctx)
|
||||
})
|
||||
|
||||
if runtime.GOOS == "darwin" {
|
||||
AppMenu.Append(menu.EditMenu()) // on macos platform, we should append EditMenu to enable Cmd+C,Cmd+V,Cmd+Z... shortcut
|
||||
}
|
||||
|
||||
err := wails.Run(&options.App{
|
||||
Title: "Menus Demo",
|
||||
Width: 800,
|
||||
Height: 600,
|
||||
Menu: AppMenu, // reference the menu above
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
)
|
||||
// ...
|
||||
```
|
||||
|
||||
Il est également possible de mettre à jour dynamiquement le menu, en mettant à jour le menu struct et en appelant [MenuUpdateApplicationMenu](../reference/runtime/menu.mdx#menuupdateapplicationmenu).
|
||||
|
||||
L'exemple ci-dessus utilise des méthodes d'aide, cependant il est possible de construire le menu manuellement.
|
||||
|
||||
## Menu
|
||||
|
||||
Un Menu est une collection de MenuItems:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
type Menu struct {
|
||||
Items []*MenuItem
|
||||
}
|
||||
```
|
||||
|
||||
Pour le menu de l'application, chaque MenuItem représente un seul menu tel que "Edit".
|
||||
|
||||
Une méthode simple d'aide est fournie pour les menus de construction :
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
func NewMenuFromItems(first *MenuItem, rest ...*MenuItem) *Menu
|
||||
```
|
||||
|
||||
Cela rend la mise en page du code plus semblable à celle d'un menu sans avoir à ajouter les éléments de menu manuellement après leur création. Vous pouvez également créer les liens de menu et les ajouter au menu manuellement.
|
||||
|
||||
## MenuItem
|
||||
|
||||
Un MenuItem représente un élément dans un Menu.
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
// MenuItem represents a menu item contained in a menu
|
||||
type MenuItem struct {
|
||||
Label string
|
||||
Role Role
|
||||
Accelerator *keys.Accelerator
|
||||
Type Type
|
||||
Disabled bool
|
||||
Hidden bool
|
||||
Checked bool
|
||||
SubMenu *Menu
|
||||
Click Callback
|
||||
}
|
||||
```
|
||||
|
||||
| Champ | Type | Notes |
|
||||
| ----------- | ------------------------------------ | --------------------------------------------------------------------------------------- |
|
||||
| Label | string | Le texte du menu |
|
||||
| Accelerator | [\*keys.Accelerator](#accelerator) | Raccourci pour ce lien de menu |
|
||||
| Type | [Type](#type) | Type de MenuItem |
|
||||
| Disabled | bool | Désactive l'élément de menu |
|
||||
| Hidden | bool | Masque cet élément de menu |
|
||||
| Checked | bool | Ajoute une coche à l'élément (case à cocher & Types de radio) |
|
||||
| SubMenu | [\*Menu](#menu) | Définit un sous-menu |
|
||||
| Click | [Callback](#callback) | Fonction à appeler quand un click est fait sur cet élément du menu. |
|
||||
| Role | string | Définit un rôle [](#role) pour cet élément de menu. Pour Mac seulement, pour le moment. |
|
||||
|
||||
### Accelerator
|
||||
|
||||
Les accélérateurs (parfois appelés raccourcis clavier) définissent une liaison entre une clé et un élément du menu. Wails définit un accélérateur comme une combinaison ou une clé + [modificateur](#modifier). Ils sont disponibles dans le paquet `"github.com/wailsapp/wails/v2/pkg/menu/keys"`.
|
||||
|
||||
Exemple:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
||||
// Defines cmd+o on Mac and ctrl-o on Window/Linux
|
||||
myShortcut := keys.CmdOrCtrl("o")
|
||||
```
|
||||
|
||||
Les clés sont n'importe quel caractère sur un clavier à l'exception de `+`, qui est défini comme `plus`. Certaines clés ne peuvent pas être représentées comme des caractères, il y a donc un ensemble de caractères nommés qui peuvent être utilisés :
|
||||
|
||||
| | | | |
|
||||
|:----------------:|:-----:|:-----:|:---------:|
|
||||
| `retour arrière` | `f1` | `f16` | `f31` |
|
||||
| `tabulation` | `f2` | `f17` | `f32` |
|
||||
| `retour` | `f3` | `f18` | `f33` |
|
||||
| `entrée` | `f4` | `f19` | `f34` |
|
||||
| `echap` | `f5` | `f20` | `f35` |
|
||||
| `gauche` | `f6` | `f21` | `numlock` |
|
||||
| `droite` | `f7` | `f22` | |
|
||||
| `haut` | `f8` | `f23` | |
|
||||
| `bas` | `f9` | `f24` | |
|
||||
| `espace` | `f10` | `f25` | |
|
||||
| `suppr` | `f11` | `f36` | |
|
||||
| `début` | `f12` | `f37` | |
|
||||
| `fin` | `f13` | `f38` | |
|
||||
| `page haut` | `f14` | `f39` | |
|
||||
| `page bas` | `f15` | `f30` | |
|
||||
|
||||
Wails prend également en charge l'analyse des accélérateurs en utilisant la même syntaxe qu'Electron. Ceci est utile pour stocker les accélérateurs dans les fichiers de configuration .
|
||||
|
||||
Exemple:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
||||
// Defines cmd+o on Mac and ctrl-o on Window/Linux
|
||||
myShortcut, err := keys.Parse("Ctrl+Option+A")
|
||||
```
|
||||
|
||||
#### Modifier
|
||||
|
||||
Les modificateurs suivants sont des touches qui peuvent être utilisées en combinaison avec la touche accélérateur:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
||||
const (
|
||||
// CmdOrCtrlKey represents Command on Mac and Control on other platforms
|
||||
CmdOrCtrlKey Modifier = "cmdorctrl"
|
||||
// OptionOrAltKey represents Option on Mac and Alt on other platforms
|
||||
OptionOrAltKey Modifier = "optionoralt"
|
||||
// ShiftKey represents the shift key on all systems
|
||||
ShiftKey Modifier = "shift"
|
||||
// ControlKey represents the control key on all systems
|
||||
ControlKey Modifier = "ctrl"
|
||||
)
|
||||
```
|
||||
|
||||
Un certain nombre de méthodes d'aide sont disponibles pour créer des accélérateurs en utilisant des modificateurs:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
||||
func CmdOrCtrl(key string) *Accelerator
|
||||
func OptionOrAlt(key string) *Accelerator
|
||||
func Shift(key string) *Accelerator
|
||||
func Control(key string) *Accelerator
|
||||
```
|
||||
|
||||
Les modificateurs peuvent être combinés en utilisant `keys.Combo(key string, modifier1 Modifier, modifier2 Modifier, rest ...Modifier)`:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu/keys"
|
||||
// Defines "Ctrl+Option+A" on Mac and "Ctrl+Alt+A" on Window/Linux
|
||||
myShortcut := keys.Combo("a", ControlKey, OptionOrAltKey)
|
||||
```
|
||||
|
||||
### Type
|
||||
|
||||
Chaque lien de menu doit avoir un type et il y a 5 types disponibles:
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
const (
|
||||
TextType Type = "Text"
|
||||
SeparatorType Type = "Separator"
|
||||
SubmenuType Type = "Submenu"
|
||||
CheckboxType Type = "Checkbox"
|
||||
RadioType Type = "Radio"
|
||||
)
|
||||
```
|
||||
|
||||
Pour plus de commodité, des méthodes d'aide sont fournies pour créer rapidement un lien de menu :
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
func Text(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
|
||||
func Separator() *MenuItem
|
||||
func Radio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
||||
func Checkbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
||||
func SubMenu(label string, menu *Menu) *Menu
|
||||
```
|
||||
|
||||
Vous pouvez également créer des liens directement dans un menu en utilisant les méthodes "Add" :
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
func (m *Menu) AddText(label string, accelerator *keys.Accelerator, click Callback) *MenuItem
|
||||
func (m *Menu) AddSeparator() *MenuItem
|
||||
func (m *Menu) AddRadio(label string, selected bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
||||
func (m *Menu) AddCheckbox(label string, checked bool, accelerator *keys.Accelerator, click Callback) *MenuItem
|
||||
func (m *Menu) AddSubMenu(label string, menu *Menu) *MenuI
|
||||
```
|
||||
|
||||
Une note sur les groupes radio : Un groupe radio est défini comme un certain nombre d'éléments du menu radio qui sont à côté l'un de l'autre dans le menu. Cela signifie que vous n'avez pas besoin de regrouper les éléments car il est automatique. Cependant, cela signifie également que vous ne pouvez pas avoir 2 groupes radio les uns à côté des autres - il doit y avoir un élément non-radio entre eux.
|
||||
|
||||
### Callback
|
||||
|
||||
Chaque lien de menu peut avoir une fonction qui est exécutée lorsque l'élément est cliqué :
|
||||
|
||||
```go title="Package: github.com/wailsapp/wails/v2/pkg/menu"
|
||||
type Callback func(*CallbackData)
|
||||
|
||||
type CallbackData struct {
|
||||
MenuItem *MenuItem
|
||||
}
|
||||
```
|
||||
|
||||
La fonction reçoit une structure `CallbackData` qui indique quel élément de menu a été cliqué. Ceci est utile lorsque utilise des groupes radio qui peuvent partager une fonction.
|
||||
|
||||
### Role
|
||||
|
||||
:::info Roles
|
||||
|
||||
Les rôles ne sont actuellement pris en charge que sur Mac.
|
||||
|
||||
:::
|
||||
|
||||
Un lien de menu peut avoir un rôle, qui est essentiellement un lien de menu prédéfini. Nous supportons actuellement les rôles suivants :
|
||||
|
||||
| Role | Description |
|
||||
| ------------ | ----------------------------------------------------------------------------------- |
|
||||
| AppMenuRole | Le menu standard de l'application Mac. Peut être créé en utilisant `menu.AppMenu()` |
|
||||
| EditMenuRole | Le menu d'édition standard pour Mac. Peut être créé en utilisant `menu.EditMenu()` |
|
||||
@ -0,0 +1,853 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Options
|
||||
|
||||
## Options de l'application
|
||||
|
||||
La structure `Options.App` contient la configuration de l'application. Il est passé à la méthode `wails.Run()`:
|
||||
|
||||
```go title="Example"
|
||||
import (
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/linux"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/mac"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/windows"
|
||||
)
|
||||
|
||||
func main() {
|
||||
|
||||
err := wails.Run(&options.App{
|
||||
Title: "Menus Demo",
|
||||
Width: 800,
|
||||
Height: 600,
|
||||
DisableResize: false,
|
||||
Fullscreen: false,
|
||||
WindowStartState: options.Maximised,
|
||||
Frameless: true,
|
||||
MinWidth: 400,
|
||||
MinHeight: 400,
|
||||
MaxWidth: 1280,
|
||||
MaxHeight: 1024,
|
||||
StartHidden: false,
|
||||
HideWindowOnClose: false,
|
||||
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 255},
|
||||
AlwaysOnTop: false,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
Handler: assetsHandler,
|
||||
Middleware: assetsMidldeware,
|
||||
},
|
||||
Menu: app.applicationMenu(),
|
||||
Logger: nil,
|
||||
LogLevel: logger.DEBUG,
|
||||
LogLevelProduction: logger.ERROR,
|
||||
OnStartup: app.startup,
|
||||
OnDomReady: app.domready,
|
||||
OnShutdown: app.shutdown,
|
||||
OnBeforeClose: app.beforeClose,
|
||||
CSSDragProperty: "--wails-draggable",
|
||||
CSSDragValue: "drag",
|
||||
EnableDefaultContextMenu: false,
|
||||
EnableFraudulentWebsiteDetection: false,
|
||||
ZoomFactor: 1.0,
|
||||
IsZoomControlEnabled: false,
|
||||
Bind: []interface{}{
|
||||
app,
|
||||
},
|
||||
ErrorFormatter: func(err error) any { return err.Error() },
|
||||
Windows: &windows.Options{
|
||||
WebviewIsTransparent: false,
|
||||
WindowIsTranslucent: false,
|
||||
BackdropType: windows.Mica,
|
||||
DisableWindowIcon: false,
|
||||
DisableFramelessWindowDecorations: false,
|
||||
WebviewUserDataPath: "",
|
||||
WebviewBrowserPath: "",
|
||||
Theme: windows.SystemDefault,
|
||||
CustomTheme: &windows.ThemeSettings{
|
||||
DarkModeTitleBar: windows.RGB(20, 20, 20),
|
||||
DarkModeTitleText: windows.RGB(200, 200, 200),
|
||||
DarkModeBorder: windows.RGB(20, 0, 20),
|
||||
LightModeTitleBar: windows.RGB(200, 200, 200),
|
||||
LightModeTitleText: windows.RGB(20, 20, 20),
|
||||
LightModeBorder: windows.RGB(200, 200, 200),
|
||||
},
|
||||
// User messages that can be customised
|
||||
Messages *windows.Messages
|
||||
// OnSuspend is called when Windows enters low power mode
|
||||
OnSuspend func()
|
||||
// OnResume is called when Windows resumes from low power mode
|
||||
OnResume func(),
|
||||
WebviewGpuDisabled: false,
|
||||
},
|
||||
Mac: &mac.Options{
|
||||
TitleBar: &mac.TitleBar{
|
||||
TitlebarAppearsTransparent: true,
|
||||
HideTitle: false,
|
||||
HideTitleBar: false,
|
||||
FullSizeContent: false,
|
||||
UseToolbar: false,
|
||||
HideToolbarSeparator: true,
|
||||
},
|
||||
Appearance: mac.NSAppearanceNameDarkAqua,
|
||||
WebviewIsTransparent: true,
|
||||
WindowIsTranslucent: false,
|
||||
About: &mac.AboutInfo{
|
||||
Title: "My Application",
|
||||
Message: "© 2021 Me",
|
||||
Icon: icon,
|
||||
},
|
||||
},
|
||||
Linux: &linux.Options{
|
||||
Icon: icon,
|
||||
WindowIsTranslucent: false,
|
||||
WebviewGpuPolicy: linux.WebviewGpuPolicyAlways,
|
||||
ProgramName: "wails"
|
||||
},
|
||||
Debug: options.Debug{
|
||||
OpenInspectorOnStartup: false,
|
||||
},
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Title
|
||||
|
||||
Le texte affiché dans la barre de titre de la fenêtre.
|
||||
|
||||
Nom : Title<br/> Type : `string`
|
||||
|
||||
### Width
|
||||
|
||||
La largeur initiale de la fenêtre.
|
||||
|
||||
Nom: Width<br/> Type: `int`<br/> Défaut: 1024.
|
||||
|
||||
### Height
|
||||
|
||||
La hauteur initiale de la fenêtre.
|
||||
|
||||
Nom: Height<br/> Type: `int`<br/> Défaut: 768
|
||||
|
||||
### DisableResize
|
||||
|
||||
Par défaut, la fenêtre principale est redimensionnable. Mettre ceci à `true` le conservera une taille fixe.
|
||||
|
||||
Nom: DisableResize<br/> Type: `bool`
|
||||
|
||||
### Fullscreen
|
||||
|
||||
Obsolète: Veuillez utiliser [WindowStartState](#windowstartstate).
|
||||
|
||||
### WindowStartState
|
||||
|
||||
Définit comment la fenêtre devrait se présenter au démarrage.
|
||||
|
||||
| Valeur | Win | Mac | Lin |
|
||||
| ---------- | --- | --- | --- |
|
||||
| Fullscreen | ✅ | ✅ | ✅ |
|
||||
| Maximised | ✅ | ✅ | ✅ |
|
||||
| Minimised | ✅ | ❌ | ✅ |
|
||||
|
||||
Nom: WindowStartState<br/> Type: `options.WindowStartState`
|
||||
|
||||
### Frameless
|
||||
|
||||
Quand réglé sur `true`, la fenêtre n'aura pas de bordure ou de barre de titre. Voir aussi les [fenêtres sans cadre sous Windows](../guides/frameless.mdx).
|
||||
|
||||
Nom: Frameless<br/> Type: `bool`
|
||||
|
||||
### MinWidth
|
||||
|
||||
Définit la largeur minimale de la fenêtre. Si la valeur donnée dans `Width` est inférieure à cette valeur, la fenêtre sera définie à `MinWidth` par défaut.
|
||||
|
||||
Nom: MinWidth<br/> Type: `int`
|
||||
|
||||
### MinHeight
|
||||
|
||||
Définit la hauteur minimale de la fenêtre. Si la valeur donnée dans `Height` est inférieure à cette valeur, la fenêtre sera définie à `MinHeight` par défaut.
|
||||
|
||||
Nom: MinHeight<br/> Type: `int`
|
||||
|
||||
### MaxWidth
|
||||
|
||||
Définit la largeur maximale de la fenêtre. Si la valeur donnée dans `Width` est supérieure à cette valeur, la fenêtre sera définie à `MaxWidth` par défaut.
|
||||
|
||||
Nom: MaxWidth<br/> Type: `int`
|
||||
|
||||
### MaxHeight
|
||||
|
||||
Définit la hauteur maximale de la fenêtre. Si la valeur donnée en `Height` est supérieure à cette valeur, la fenêtre sera définie à `MaxHeight` par défaut.
|
||||
|
||||
Nom: MaxHeight<br/> Type: `int`
|
||||
|
||||
### StartHidden
|
||||
|
||||
Lorsque réglé sur `true`, l'application sera masquée jusqu'à ce que [WindowShow](../reference/runtime/window.mdx#windowshow) soit appelé.
|
||||
|
||||
Nom: StartHidden<br/> Type: `bool`
|
||||
|
||||
### HideWindowOnClose
|
||||
|
||||
Par défaut, la fermeture de la fenêtre fermera l'application. Définir ceci à `true` signifie que
|
||||
|
||||
la fenêtre sera cachée à la place.
|
||||
|
||||
Nom: HideWindowOnClose<br/> Type: `bool`
|
||||
|
||||
### BackgroundColour
|
||||
|
||||
Cette valeur est la couleur de fond par défaut de la fenêtre. Exemple: options.NewRGBA(255,0,0,128) - Rouge à 50% de transparence
|
||||
|
||||
Nom: BackgroundColour<br/> Type: `*options.RGBA`<br/> Défaut: white
|
||||
|
||||
### AlwaysOnTop
|
||||
|
||||
Indique que la fenêtre doit rester au-dessus des autres fenêtres lors de la perte de focus.
|
||||
|
||||
Nom: AlwaysOnTop<br/> Type: `bool`
|
||||
|
||||
### Assets
|
||||
|
||||
Obsolète: Veuillez utiliser des actifs sur les options [AssetServer spécifiques](#assetserver).
|
||||
|
||||
### AssetsHandler
|
||||
|
||||
Obsolète : Veuillez utiliser AssetsHandler sur [Options spécifiques à AssetServer](#assetserver).
|
||||
|
||||
### AssetServer
|
||||
|
||||
Ceci définit les options spécifiques à AssetServer. Il permet de personnaliser l'AssetServer avec des actifs statiques, servant les assets dynamiquement avec un `http.Handler` ou brancher dans la chaîne de requêtes avec un `assetserver.Middleware`.
|
||||
|
||||
Toutes les fonctionnalités d'une `http.Request` ne sont pas actuellement prises en charge, veuillez consulter la matrice de fonctionnalité suivante :
|
||||
|
||||
| Fonctionalité | Win | Mac | Lin |
|
||||
| ----------------------- | --- | --- | ------ |
|
||||
| GET | ✅ | ✅ | ✅ |
|
||||
| POST | ✅ | ✅ | ✅ [^1] |
|
||||
| PUT | ✅ | ✅ | ✅ [^1] |
|
||||
| PATCH | ✅ | ✅ | ✅ [^1] |
|
||||
| DELETE | ✅ | ✅ | ✅ [^1] |
|
||||
| Request Headers | ✅ | ✅ | ✅ [^1] |
|
||||
| Request Body | ✅ | ✅ | ✅ [^2] |
|
||||
| Request Body Streaming | ✅ | ✅ | ✅ [^2] |
|
||||
| Response StatusCodes | ✅ | ✅ | ✅ [^1] |
|
||||
| Response Headers | ✅ | ✅ | ✅ [^1] |
|
||||
| Response Body | ✅ | ✅ | ✅ |
|
||||
| Response Body Streaming | ❌ | ✅ | ✅ |
|
||||
| WebSockets | ❌ | ❌ | ❌ |
|
||||
| HTTP Redirects 30x | ✅ | ❌ | ❌ |
|
||||
|
||||
Nom: AssetServer<br/> Type: `*assetserver.Options`
|
||||
|
||||
#### Assets
|
||||
|
||||
Les ressources statiques du frontend à être utilisées par l'application.
|
||||
|
||||
Une requête GET est d'abord tentée d'être servie à partir de ce `fs.FS`. Si le `fs.FS` retourne `os. rrNotExist` pour ce fichier, le traitement des requêtes va revenir au [Handler](#handler) et essaie de répondre à la requête GET.
|
||||
|
||||
Si la valeur est nulle, toutes les requêtes GET seront envoyées à [Handler](#handler).
|
||||
|
||||
Nom: Assets<br/> Type: `fs.FS`
|
||||
|
||||
#### Handler
|
||||
|
||||
Le gestionnaire d'assets est un `http.Handler` générique pour la gestion de secours des assets qui ne peuvent pas être trouvés.
|
||||
|
||||
Le gestionnaire sera appelé pour chaque requête GET qui ne peut pas être servie à partir de [Assets](#assets), en raison de `os.ErrNotExist`. De plus, toutes les requêtes non GET seront toujours servies par ce gestionnaire. Si non défini, le résultat est le suivant dans les cas où le Gestionnaire aurait été appelé :
|
||||
|
||||
- Requête GET : `http.StatusNotFound`
|
||||
- Autre requête : `http.StatusMethodNotAllowed`
|
||||
|
||||
REMARQUE : Lorsqu'il est utilisé en combinaison avec un serveur de développement Frontend, il peut y avoir des limitations, par exemple. Vite affiche l'index.html sur chaque chemin qui ne contient pas d'extension de fichier.
|
||||
|
||||
Nom: AssetsHandler<br/> Type: `http.Handler`
|
||||
|
||||
#### Middleware
|
||||
|
||||
Middleware est un Middleware HTTP qui permet de se connecter à la chaîne de requêtes AssetServer. Il permet de sauter dynamiquement le gestionnaire de requête par défaut, par exemple implémenter un routage spécialisé, etc. Le Middleware est appelé pour construire un nouveau `http.Handler` utilisé par l'AssetSever et reçoit également le gestionnaire par défaut utilisé par le serveur AssetServer comme argument.
|
||||
|
||||
Si elle n'est pas définie, la chaîne de requête AssetServer par défaut est exécutée.
|
||||
|
||||
Nom: Middleware<br/> Type: `assetserver.Middleware`
|
||||
|
||||
### Menu
|
||||
|
||||
Le menu à utiliser par l'application. Plus de détails sur les menus dans la [Référence des Menu](../reference/runtime/menu.mdx).
|
||||
|
||||
:::note
|
||||
|
||||
Sur Mac, si aucun menu n'est spécifié, un menu par défaut sera créé.
|
||||
|
||||
:::
|
||||
|
||||
Nom: Menu<br/> Type: `*menu.Menu`
|
||||
|
||||
### Logger
|
||||
|
||||
Le logger à utiliser par l'application. Plus de détails sur la connexion dans la [Référence du logger](../reference/runtime/log.mdx).
|
||||
|
||||
Nom: Logger<br/> Type: `logger.Logger`<br/> Défaut: Logs envoyé à Stdout
|
||||
|
||||
### LogLevel
|
||||
|
||||
Le niveau de log par défaut. Plus de détails sur la connexion dans la [Référence du logger](../reference/runtime/log.mdx).
|
||||
|
||||
Nom: LogLevel<br/> Type: `logger.LogLevel`<br/> Défaut: `Info` en mode dev, `Error` en mode production
|
||||
|
||||
### LogLevelProduction
|
||||
|
||||
Le niveau de log par défaut pour les compilations de production. Plus de détails sur la connexion dans la [Référence du logger](../reference/runtime/log.mdx).
|
||||
|
||||
Nom: LogLevelProduction<br/> Type: `logger.LogLevel`<br/> Défaut: `Error`
|
||||
|
||||
### OnStartup
|
||||
|
||||
Ce callback est appelé après la création du frontend, mais avant que `index.html` n'ait été chargé. Il lui donne le contexte de l'application.
|
||||
|
||||
Nom: OnStartup<br/> Type: `func(ctx context.Context)`
|
||||
|
||||
### OnDomReady
|
||||
|
||||
Ce callback est appelé après que le frontend ait chargé `index.html` et ses ressources. Il lui donne le contexte de l'application.
|
||||
|
||||
Nom: OnDomReady<br/> Type: `func(ctx context.Context)`
|
||||
|
||||
### OnShutdown
|
||||
|
||||
Ce calllback est appelé après que le frontend ait été détruit, juste avant la fin de l'application. Il lui donne le contexte de l'application.
|
||||
|
||||
Nom: OnShutdown<br/> Type: `func(ctx context.Context)`
|
||||
|
||||
### OnBeforeClose
|
||||
|
||||
Si ce callback est défini, il sera appelé lorsque l'application est sur le point de quitter, soit en cliquant sur la fenêtre fermez le bouton ou en appelant `runtime.Quit`. Retourner "true" dans cette méthode entraînera la poursuite de l'application, "false" continuera à éteindre comme d'habitude. C'est un bon exemple pour confirmer avec l'utilisateur si il souhaite quitter le programme.
|
||||
|
||||
Exemple:
|
||||
|
||||
```go title=windowsapp.go
|
||||
func (b *App) beforeClose(ctx context.Context) (prevent bool) {
|
||||
dialog, err := runtime.MessageDialog(ctx, runtime.MessageDialogOptions{
|
||||
Type: runtime.QuestionDialog,
|
||||
Title: "Quit?",
|
||||
Message: "Are you sure you want to quit?",
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
return false
|
||||
}
|
||||
return dialog != "Yes"
|
||||
}
|
||||
```
|
||||
|
||||
Nom: OnBeforeClose<br/> Type: `func(ctx context.Context) bool`
|
||||
|
||||
### CSSDragProperty
|
||||
|
||||
Indique la propriété CSS à utiliser pour identifier quels éléments peuvent être utilisés pour faire glisser la fenêtre. Par défaut : `--wails-draggable`.
|
||||
|
||||
Nom: CSSDragProperty<br/> Type: `string`
|
||||
|
||||
### CSSDragValue
|
||||
|
||||
Indique quelle valeur le style `CSSDragProperty` doit avoir pour faire glisser la fenêtre. Par défaut: `drag`.
|
||||
|
||||
Nom: CSSDragValue<br/> Type: `string`
|
||||
|
||||
### EnableDefaultContextMenu
|
||||
|
||||
EnableDefaultContextMenu active le menu contextuel par défaut du navigateur en production.
|
||||
|
||||
By default, the browser's default context-menu is only available in development and in a `-debug` [build](../reference/cli.mdx#build) along with the devtools inspector, Using this option you can enable the default context-menu in `production` while the devtools inspector won't be available unless the `-devtools` build flag is used.
|
||||
|
||||
Lorsque cette option est activée, par défaut, le menu contextuel ne sera affiché que pour du texte (où Couper/Copier/Coller est nécessaire), pour remplacer ce comportement, vous pouvez utiliser la propriété CSS `--default-contextmenu` sur n'importe quel élément HTML (y compris le corps ``) avec les valeurs suivantes :
|
||||
|
||||
| Style CSS | Comportement |
|
||||
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--default-contextmenu: auto;` | (**défaut**) n'affichera le menu contextuel par défaut que si :<br/> contentEditable est vrai OU le texte a été sélectionné OU l'élément est entrée ou la zone de texte |
|
||||
| `--default-contextmenu: show;` | affichera toujours le menu de contexte par défaut |
|
||||
| `--default-contextmenu: hide;` | masquera toujours le menu contextuel par défaut |
|
||||
|
||||
Cette règle est héritée comme n'importe quelle règle CSS normale, donc l'imbrication fonctionne comme prévu.
|
||||
|
||||
:::note
|
||||
Cette fonctionnalité de filtrage n'est activée qu'en production, donc en développement et en construction de débogage, le menu contextuel complet est toujours disponible partout.
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Cette fonctionnalité de filtrage n'est PAS une mesure de sécurité, le développeur devrait s'attendre à ce que le menu contextuel complet puisse être divulgué à tout moment qui pourrait contenir des commandes comme (Télécharger l'image, Recharger, Enregistrer la page web), si c'est une préoccupation, le développeur DEVRAIT NE PAS activer le menu contextuel par défaut.
|
||||
:::
|
||||
|
||||
|
||||
Nom: EnableDefaultContextMenu<br/> Type: `bool`
|
||||
|
||||
### EnableFraudulentWebsiteDetection
|
||||
|
||||
EnableFraudulentWebWebDetection permet de rechercher des contenus frauduleux, tels que des programmes malveillants ou des tentatives d'hameçonnage. Ces services peuvent envoyer des informations à partir de votre application, telles que les URL vers lesquelles vous avez navigué et éventuellement d'autres contenus vers le cloud, des services d'Apple et de Microsoft.
|
||||
|
||||
Nom: EnableFraudulentWebsiteDetection<br/> Type: `bool`
|
||||
|
||||
### ZoomFactor
|
||||
|
||||
Nom: ZoomFactor<br/> Type: `float64`
|
||||
|
||||
Ceci définit le facteur de zoom pour WebView2. Il s'agit de l'option correspondant au zoom avant ou arrière défini par l'utilisateur.
|
||||
|
||||
### IsZoomControlEnabled
|
||||
|
||||
Nom : IsZoomControlEnabled<br/> Type : `bool`
|
||||
|
||||
Cela permet de modifier le facteur de zoom par l'utilisateur. Veuillez noter que le facteur de zoom peut être défini dans les options tandis que ne permet pas à l'utilisateur de le modifier à l'exécution (f.e. pour une application vitrine ou similaire).
|
||||
|
||||
### Bind
|
||||
|
||||
La liste des structs Go définissant des méthodes qui doivent être liées au frontend.
|
||||
|
||||
Nom: Bind<br/> Type: `[]interface{}`
|
||||
|
||||
### ErrorFormatter
|
||||
|
||||
Une fonction qui détermine comment les erreurs sont formatées lorsqu'elles sont retournées par un appel de méthode JS-to-Go. La valeur retournée sera sous format JSON.
|
||||
|
||||
Nom: ErrorFormatter<br/> Type: `func (error) any`
|
||||
|
||||
### Windows
|
||||
|
||||
Ceci définit les options [spécifiques à Windows](#windows).
|
||||
|
||||
Nom: Windows<br/> Type: `*windows.Options`
|
||||
|
||||
#### WebviewIsTransparent
|
||||
|
||||
Mettre ceci à `true` rendra l'arrière-plan du webview transparent quand une valeur alpha de `0` est utilisée. Cela signifie que si vous utilisez `rgba(0,0,0,0)` pour `la couleur d'arrière-plan` dans votre CSS, la fenêtre d'hôte sera affichée. Souvent combiné avec [WindowIsTranslucent](#WindowIsTranslucent) pour faire des applications d'apparence de givre.
|
||||
|
||||
Nom : WebviewIsTransparent<br/> Type : `bool`
|
||||
|
||||
#### WindowIsTranslucent
|
||||
|
||||
Définir ceci à `true` rendra l'arrière-plan de la fenêtre translucide. Souvent combiné avec [WebviewIsTransparent](#WebviewIsTransparent).
|
||||
|
||||
Pour les versions de Windows 11 avant la version 22621, cela utilisera la méthode [BlurBehind](https://learn.microsoft.com/en-us/windows/win32/dwm/blur-ovw) pour la translucidité, qui peut être lente. Pour les versions de Windows 11 après la version 22621, cela activera les nouveaux types de transparence qui sont beaucoup plus rapides. Par défaut, le type de transparence utilisé sera déterminé par Windows. Pour configurer ceci, utilisez l'option [BackdropType](#BackdropType).
|
||||
|
||||
Nom: WindowIsTranslucent<br/> Type: `bool`
|
||||
|
||||
#### BackdropType
|
||||
|
||||
:::note
|
||||
|
||||
Nécessite Windows 11 version 22621 ou supérieure.
|
||||
|
||||
:::
|
||||
|
||||
Définit le type de transparence de la fenêtre. Ceci n'est applicable que si [WindowIsTranslucent](#WindowIsTranslucent) est défini à `true`.
|
||||
|
||||
Nom: BackdropType<br/> Type `windows.BackdropType`
|
||||
|
||||
La valeur peut être l'une des valeurs suivantes :
|
||||
|
||||
| Valeur | Description |
|
||||
| ------- | ------------------------------------------------------------------------------------------------- |
|
||||
| Auto | Laisser Windows décider quel arrière-plan utiliser |
|
||||
| None | Ne pas utiliser de transparence |
|
||||
| Acrylic | Utilisez l'effet [Acrylique](https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic) |
|
||||
| Mica | Utiliser l'effet [Mica](https://learn.microsoft.com/en-us/windows/apps/design/style/mica) |
|
||||
| Tabbed | Utiliser Tabbed. C'est un arrière-plan qui est similaire à Mica. |
|
||||
|
||||
#### DisableWindowIcon
|
||||
|
||||
Définir ceci à `true` supprimera l'icône dans le coin supérieur gauche de la barre de titre.
|
||||
|
||||
Nom: DisableWindowIcon<br/> Type: `bool`
|
||||
|
||||
#### DisableFramelessWindowDecorations
|
||||
|
||||
Définir ceci à `true` supprimera les décorations de fenêtre en mode [sans cadre](#Frameless). Cela signifie qu'il n'y aura pas de « Aero Shadow» et aucun « Coins arrondis» ne sera affiché pour la fenêtre. Veuillez noter que les "coins arrondis" ne sont pris en charge que sur Windows 11.
|
||||
|
||||
Nom: DisableFramelessWindowDecorations<br/> Type: `bool`
|
||||
|
||||
#### WebviewUserDataPath
|
||||
|
||||
Ceci définit le chemin où WebView2 stocke les données de l'utilisateur. Si vide, `%APPDATA%\[BinaryName.exe]` sera utilisé.
|
||||
|
||||
Nom: WebviewUserDataPath<br/> Type: `string`
|
||||
|
||||
#### WebviewBrowserPath
|
||||
|
||||
Ceci définit le chemin vers un répertoire avec les fichiers exécutables et bibliothèques WebView2. Si l'option est vide, l'instance de webview2 installé dans le système sera utilisé.
|
||||
|
||||
Informations importantes sur la version corrigée :
|
||||
|
||||
- [Comment récupérer et extraire l'exécutable](https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution#details-about-the-fixed-version-runtime-distribution-mode)
|
||||
- [Problèmes connus pour la version corrigée](https://docs.microsoft.com/en-us/microsoft-edge/webview2/concepts/distribution#known-issues-for-fixed-version)
|
||||
- [Le chemin de la version corrigée du runtime WebView2 ne doit pas contenir \Edge\Application\.](https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/webview2-idl?view=webview2-1.0.1245.22#createcorewebview2environmentwithoptions)
|
||||
|
||||
Nom: WebviewBrowserPath<br/> Type: `string`
|
||||
|
||||
#### Theme
|
||||
|
||||
Version minimale de Windows : Windows 10 2004/20H1
|
||||
|
||||
Ceci définit le thème que l'application doit utiliser :
|
||||
|
||||
| Valeur | Description |
|
||||
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| SystemDefault | _Default_. Le thème sera basé sur la valeur par défaut du système. Si l'utilisateur change de thème, l'application se mettra à jour pour utiliser le nouveau paramètre |
|
||||
| Dark | L'application utilisera uniquement un thème sombre |
|
||||
| Light | L'application utilisera uniquement un thème clair |
|
||||
|
||||
Nom: Theme<br/> Type: `windows.Theme`
|
||||
|
||||
#### CustomTheme
|
||||
|
||||
:::note
|
||||
|
||||
Version minimale de Windows : Windows 10/11 2009/21H2 Build 22000
|
||||
|
||||
:::
|
||||
|
||||
Vous permet de spécifier des couleurs personnalisées pour la barre de titre, le texte de titre et la bordure pour le mode clair et foncé. ainsi que lorsque la fenêtre est active ou inactive.
|
||||
|
||||
Nom: CustomTheme<br/> Type: `windows.CustomTheme`
|
||||
|
||||
##### Type CustomTheme
|
||||
|
||||
Le struct CustomTheme utilise `int32` pour spécifier les valeurs de couleurs. Celles-ci sont au format standard(!) Windows soit : `0x00BBGGAA`. Une fonction d'aide est fournie pour effectuer les conversions de RGB dans ce format : `windows.RGB(r,g,b uint8)`.
|
||||
|
||||
NOTE : Toute valeur non fournie sera par défaut noire.
|
||||
|
||||
```go
|
||||
type ThemeSettings struct {
|
||||
DarkModeTitleBar int32
|
||||
DarkModeTitleBarInactive int32
|
||||
DarkModeTitleText int32
|
||||
DarkModeTitleTextInactive int32
|
||||
DarkModeBorder int32
|
||||
DarkModeBorderInactive int32
|
||||
LightModeTitleBar int32
|
||||
LightModeTitleBarInactive int32
|
||||
LightModeTitleText int32
|
||||
LightModeTitleTextInactive int32
|
||||
LightModeBorder int32
|
||||
LightModeBorderInactive int32
|
||||
}
|
||||
```
|
||||
|
||||
Exemple:
|
||||
|
||||
```go
|
||||
CustomTheme: &windows.ThemeSettings{
|
||||
// Theme to use when window is active
|
||||
DarkModeTitleBar: windows.RGB(255, 0, 0), // Red
|
||||
DarkModeTitleText: windows.RGB(0, 255, 0), // Green
|
||||
DarkModeBorder: windows.RGB(0, 0, 255), // Blue
|
||||
LightModeTitleBar: windows.RGB(200, 200, 200),
|
||||
LightModeTitleText: windows.RGB(20, 20, 20),
|
||||
LightModeBorder: windows.RGB(200, 200, 200),
|
||||
// Theme to use when window is inactive
|
||||
DarkModeTitleBarInactive: windows.RGB(128, 0, 0),
|
||||
DarkModeTitleTextInactive: windows.RGB(0, 128, 0),
|
||||
DarkModeBorderInactive: windows.RGB(0, 0, 128),
|
||||
LightModeTitleBarInactive: windows.RGB(100, 100, 100),
|
||||
LightModeTitleTextInactive: windows.RGB(10, 10, 10),
|
||||
LightModeBorderInactive: windows.RGB(100, 100, 100),
|
||||
},
|
||||
```
|
||||
|
||||
#### Messages
|
||||
|
||||
Un struct de chaînes utilisées par l'installateur webview2 si un runtime webview2 valide n'est pas trouvé.
|
||||
|
||||
Nom: Messages<br/> Type: `*windows.Messages`
|
||||
|
||||
Personnalisez ceci pour n'importe quelle langue que vous choisissez de supporter.
|
||||
|
||||
#### ResizeDebounceMS
|
||||
|
||||
ResizeDebounceMS est le temps entre deux réajustements du contenu de la fenêtre lors du redimensionnement de la fenêtre. La valeur par défaut (0) effectuera des réajustements aussi vite qu'il le peut.
|
||||
|
||||
Nom: ResizeDebounceMS<br/> Type: `uint16`
|
||||
|
||||
#### OnSuspend
|
||||
|
||||
Si défini, cette fonction sera appelée lorsque Windows passera en mode économie d'énergie
|
||||
|
||||
Nom: OnSuspend<br/> Type: `func()`
|
||||
|
||||
#### OnResume
|
||||
|
||||
Si défini, cette fonction sera appelée lorsque Windows sortira du mode économie d'énergie
|
||||
|
||||
Nom: OnResume<br/> Type: `func()`
|
||||
|
||||
#### WebviewGpuIsDisabled
|
||||
|
||||
Définir ceci à `true` désactivera l'accélération matérielle GPU pour la webview.
|
||||
|
||||
Nom: WebviewGpuIsDisabled<br/> Type: `bool`
|
||||
|
||||
#### EnableSwipeGestures
|
||||
|
||||
Setting this to `true` will enable swipe gestures for the webview.
|
||||
|
||||
Name: EnableSwipeGestures<br/> Type: `bool`
|
||||
|
||||
### Mac
|
||||
|
||||
Ceci définit [les options spécifiques à Mac](#mac).
|
||||
|
||||
Nom: Mac<br/> Type: `*mac.Options`
|
||||
|
||||
#### TitleBar
|
||||
|
||||
La structure TitleBar permet de configurer l'apparence de la barre de titre.
|
||||
|
||||
Nom: TitleBar<br/> Type: [`*mac.TitleBar`](#titlebar-struct)
|
||||
|
||||
##### Struct de la Titlebar
|
||||
|
||||
La barre de titre de l'application peut être personnalisée en utilisant les options suivantes de TitleBar :
|
||||
|
||||
```go
|
||||
type TitleBar struct {
|
||||
TitlebarAppearsTransparent bool
|
||||
HideTitle bool
|
||||
HideTitleBar bool
|
||||
FullSizeContent bool
|
||||
UseToolbar bool
|
||||
HideToolbarSeparator bool
|
||||
}
|
||||
```
|
||||
|
||||
| Nom | Description |
|
||||
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| TitlebarAppearsTransparent | Rend la barre de titre transparente. Cela a pour effet de masquer la barre de titre et le contenu remplit la fenêtre. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindow/1419167-titlebarappearstransparent?language=objc) |
|
||||
| HideTitle | Masque le titre de la fenêtre. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindowtitlevisibility?language=objc) |
|
||||
| HideTitleBar | Supprime [NSWindowStyleMaskTitled](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemasktitled/) du style |
|
||||
| FullSizeContent | Fait que la webview remplisse toute la fenêtre. [Apple Docs](https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemaskfullsizecontentview) |
|
||||
| UseToolbar | Ajoute une barre d'outils par défaut à la fenêtre. [Apple Docs](https://developer.apple.com/documentation/appkit/nstoolbar?language=objc) |
|
||||
| HideToolbarSeparator | Supprime la ligne située sous la barre d'outils. [Apple Docs](https://developer.apple.com/documentation/appkit/nstoolbar/1516954-showsbaselineseparator?language=objc) |
|
||||
|
||||
Des paramètres préconfigurés sont disponibles :
|
||||
|
||||
| Configuration | Exemple |
|
||||
| --------------------------- | ---------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
Exemple:
|
||||
|
||||
```go
|
||||
Mac: &mac.Options{
|
||||
TitleBar: mac.TitleBarHiddenInset(),
|
||||
}
|
||||
```
|
||||
|
||||
Cliquez sur [ici](https://github.com/lukakerr/NSWindowStyles) si vous voulez de l'inspiration sur la personnalisation de la barre de titre.
|
||||
|
||||
#### Appearance
|
||||
|
||||
L'apparence est utilisée pour définir le style de votre application en accord avec les noms [NSAppearance](https://developer.apple.com/documentation/appkit/nsappearancename?language=objc) d'Apple.
|
||||
|
||||
Nom: Appearance<br/> Type: [`mac.AppearanceType`](#appearance-type)
|
||||
|
||||
##### Type d'Appearance
|
||||
|
||||
Vous pouvez spécifier l'apparence [de l'application](https://developer.apple.com/documentation/appkit/nsappearance?language=objc).
|
||||
|
||||
| Valeur | Description |
|
||||
| ----------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| DefaultAppearance | DefaultAppararance utilise la valeur système par défaut |
|
||||
| NSAppearanceNameAqua | Utilise l'apparence thème clair standard |
|
||||
| NSAppearanceNameDarkAqua | Utilise l'apparence thème sombre standard |
|
||||
| NSAppearanceNameVibrantLight | Utilise une apparence avec une lumière vibrante |
|
||||
| NSAppearanceNameAccessibilityHighContrastAqua | Utilise l'apparence thème clair standard avec un constrate élevé |
|
||||
| NSAppearanceNameAccessibilityHighContrastDarkAqua | Utilise l'apparence thème sombre standard avec un contraste élevé |
|
||||
| NSAppearanceNameAccessibilityHighContrastVibrantLight | Utilise l'apparence lumière vibrante avec un constrate élevé |
|
||||
| NSAppearanceNameAccessibilityHighContrastVibrantDark | Utilise l'apparence du thème sombre vibrant avec un constrate élevé |
|
||||
|
||||
Exemple:
|
||||
|
||||
```go
|
||||
Mac: &mac.Options{
|
||||
Appearance: mac.NSAppearanceNameDarkAqua,
|
||||
}
|
||||
```
|
||||
|
||||
#### WebviewIsTransparent
|
||||
|
||||
Mettre ceci à `true` rendra l'arrière-plan du webview transparent quand une valeur alpha de `0` est utilisée. Cela signifie que si vous utilisez `rgba(0,0,0,0)` pour `la couleur d'arrière-plan` dans votre CSS, la fenêtre d'hôte sera affichée. Souvent combiné avec [WindowIsTranslucent](#WindowIsTranslucent) pour faire des applications d'apparence de givre.
|
||||
|
||||
Nom : WebviewIsTransparent<br/> Type : `bool`
|
||||
|
||||
#### WindowIsTranslucent
|
||||
|
||||
Définir ceci à `true` rendra l'arrière-plan de la fenêtre translucide. Souvent combiné avec [WebviewIsTransparent](#WebviewIsTransparent) pour donner un aspect givré à la fenêtre.
|
||||
|
||||
Nom: WindowIsTranslucent<br/> Type: `bool`
|
||||
|
||||
#### Preferences
|
||||
|
||||
The Preferences struct provides the ability to configure the Webview preferences.
|
||||
|
||||
Name: Preferences<br/> Type: [`*mac.Preferences`](#preferences-struct)
|
||||
|
||||
##### Preferences struct
|
||||
|
||||
You can specify the webview preferences.
|
||||
|
||||
```go
|
||||
type Preferences struct {
|
||||
TabFocusesLinks u.Bool
|
||||
TextInteractionEnabled u.Bool
|
||||
FullscreenEnabled u.Bool
|
||||
}
|
||||
```
|
||||
|
||||
| Nom | Description |
|
||||
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| TabFocusesLinks | A Boolean value that indicates whether pressing the tab key changes the focus to links and form controls. [Apple Docs](https://developer.apple.com/documentation/webkit/wkpreferences/2818595-tabfocuseslinks?language=objc) |
|
||||
| TextInteractionEnabled | A Boolean value that indicates whether to allow people to select or otherwise interact with text. [Apple Docs](https://developer.apple.com/documentation/webkit/wkpreferences/3727362-textinteractionenabled?language=objc) |
|
||||
| FullscreenEnabled | A Boolean value that indicates whether a web view can display content full screen. [Apple Docs](https://developer.apple.com/documentation/webkit/wkpreferences/3917769-elementfullscreenenabled?language=objc) |
|
||||
|
||||
Exemple:
|
||||
|
||||
```go
|
||||
Mac: &mac.Options{
|
||||
Preferences: &mac.Preferences{
|
||||
TabFocusesLinks: mac.Enabled,
|
||||
TextInteractionEnabled: mac.Disabled,
|
||||
FullscreenEnabled: mac.Enabled,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### About
|
||||
|
||||
Cette configuration vous permet de définir le titre, le message et l'icône pour l'élément de menu "À propos" dans le menu de l'application créé par le rôle "AppMenu".
|
||||
|
||||
Nom: About<br/> Type: [`*mac.AboutInfo`](#about-struct)
|
||||
|
||||
##### Struct de About
|
||||
|
||||
```go
|
||||
|
||||
type AboutInfo struct {
|
||||
Title string
|
||||
Message string
|
||||
Icon []byte
|
||||
}
|
||||
```
|
||||
|
||||
Si ces paramètres sont fournis, un lien de menu "À propos" apparaîtra dans le menu de l'application (lors de l'utilisation du rôle `AppMenu`). Exemple:
|
||||
|
||||
```go
|
||||
//go:embed build/appicon.png
|
||||
var icon []byte
|
||||
|
||||
func main() {
|
||||
err := wails.Run(&options.App{
|
||||
...
|
||||
Mac: &mac.Options{
|
||||
About: &mac.AboutInfo{
|
||||
Title: "My Application",
|
||||
Message: "© 2021 Me",
|
||||
Icon: icon,
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
L'élément de menu "À propos" apparaîtra dans le menu de l'application:
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-menu.webp").default}
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
Lorsqu'il est cliqué, cela ouvrira la boîte de message "à propos" :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-dialog.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
### Linux
|
||||
|
||||
Ceci définit [les options spécifiques à Linux](#linux).
|
||||
|
||||
Nom: Linux<br/> Type: `*linux.Options`
|
||||
|
||||
#### Icon
|
||||
|
||||
Définit l'icône représentant la fenêtre. Cette icône est utilisée lorsque la fenêtre est réduite (aussi appelée iconified).
|
||||
|
||||
Nom: Icon<br/> Type: `[]byte`
|
||||
|
||||
Certains gestionnaires de fenêtres ou environnements de bureau peuvent également le placer dans le cadre de la fenêtre, ou l'afficher dans d'autres contextes. Sur d'autres, l'icône n'est pas du tout utilisée, donc son utilisation peut varier.
|
||||
|
||||
NOTE : Gnome sur Wayland n'affiche pas cette icône. Pour y avoir une icône d'application, un fichier `.desktop` doit être utilisé. Sous KDE, cela devrait fonctionner.
|
||||
|
||||
L’icône doit être fournie dans la taille qu’elle a été dessinée naturellement, c’est-à-dire ne pas redimensionner l’image avant de la passer. La mise à l'échelle est reportée à la dernière minute, lorsque la taille finale désirée est connue, pour permettre une meilleure qualité.
|
||||
|
||||
#### WindowIsTranslucent
|
||||
|
||||
Définir ceci à `true` rendra l'arrière-plan de la fenêtre translucide. Certains gestionnaires de fenêtres peuvent l'ignorer, ou résulter en une fenêtre noire.
|
||||
|
||||
Nom: WindowIsTranslucent<br/> Type: `bool`
|
||||
|
||||
#### WebviewGpuPolicy
|
||||
|
||||
Cette option est utilisée pour déterminer la politique d'accélération matérielle effectuée par webview.
|
||||
|
||||
Nom: WebviewGpuPolicy<br/> Type: [`options.WebviewGpuPolicy`](#webviewgpupolicy-type)<br/> Défaut: `WebviewGpuPolicyAlways`
|
||||
|
||||
##### Type de WebviewGpuPolicy
|
||||
|
||||
| Valeur | Description |
|
||||
| ------------------------ | ---------------------------------------------------------------------------- |
|
||||
| WebviewGpuPolicyAlways | L'accélération matérielle est toujours activée |
|
||||
| WebviewGpuPolicyOnDemand | L'accélération matérielle est activée/désactivée à la demande du contenu web |
|
||||
| WebviewGpuPolicyNever | L'accélération matérielle est toujours désactivée |
|
||||
|
||||
#### ProgramName
|
||||
|
||||
This option is used to set the program's name for the window manager via GTK's g_set_prgname(). This name should not be localized, [see the docs](https://docs.gtk.org/glib/func.set_prgname.html).
|
||||
|
||||
When a .desktop file is created this value helps with window grouping and desktop icons when the .desktop file's `Name` property differs form the executable's filename.
|
||||
|
||||
Name: ProgramName<br/> Type: string<br/>
|
||||
|
||||
### Debug
|
||||
|
||||
Ceci définit [les options spécifiques au débogage](#Debug) qui s'appliquent aux compilations de débogage.
|
||||
|
||||
Nom: Debug<br/> Type: `options.Debug`
|
||||
|
||||
#### OpenInspectorOnStartup
|
||||
|
||||
Définir cette option à `true` ouvrira l'inspecteur Web au démarrage de l'application.
|
||||
|
||||
Nom: OpenInspectorOnStartup<br/> Type: `bool`
|
||||
|
||||
[^1]: Cela nécessite la prise en charge de WebKit2GTK 2.36+ et votre application doit être construite avec la balise de compilation `webkit2_36` pour activer le support de cette fonctionnalité. Cela augmente aussi la version minnimale de WebKit2GTK à 2.36 pour votre application.
|
||||
[^2]: Cela nécessite la prise en charge de WebKit2GTK 2.40+ et votre application doit être construite avec la balise de compilation `webkit2_40` pour activer le support de cette fonctionnalité. Cela augmente aussi la version minnimale de WebKit2GTK à 2.40 pour votre application. [ [ ↩](#fnref2:2){.footnote-backref} ↩](#fnref:2){.footnote-backref}
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Configuration du projet
|
||||
|
||||
La configuration du projet se trouve dans le fichier `wails.json` du répertoire du projet. La structure de la configuration est :
|
||||
|
||||
```json5
|
||||
{
|
||||
// Project config version
|
||||
"version": "",
|
||||
// The project name
|
||||
"name": "",
|
||||
// Relative path to the directory containing the compiled assets, this is normally inferred and could be left empty
|
||||
"assetdir": "",
|
||||
// Additional directories to trigger reloads (comma separated), this is only used for some advanced asset configurations
|
||||
"reloaddirs": "",
|
||||
// The directory where the build files reside. Defaults to 'build'
|
||||
"build:dir": "",
|
||||
// Relative path to the frontend directory. Defaults to 'frontend'
|
||||
"frontend:dir": "",
|
||||
// The command to install node dependencies, run in the frontend directory - often `npm install`
|
||||
"frontend:install": "",
|
||||
// The command to build the assets, run in the frontend directory - often `npm run build`
|
||||
"frontend:build": "",
|
||||
// This command has been replaced by frontend:dev:build. If frontend:dev:build is not specified will falls back to this command. \nIf this command is also not specified will falls back to frontend:build
|
||||
"frontend:dev": "",
|
||||
// This command is the dev equivalent of frontend:build. If not specified falls back to frontend:dev
|
||||
"frontend:dev:build": "",
|
||||
// This command is the dev equivalent of frontend:install. If not specified falls back to frontend:install
|
||||
"frontend:dev:install": "",
|
||||
// This command is run in a separate process on `wails dev`. Useful for 3rd party watchers or starting 3d party dev servers
|
||||
"frontend:dev:watcher": "",
|
||||
// URL to a 3rd party dev server to be used to serve assets, EG Vite. \nIf this is set to 'auto' then the devServerUrl will be inferred from the Vite output
|
||||
"frontend:dev:serverUrl": "",
|
||||
// Relative path to the directory that the auto-generated JS modules will be created
|
||||
"wailsjsdir": "",
|
||||
// The name of the binary
|
||||
"outputfilename": "",
|
||||
// The default time the dev server waits to reload when it detects a change in assets
|
||||
"debounceMS": 100,
|
||||
// Address to bind the wails dev sever to. Default: localhost:34115
|
||||
"devServer": "",
|
||||
// Arguments passed to the application in shell style when in dev mode
|
||||
"appargs": "",
|
||||
// Defines if build hooks should be run though they are defined for an OS other than the host OS.
|
||||
"runNonNativeBuildHooks": false,
|
||||
"preBuildHooks": {
|
||||
// The command that will be executed before a build of the specified GOOS/GOARCH: ${platform} is replaced with the "GOOS/GOARCH". The "GOOS/GOARCH" hook is executed before the "GOOS/*" and "*/*" hook.
|
||||
"GOOS/GOARCH": "",
|
||||
// The command that will be executed before a build of the specified GOOS: ${platform} is replaced with the "GOOS/GOARCH". The "GOOS/*" hook is executed before the "*/*" hook.
|
||||
"GOOS/*": "",
|
||||
// The command that will be executed before every build: ${platform} is replaced with the "GOOS/GOARCH".
|
||||
"*/*": ""
|
||||
},
|
||||
"postBuildHooks": {
|
||||
// The command that will be executed after a build of the specified GOOS/GOARCH: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary. The "GOOS/GOARCH" hook is executed before the "GOOS/*" and "*/*" hook.
|
||||
"GOOS/GOARCH": "",
|
||||
// The command that will be executed after a build of the specified GOOS: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary. The "GOOS/*" hook is executed before the "*/*" hook.
|
||||
"GOOS/*": "",
|
||||
// The command that will be executed after every build: ${platform} is replaced with the "GOOS/GOARCH" and ${bin} with the path to the compiled binary.
|
||||
"*/*": ""
|
||||
},
|
||||
// Data used to populate manifests and version info.
|
||||
"info": {
|
||||
// The company name. Default: [The project name]
|
||||
"companyName": "",
|
||||
// The product name. Default: [The project name]
|
||||
"productName": "",
|
||||
// The version of the product. Default: '1.0.0'
|
||||
"productVersion": "",
|
||||
// The copyright of the product. Default: 'Copyright.........'
|
||||
"copyright": "",
|
||||
// A short comment of the app. Default: 'Built using Wails (https://wails.app)'
|
||||
"comments": ""
|
||||
},
|
||||
// 'multiple': One installer per architecture. 'single': Single universal installer for all architectures being built. Default: 'multiple'
|
||||
"nsisType": "",
|
||||
// Whether the app should be obfuscated. Default: false
|
||||
"obfuscated": "",
|
||||
// The arguments to pass to the garble command when using the obfuscated flag
|
||||
"garbleargs": ""
|
||||
}
|
||||
```
|
||||
|
||||
This file is read by the Wails CLI when running `wails build` or `wails dev`.
|
||||
|
||||
The `assetdir`, `reloaddirs`, `wailsjsdir`, `debounceMS`, `devserver` and `frontenddevserverurl` flags in `wails build/dev` will update the project config
|
||||
and thus become defaults for subsequent runs.
|
||||
|
||||
The JSON Schema for this file is located [here](https://wails.io/schemas/config.v2.json).
|
||||
@ -0,0 +1,13 @@
|
||||
---
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Navigateur
|
||||
|
||||
Ces méthodes sont liées au navigateur du système.
|
||||
|
||||
### BrowserOpenURL
|
||||
|
||||
Ouvre l'URL donnée dans le navigateur système.
|
||||
|
||||
Go: `BrowserOpenURL(ctx context.Context, url string)`<br/> JS: `BrowserOpenURL(url string)`
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
# Clipboard
|
||||
|
||||
Cette partie du runtime fournit un accès au presse-papiers du système d'exploitation.<br/> L'implémentation actuelle ne gère que le texte.
|
||||
|
||||
### ClipboardGetText
|
||||
|
||||
Cette méthode lit le texte actuellement stocké dans le presse-papiers.
|
||||
|
||||
Go: `ClipboardGetText(ctx context.Context) (string, error)`<br/> Retourne: une chaîne de caractères (si le presse papier est vide, il retournera une chaîne vide) ou une erreur.
|
||||
|
||||
JS: `ClipboardGetText(): Promise<string>`<br/> Retourne : Un promise d'une chaine de caractères (si le presse papier est vide, il retournera une chaîne vide).
|
||||
|
||||
### ClipboardSetText
|
||||
|
||||
Cette méthode écrit du texte dans le presse-papiers.
|
||||
|
||||
Go: `ClipboardSetText(ctx context.Context, text string) error`<br/> Retourne: Une erreur si il y en a une.
|
||||
|
||||
JS: `ClipboardSetText(text: string): Promise<boolean>`<br/> Retourne: Un promise avec true si le texte a été écrit avec succès dans le presse papier, autrement il contiendra false.
|
||||
@ -0,0 +1,302 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Boîte de dialogue
|
||||
|
||||
Cette partie du runtime fournit un accès aux boîtes de dialogue natives, telles que les sélecteurs de fichiers et les boîtes de messages.
|
||||
|
||||
:::info JavaScript
|
||||
|
||||
La boîte de dialogue n'est actuellement pas prise en charge dans l'exécuteur JS.
|
||||
|
||||
:::
|
||||
|
||||
### OpenDirectoryDialog
|
||||
|
||||
Ouvre une boîte de dialogue qui invite l'utilisateur à sélectionner un répertoire. Peut être personnalisé en utilisant [OpenDialogOptions](#opendialogoptions).
|
||||
|
||||
Go: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
|
||||
|
||||
Renvoie : le répertoire sélectionné (vide si l'utilisateur a annulé) ou une erreur
|
||||
|
||||
### OpenFileDialog
|
||||
|
||||
Ouvre une boîte de dialogue qui invite l'utilisateur à sélectionner un fichier. Peut être personnalisé en utilisant [OpenDialogOptions](#opendialogoptions).
|
||||
|
||||
Go: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`
|
||||
|
||||
Renvoie : le fichier sélectionné (vide si l'utilisateur a annulé) ou une erreur
|
||||
|
||||
### OpenFileDialog
|
||||
|
||||
Ouvre une boîte de dialogue qui invite l'utilisateur à sélectionner plusieurs fichiers. Peut être personnalisé en utilisant [OpenDialogOptions](#opendialogoptions).
|
||||
|
||||
Go: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`
|
||||
|
||||
Renvoie : les fichiers sélectionnés (nil si l'utilisateur a annulé) ou une erreur
|
||||
|
||||
### SaveFileDialog
|
||||
|
||||
Ouvre une boîte de dialogue qui invite l'utilisateur à saisir un nom pour le fichier à enregistrer. Peut être personnalisé en utilisant [SaveDialogOptions](#savedialogoptions).
|
||||
|
||||
Go: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`
|
||||
|
||||
Renvoie : le fichier sélectionné (vide si l'utilisateur a annulé) ou une erreur
|
||||
|
||||
### MessageDialog
|
||||
|
||||
Affiche un message en utilisant une boîte de dialogue. Peut être personnalisé en utilisant [MessageDialogOptions](#messagedialogoptions).
|
||||
|
||||
Go: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`
|
||||
|
||||
Renvoie : Le texte du bouton sélectionné ou une erreur
|
||||
|
||||
## Options
|
||||
|
||||
### OpenDialogOptions
|
||||
|
||||
```go
|
||||
type OpenDialogOptions struct {
|
||||
DefaultDirectory string
|
||||
DefaultFilename string
|
||||
Title string
|
||||
Filters []FileFilter
|
||||
ShowHiddenFiles bool
|
||||
CanCreateDirectories bool
|
||||
ResolvesAliases bool
|
||||
TreatPackagesAsDirectories bool
|
||||
}
|
||||
```
|
||||
|
||||
| Champ | Description | Win | Mac | Lin |
|
||||
| -------------------------- | -------------------------------------------------------------- | --- | --- | --- |
|
||||
| DefaultDirectory | Le répertoire que la boîte de dialogue affichera à l'ouverture | ✅ | ✅ | ✅ |
|
||||
| DefaultFilename | Le nom du fichier par défaut | ✅ | ✅ | ✅ |
|
||||
| Title | Titre pour la boite de dialogue | ✅ | ✅ | ✅ |
|
||||
| [Filters](#filefilter) | Une liste de filtres de fichiers | ✅ | ✅ | ✅ |
|
||||
| ShowHiddenFiles | Afficher les fichiers cachés par le système | | ✅ | ✅ |
|
||||
| CanCreateDirectories | Autoriser l'utilisateur de créer des dossiers | | ✅ | |
|
||||
| ResolvesAliases | Si vrai, retourne le fichier et non l'alias | | ✅ | |
|
||||
| TreatPackagesAsDirectories | Autoriser la navigation dans les dossiers | | ✅ | |
|
||||
|
||||
### SaveDialogOptions
|
||||
|
||||
```go
|
||||
type SaveDialogOptions struct {
|
||||
DefaultDirectory string
|
||||
DefaultFilename string
|
||||
Title string
|
||||
Filters []FileFilter
|
||||
ShowHiddenFiles bool
|
||||
CanCreateDirectories bool
|
||||
TreatPackagesAsDirectories bool
|
||||
}
|
||||
```
|
||||
|
||||
| Champ | Description | Win | Mac | Lin |
|
||||
| -------------------------- | -------------------------------------------------------------- | --- | --- | --- |
|
||||
| DefaultDirectory | Le répertoire que la boîte de dialogue affichera à l'ouverture | ✅ | ✅ | ✅ |
|
||||
| DefaultFilename | Le nom du fichier par défaut | ✅ | ✅ | ✅ |
|
||||
| Title | Titre pour la boite de dialogue | ✅ | ✅ | ✅ |
|
||||
| [Filters](#filefilter) | Une liste de filtres de fichiers | ✅ | ✅ | ✅ |
|
||||
| ShowHiddenFiles | Afficher les fichiers cachés par le système | | ✅ | ✅ |
|
||||
| CanCreateDirectories | Autoriser l'utilisateur de créer des dossiers | | ✅ | |
|
||||
| TreatPackagesAsDirectories | Autoriser la navigation dans les dossiers | | ✅ | |
|
||||
|
||||
### MessageDialogOptions
|
||||
|
||||
```go
|
||||
type MessageDialogOptions struct {
|
||||
Type DialogType
|
||||
Title string
|
||||
Message string
|
||||
Buttons []string
|
||||
DefaultButton string
|
||||
CancelButton string
|
||||
}
|
||||
```
|
||||
|
||||
| Champ | Description | Win | Mac | Lin |
|
||||
| ------------- | ---------------------------------------------------------------------------------------------- | -------------- | --- | --- |
|
||||
| Type | Le type de boîte de dialogue de message: question, info... | ✅ | ✅ | ✅ |
|
||||
| Title | Titre pour la boite de dialogue | ✅ | ✅ | ✅ |
|
||||
| Message | Le message à afficher à l'utilisateur | ✅ | ✅ | ✅ |
|
||||
| Buttons | La liste des noms des boutons | | ✅ | |
|
||||
| DefaultButton | Le bouton avec ce texte doit être traité comme le bouton par défaut. Lié à la touche `entrée`. | ✅[*](#windows) | ✅ | |
|
||||
| CancelButton | Le bouton avec ce texte doit être traité permettant d'annuler. Lié à la touche `echap` | | ✅ | |
|
||||
|
||||
#### Windows
|
||||
|
||||
Windows a des boites de dialogue standard dans lesquels les boutons ne sont pas personnalisables. La valeur retournée sera une des valeurs suivantes : "Ok", "Cancel", "Abort", "Retry", "Ignore", "Yes", "No", "Try Again" ou "Continue".
|
||||
|
||||
Pour les boites de dialogues pour les questions, le bouton par défaut est "Oui" et le bouton d'annulation est "Non". Cela peut être modifié en définissant la valeur `DefaultButton` à `"No"`.
|
||||
|
||||
Exemple:
|
||||
```go
|
||||
result, err := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
|
||||
Type: runtime.QuestionDialog,
|
||||
Title: "Question",
|
||||
Message: "Do you want to continue?",
|
||||
DefaultButton: "No",
|
||||
})
|
||||
```
|
||||
|
||||
#### Linux
|
||||
|
||||
Linux a des boites de dialogue standard dans lesquels les boutons ne sont pas personnalisables. La valeur retournée sera de :"Ok", "Cancel", "Yes", "No"
|
||||
|
||||
#### Mac
|
||||
|
||||
Une boîte de dialogue sur Mac peut avoir jusqu'à 4 boutons. Si aucun `DefaultButton` ou `CancelButton` n'est donné, le premier bouton est considéré comme par défaut et est lié à la touche `entrée`.
|
||||
|
||||
Pour le code suivant :
|
||||
|
||||
```go
|
||||
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
|
||||
Title: "C'est ton tour",
|
||||
Message: "Choisi un nombre",
|
||||
Buttons: []string{"un", "deux", "trois", "quatre"},
|
||||
})
|
||||
```
|
||||
|
||||
le premier bouton est affiché comme étant celui par défaut :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/runtime/dialog_no_defaults.png").default}
|
||||
width="30%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
Et si nous spécifions que le `DefaultButton` est "deux":
|
||||
|
||||
```go
|
||||
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
|
||||
Title: "It's your turn!",
|
||||
Message: "Select a number",
|
||||
Buttons: []string{"one", "two", "three", "four"},
|
||||
DefaultButton: "two",
|
||||
})
|
||||
```
|
||||
|
||||
le deuxième bouton est affiché comme étant la réponse par défaut. Lorsque la touche `entrée` est appuyée, la valeur "deux" est retournée.
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/runtime/dialog_default_button.png").default}
|
||||
width="30%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
Si nous spécifions maintenant `CancelButton` à "trois":
|
||||
|
||||
```go
|
||||
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
|
||||
Title: "It's your turn!",
|
||||
Message: "Select a number",
|
||||
Buttons: []string{"one", "two", "three", "four"},
|
||||
DefaultButton: "two",
|
||||
CancelButton: "three",
|
||||
})
|
||||
```
|
||||
|
||||
le bouton avec "trois" est affiché en bas de la boîte de dialogue. Si la touche `echap` est appuyée, la valeur "trois" est retournée:
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/runtime/dialog_default_cancel.png").default}
|
||||
width="30%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
```
|
||||
|
||||
#### DialogType
|
||||
|
||||
```go
|
||||
const (
|
||||
InfoDialog DialogType = "info"
|
||||
WarningDialog DialogType = "warning"
|
||||
ErrorDialog DialogType = "error"
|
||||
QuestionDialog DialogType = "question"
|
||||
)
|
||||
```
|
||||
|
||||
### FileFilter
|
||||
|
||||
```go
|
||||
type FileFilter struct {
|
||||
DisplayName string // Filter information EG: "Image Files (*.jpg, *.png)"
|
||||
Pattern string // semi-colon separated list of extensions, EG: "*.jpg;*.png"
|
||||
}
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
Windows vous permet d'utiliser plusieurs filtres de fichiers dans les boîtes de dialogue. Chaque FileFilter s'affichera comme une entrée séparée dans la boîte de dialogue :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/runtime/dialog_win_filters.png").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
```
|
||||
|
||||
#### Linux
|
||||
|
||||
Linux vous permet d'utiliser plusieurs filtres de fichiers dans les boîtes de dialogue. Chaque FileFilter s'affichera comme une entrée séparée dans la boîte de dialogue :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/runtime/dialog_lin_filters.png").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
```
|
||||
|
||||
#### Mac
|
||||
|
||||
Les dialogues Mac n'ont qu'un ensemble unique de motifs pour filtrer les fichiers. Si plusieurs filtres de fichiers sont fournis, Wails utilisera tous les modèles définis.
|
||||
|
||||
Exemple:
|
||||
|
||||
```go
|
||||
selection, err := runtime.OpenFileDialog(b.ctx, runtime.OpenDialogOptions{
|
||||
Title: "Select File",
|
||||
Filters: []runtime.FileFilter{
|
||||
{
|
||||
DisplayName: "Images (*.png;*.jpg)",
|
||||
Pattern: "*.png;*.jpg",
|
||||
}, {
|
||||
DisplayName: "Videos (*.mov;*.mp4)",
|
||||
Pattern: "*.mov;*.mp4",
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Cela se traduira par l'ouverture de la boîte de dialogue "Ouvrir un fichier" en utilisant `*.png,*.jpg,*.mov,*.mp4` comme filtres.
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Événements
|
||||
|
||||
Le runtime Wails fournit un système d'événements unifiés, où les événements peuvent être émis ou reçus par Go ou JavaScript. En option, des données peuvent être transmises avec les événements. Les écouteurs vont recevoir les données dans les types de donnée du langage correspondant.
|
||||
|
||||
### EventsOn
|
||||
|
||||
Cette méthode définit un listener pour le nom d'événement donné. Lorsqu'un événement de type `eventName` est [émis](#EventsEmit), la méthode définie en callback est déclenchée. Toutes les données supplémentaires envoyées avec l'événement émis seront passées en paramètre à la méthode définie en callback. Il renvoie une fonction pour annuler l'écouteur.
|
||||
|
||||
Go: `EventsOn(ctx context.Context, eventName string, callback func(optionalData ...interface{})) func()`<br/> JS: `EventsOn(eventName string, callback function(optionalData?: any)): () => void`
|
||||
|
||||
### EventsOff
|
||||
|
||||
Cette méthode désactive l'évènement correspondant au nom donné, éventuellement plusieurs évènements peuvent être désinscrits via `additionalEventNames`.
|
||||
|
||||
Go: `EventsOff(ctx context.Context, eventName string, additionalEventNames ...string)`<br/> JS: `EventsOff(eventName string, ...additionalEventNames)`
|
||||
|
||||
### EventsOnce
|
||||
|
||||
Cette méthode définit un évènement pour le nom donné, mais ne se déclenchera qu'une seule fois. Il renvoie une fonction pour annuler l'évènement.
|
||||
|
||||
Go: `EventsOnce(ctx context.Context, eventName string, callback func(optionalData ...interface{})) func()`<br/> JS: `EventsOnce(eventName string, callback function(optionalData?: any)): () => void`
|
||||
|
||||
### EventsOnMultiple
|
||||
|
||||
Cette méthode définit un évènement pour le nom donné, mais ne se déclenchera au maximum qu'un certain nombre de fois, définit avec le paramètre `counter`. Il renvoie une fonction pour annuler l'écouteur.
|
||||
|
||||
Go: `EventsOnMultiple(ctx context.Context, eventName string, callback func(optionalData ...interface{}), counter int) func()`<br/> JS: `EventsOnMultiple(eventName string, callback function(optionalData?: any), counter int): () => void`
|
||||
|
||||
### EventsEmit
|
||||
|
||||
Cette méthode émet l'événement donné. En option, des données peuvent être transmises avec l'événement. Cela déclenchera tous les événements.
|
||||
|
||||
Go: `EventsEmit(ctx context.Context, eventName string, optionalData ...interface{})`<br/> JS: `EventsEmit(eventName: string, ...optionalData: any)`
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Le runtime est une bibliothèque qui fournit des méthodes utilitaires pour votre application. Il y a à la fois un runtime Go et JavaScript et le but est d'essayer de les maintenir à parité dans la mesure du possible.
|
||||
|
||||
Il a des méthodes utilitaires pour :
|
||||
|
||||
- [Fenêtre](window.mdx)
|
||||
- [Menu](menu.mdx)
|
||||
- [Boîte de dialogue](dialog.mdx)
|
||||
- [Événements](events.mdx)
|
||||
- [Navigateur](browser.mdx)
|
||||
- [Log](log.mdx)
|
||||
- [Clipboard](clipboard.mdx)
|
||||
|
||||
Le Go Runtime est disponible en important `github.com/wailsapp/wails/v2/pkg/runtime`. Toutes les méthodes de ce paquet prennent un contexte comme premier paramètre. Ce contexte doit être obtenu à partir des méthodes [OnStartup](../options.mdx#onstartup) ou [OnDomReady](../options.mdx#ondomready).
|
||||
|
||||
:::info Note
|
||||
|
||||
Alors que le contexte sera fourni à la méthode [OnStartup](../options.mdx#onstartup) , il n'y a aucune garantie que l'exécution fonctionnera dans cette méthode car la fenêtre s'initialise dans un autre thread. Si vous souhaitez appeler des méthodes d'exécution au démarrage, utilisez [OnDomReady](../options.mdx#ondomready).
|
||||
|
||||
:::
|
||||
|
||||
La bibliothèque JavaScript est disponible sur le frontend via la carte `window.runtime`. Il y a un package d'exécution généré lors de l'utilisation du mode `dev` qui fournit des déclarations TypeScript pour l'exécution. Ceci devrait être situé dans le répertoire `wailsjs` dans votre répertoire frontend.
|
||||
|
||||
### Cacher
|
||||
|
||||
Go: `Hide(ctx context.Context)`<br/> JS: `Hide()`
|
||||
|
||||
Cache l'application.
|
||||
|
||||
:::info Note
|
||||
|
||||
Sur Mac, cela masquera l'application de la même manière que le bouton `Masquer` du menu des applications Mac standard. C'est une manière différente de cacher l'application, mais elle sera toujours au premier plan. Pour Windows et Linux, c'est actuellement la même chose que `WindowHide`.
|
||||
|
||||
:::
|
||||
|
||||
### Afficher
|
||||
|
||||
Affiche l'application.
|
||||
|
||||
:::info Note
|
||||
|
||||
Sur Mac, cela va ramener l'application au premier plan. Pour Windows et Linux, c'est actuellement la même chose que `WindowShow`.
|
||||
|
||||
:::
|
||||
|
||||
Go: `Show(ctx context.Context)`<br/> JS: `Show()`
|
||||
|
||||
### Quitter
|
||||
|
||||
Quitte l'application.
|
||||
|
||||
Go: `Quit(ctx context.Context)`<br/> JS: `Quit()`
|
||||
|
||||
### Environnement
|
||||
|
||||
Renvoie les détails de l'environnement actuel.
|
||||
|
||||
Go: `Environment(ctx context.Context) EnvironmentInfo`<br/> JS: `Environment(): Promise<EnvironmentInfo>`
|
||||
|
||||
#### EnvironmentInfo
|
||||
|
||||
Go:
|
||||
|
||||
```go
|
||||
type EnvironmentInfo struct {
|
||||
BuildType string
|
||||
Platform string
|
||||
Arch string
|
||||
}
|
||||
```
|
||||
|
||||
JS:
|
||||
|
||||
```ts
|
||||
interface EnvironmentInfo {
|
||||
buildType: string;
|
||||
platform: string;
|
||||
arch: string;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,130 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Log
|
||||
|
||||
Le runtime Wails fournit un mécanisme de journalisation qui peut être appelé depuis Go ou JavaScript. Comme la plupart des loggers, il y a un certain nombre de niveaux de log :
|
||||
|
||||
- Trace
|
||||
- Debug
|
||||
- Info
|
||||
- Warning
|
||||
- Error
|
||||
- Fatal
|
||||
|
||||
Le logger affichera tous les messages de log au niveau actuel ou supérieur. Exemple : Le niveau `Debug` affichera tous les messages sauf ceux du niveau `Trace`.
|
||||
|
||||
### LogPrint
|
||||
|
||||
Ajoute le message donné dans les logs en tant que message brut.
|
||||
|
||||
Go: `LogPrint(ctx context.Context, message string)`<br/> JS: `LogPrint(message: string)`
|
||||
|
||||
### LogPrintf
|
||||
|
||||
Ajoute le message donné dans les logs en tant que message brut.
|
||||
|
||||
Go: `LogPrintf(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogTrace
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Trace`.
|
||||
|
||||
Go: `LogTrace(ctx context.Context, message string)`<br/> JS: `LogTrace(message: string)`
|
||||
|
||||
### LogTracef
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Trace`.
|
||||
|
||||
Go: `LogTracef(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogDebug
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Debug`.
|
||||
|
||||
Go: `LogDebug(ctx context.Context, message string)`<br/> JS: `LogDebug(message: string)`
|
||||
|
||||
### LogDebugf
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Debug`.
|
||||
|
||||
Go: `LogDebugf(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogInfo
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Info`.
|
||||
|
||||
Go: `LogInfo(ctx context.Context, message string)`<br/> JS: `LogInfo(message: string)`
|
||||
|
||||
### LogInfof
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Info`.
|
||||
|
||||
Go: `LogInfof(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogWarning
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Warning`.
|
||||
|
||||
Go: `LogWarning(ctx context.Context, message string)`<br/> JS: `LogWarning(message: string)`
|
||||
|
||||
### LogWarningf
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Warning`.
|
||||
|
||||
Go: `LogWarningf(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogError
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Error`.
|
||||
|
||||
Go: `LogError(ctx context.Context, message string)`<br/> JS: `LogError(message: string)`
|
||||
|
||||
### LogErrorf
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Error`.
|
||||
|
||||
Go: `LogErrorf(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogFatal
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Fatal`.
|
||||
|
||||
Go: `LogFatal(ctx context.Context, message string)`<br/> JS: `LogFatal(message: string)`
|
||||
|
||||
### LogFatalf
|
||||
|
||||
Ajoute le message donné dans les logs avec le niveau de log `Fatal`.
|
||||
|
||||
Go: `LogFatalf(ctx context.Context, format string, args ...interface{})`<br/>
|
||||
|
||||
### LogSetLogLevel
|
||||
|
||||
Définit le niveau des logs. En JavaScript, le nombre se rapporte aux niveaux de log suivants :
|
||||
|
||||
| Valeur | Niveau de log |
|
||||
| ------ | ------------- |
|
||||
| 1 | Trace |
|
||||
| 2 | Debug |
|
||||
| 3 | Info |
|
||||
| 4 | Warning |
|
||||
| 5 | Error |
|
||||
|
||||
Go: `LogSetLogLevel(ctx context.Context, level logger.LogLevel)`<br/> JS: `LogSetLogLevel(level: number)`
|
||||
|
||||
## Utiliser un Logger Personnalisé
|
||||
|
||||
Un logger personnalisé peut être utilisé en le définissant dans l'option de l'application [Logger](../options.mdx#logger) . La seule condition est que le logger implémente l'interface `logger.Logger` définie dans `github.com/wailsapp/wails/v2/pkg/logger`:
|
||||
|
||||
```go title="logger.go"
|
||||
type Logger interface {
|
||||
Print(message string)
|
||||
Trace(message string)
|
||||
Debug(message string)
|
||||
Info(message string)
|
||||
Warning(message string)
|
||||
Error(message string)
|
||||
Fatal(message string)
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,25 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Menu
|
||||
|
||||
Ces méthodes sont liées au menu de l'application.
|
||||
|
||||
:::info JavaScript
|
||||
|
||||
Le menu n'est actuellement pas pris en charge lors de l'exécution de JS.
|
||||
|
||||
:::
|
||||
|
||||
### MenuSetApplicationMenu
|
||||
|
||||
Définit le menu de l'application dans le [menu](../menus.mdx) donné.
|
||||
|
||||
Go: `MenuSetApplicationMenu(ctx context.Context, menu *menu.Menu)`
|
||||
|
||||
### MenuUpdateApplicationMenu
|
||||
|
||||
Met à jour le menu de l'application, avec toutes les autres modifications déjà appliquées via `MenuSetApplicationMenu`.
|
||||
|
||||
Go: `MenuUpdateApplicationMenu(ctx context.Context)`
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Screen
|
||||
|
||||
These methods provide information about the currently connected screens.
|
||||
|
||||
### ScreenGetAll
|
||||
|
||||
Returns a list of currently connected screens.
|
||||
|
||||
Go: `ScreenGetAll(ctx context.Context) []screen`<br/>
|
||||
JS: `ScreenGetAll()`
|
||||
|
||||
#### Screen
|
||||
|
||||
Go struct:
|
||||
|
||||
```go
|
||||
type Screen struct {
|
||||
IsCurrent bool
|
||||
IsPrimary bool
|
||||
Width int
|
||||
Height int
|
||||
}
|
||||
```
|
||||
|
||||
Typescript interface:
|
||||
|
||||
```ts
|
||||
interface Screen {
|
||||
isCurrent: boolean;
|
||||
isPrimary: boolean;
|
||||
width : number
|
||||
height : number
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,227 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Fenêtre
|
||||
|
||||
Ces méthodes donnent le contrôle de la fenêtre de l'application.
|
||||
|
||||
### WindowSetTitle
|
||||
|
||||
Définit le texte dans la barre de titre de la fenêtre.
|
||||
|
||||
Go: `WindowSetTitle(ctx context.Context, title string)`<br/> JS: `WindowSetTitle(title: string)`
|
||||
|
||||
### WindowFullscreen
|
||||
|
||||
Mets la fenêtre en plein écran.
|
||||
|
||||
Go: `WindowFullscreen(ctx context.Context)`<br/> JS: `WindowFullscreen()`
|
||||
|
||||
### WindowUnfullscreen
|
||||
|
||||
Restaure les dimensions et la position de la fenêtre avant le plein écran.
|
||||
|
||||
Go: `WindowUnfullscreen(ctx context.Context)`<br/> JS: `WindowUnfullscreen()`
|
||||
|
||||
### WindowIsFullscreen
|
||||
|
||||
Renvoie vrai si la fenêtre est en plein écran.
|
||||
|
||||
Go: `WindowIsFullscreen(ctx context.Context) bool`<br/> JS: `WindowIsFullscreen() bool`
|
||||
|
||||
### WindowCenter
|
||||
|
||||
Centre la fenêtre sur le moniteur sur laquelle la fenêtre est actuellement ouverte.
|
||||
|
||||
Go: `WindowCenter(ctx context.Context)`<br/> JS: `WindowCenter()`
|
||||
|
||||
### WindowExecJS
|
||||
|
||||
Exécute du code JS dans la fenêtre.
|
||||
|
||||
Cette méthode exécute le code dans le navigateur de manière asynchrone et retourne immédiatement le résultat. Si le script cause des erreurs, elles ne seront disponibles que dans la console du navigateur.
|
||||
|
||||
Go: `WindowExecJS(ctx context.Context, js string)`
|
||||
|
||||
### WindowReload
|
||||
|
||||
Effectue un "rechargement" (Recharge la page courante).
|
||||
|
||||
Go: `WindowReload(ctx context.Context)`<br/> JS: `WindowReload()`
|
||||
|
||||
### WindowReloadApp
|
||||
|
||||
Recharge le frontend de l'application.
|
||||
|
||||
Go: `WindowReloadApp(ctx context.Context)`<br/> JS: `WindowReloadApp()`
|
||||
|
||||
### WindowSetSystemDefaultTheme
|
||||
|
||||
Windows seulement.
|
||||
|
||||
Go: `WindowSetSystemDefaultTheme(ctx context.Context)`<br/> JS: `WindowSetSystemDefaultTheme()`
|
||||
|
||||
Définit le thème de fenêtre à la valeur par défaut du système (sombre/clair).
|
||||
|
||||
### WindowSetLightTheme
|
||||
|
||||
Windows seulement.
|
||||
|
||||
Go: `WindowSetLightTheme(ctx context.Context)`<br/> JS: `WindowSetLightTheme()`
|
||||
|
||||
Définit le thème clair à la fenêtre.
|
||||
|
||||
### WindowSetDarkTheme
|
||||
|
||||
Windows seulement.
|
||||
|
||||
Go: `WindowSetDarkTheme(ctx context.Context)`<br/> JS: `WindowSetDarkTheme()`
|
||||
|
||||
Définit le thème sombre à la fenêtre.
|
||||
|
||||
### WindowShow
|
||||
|
||||
Affiche la fenêtre, si elle est actuellement masquée.
|
||||
|
||||
Go: `WindowShow(ctx context.Context)`<br/> JS: `WindowShow()`
|
||||
|
||||
### WindowHide
|
||||
|
||||
Masque la fenêtre, si elle est actuellement visible.
|
||||
|
||||
Go: `WindowHide(ctx context.Context)`<br/> JS: `WindowHide()`
|
||||
|
||||
### WindowIsNormal
|
||||
|
||||
Renvoie vrai si la fenêtre n'est pas minimisée, maximisée ou plein écran.
|
||||
|
||||
Go: `WindowIsNormal(ctx context.Context) bool`<br/> JS: `WindowIsNormal() bool`
|
||||
|
||||
### WindowSetSize
|
||||
|
||||
Définit la largeur et la hauteur de la fenêtre.
|
||||
|
||||
Go: `WindowSetSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetSize(width: number, height: number)`
|
||||
|
||||
### WindowGetSize
|
||||
|
||||
Retourne la largeur et la hauteur de la fenêtre.
|
||||
|
||||
Go: `WindowGetSize(ctx context.Context) (width int, height int)`<br/> JS: `WindowGetSize() : Size`
|
||||
|
||||
### WindowSetMinSize
|
||||
|
||||
Définit la taille minimale de la fenêtre. Redimensionnera la fenêtre si la fenêtre est actuellement plus petite que les dimensions données.
|
||||
|
||||
Définir une taille de `0,0` désactivera cette contrainte.
|
||||
|
||||
Go: `WindowSetMinSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetMinSize(width: number, height: number)`
|
||||
|
||||
### WindowSetMaxSize
|
||||
|
||||
Définit la taille maximale de la fenêtre. Redimensionnera la fenêtre si la fenêtre est actuellement plus grande que les dimensions données.
|
||||
|
||||
Définir une taille de `0,0` désactivera cette contrainte.
|
||||
|
||||
Go: `WindowSetMaxSize(ctx context.Context, width int, height int)`<br/> JS: `WindowSetMaxSize(width: number, height: number)`
|
||||
|
||||
### WindowSetAlwaysOnTop
|
||||
|
||||
Paramètre pour faire en sorte que la fenêtre soit toujours au dessus des autres ou non.
|
||||
|
||||
Go: `WindowSetAlwaysOnTop(ctx context.Context, b bool)`<br/> JS: `WindowSetAlwaysOnTop(b: Boolen)`
|
||||
|
||||
### WindowSetPosition
|
||||
|
||||
Définit la position de la fenêtre par rapport au moniteur sur lequel la fenêtre est activée.
|
||||
|
||||
Go: `WindowSetPosition(ctx context.Context, x int, y int)`<br/> JS: `WindowSetPosition(x: number, y: number)`
|
||||
|
||||
### WindowGetPosition
|
||||
|
||||
Récupère la position de la fenêtre relative au moniteur sur lequel la fenêtre est activée.
|
||||
|
||||
Go: `WindowGetPosition(ctx context.Context) (x int, y int)`<br/> JS: `WindowGetPosition() : Position`
|
||||
|
||||
### WindowMaximiseWindowMaximise
|
||||
|
||||
Maximise la fenêtre pour remplir l'écran.
|
||||
|
||||
Go: `WindowMaximise(ctx context.Context)`<br/> JS: `WindowMaximise()`
|
||||
|
||||
### WindowUnmaximise
|
||||
|
||||
Restaure la fenêtre aux dimensions et à la position avant qu'elle soit maximisée.
|
||||
|
||||
Go: `WindowUnmaximise(ctx context.Context)`<br/> JS: `WindowUnmaximise()`
|
||||
|
||||
### WindowIsMaximised
|
||||
|
||||
Renvoie vrai si la fenêtre est maximisée.
|
||||
|
||||
Go: `WindowIsMaximised(ctx context.Context) bool`<br/> JS: `WindowIsMaximised() bool`
|
||||
|
||||
### WindowToggleMaximise
|
||||
|
||||
Option permettant de basculer entre la maximisation de la fenêtre et sa non maximisation.
|
||||
|
||||
Go: `WindowToggleMaximise(ctx context.Context)`<br/> JS: `WindowToggleMaximise()`
|
||||
|
||||
### WindowMinimise
|
||||
|
||||
Minimise la fenêtre.
|
||||
|
||||
Go: `WindowMinimise(ctx context.Context)`<br/> JS: `WindowMinimise()`
|
||||
|
||||
### WindowUnminimise
|
||||
|
||||
Restaure la fenêtre aux dimensions et à la position avant qu'elle soit minimisée.
|
||||
|
||||
Go: `WindowUnminimise(ctx context.Context)`<br/> JS: `WindowUnminimise()`
|
||||
|
||||
### WindowIsMinimised
|
||||
|
||||
Renvoie vrai si la fenêtre est minimisée.
|
||||
|
||||
Go: `WindowIsMinimised(ctx context.Context) bool`<br/> JS: `WindowIsMinimised() bool`
|
||||
|
||||
### WindowSetBackgroundColour
|
||||
|
||||
Définit la couleur de fond de la fenêtre avec la couleur RGBA donnée. Cette couleur sera visible au travers de tous les pixels transparents.
|
||||
|
||||
Les valeurs valides pour R, G, B et A sont entre 0 et 255 inclus.
|
||||
|
||||
:::info Windows
|
||||
|
||||
Sous Windows, seules les valeurs 0 et 255 sont prises en charge pour A. Toute valeur qui n'est pas 0 sera considérée comme 255.
|
||||
|
||||
:::
|
||||
|
||||
Go: `WindowSetBackgroundColour(ctx context.Context, R, G, B, A uint8)`<br/> JS: `WindowSetBackgroundColour(R, G, B, A)`
|
||||
|
||||
### WindowPrint
|
||||
|
||||
Opens tha native print dialog.
|
||||
|
||||
Go: `WindowPrint(ctx context.Context)`<br/> JS: `WindowPrint()`
|
||||
|
||||
## Définitions d'objets TypeScript
|
||||
|
||||
### Position
|
||||
|
||||
```ts
|
||||
interface Position {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
```
|
||||
|
||||
### Size (taille)
|
||||
|
||||
```ts
|
||||
interface Size {
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,245 @@
|
||||
---
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
# API Chiens
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
Ce tutoriel a été gracieusement fourni par [@tatadan](https://twitter.com/tatadan) et fait partie de leur [dépôt d'exemples Wails](https://github.com/tataDan/wails-v2-examples).
|
||||
|
||||
:::
|
||||
|
||||
Dans ce tutoriel, nous allons développer une application qui récupère des photos de chiens du web et les affiche.
|
||||
|
||||
### Créer le projet
|
||||
|
||||
Créons l'application. Depuis un terminal saisissez : `wails init -n dogs-api -t svelte`
|
||||
|
||||
Note: Nous pouvons ajouter l'une des options suivantes `-ide vscode` ou `-ide goland` à la fin de la commande si vous voulez ajouter le support d'un IDE.
|
||||
|
||||
Maintenant, exécutons `cd dogs-api` et commençons à éditer les fichiers du projet.
|
||||
|
||||
### Retirer le code inutilisé
|
||||
|
||||
Nous allons commencer par supprimer certains éléments que nous savons que nous n'utiliserons pas :
|
||||
|
||||
- Ouvrez `app.go` et supprimez les lignes suivantes :
|
||||
|
||||
```go
|
||||
// Greet returns a greeting for the given name
|
||||
func (a *App) Greet(name string) string {
|
||||
return fmt.Sprintf("Hello %s, It's show time!", name)
|
||||
}
|
||||
```
|
||||
|
||||
- Ouvrez `frontend/src/App.svelte` et supprimez toutes les lignes.
|
||||
- Supprimer le fichier `frontend/src/assets/images/logo-universal.png`
|
||||
|
||||
### Créer notre application
|
||||
|
||||
Ajoutons maintenant notre nouveau code Go.
|
||||
|
||||
Ajoutez les déclarations struct suivantes dans `app.go` avant la déclaration des fonctions:
|
||||
|
||||
```go
|
||||
type RandomImage struct {
|
||||
Message string
|
||||
Status string
|
||||
}
|
||||
|
||||
type AllBreeds struct {
|
||||
Message map[string]map[string][]string
|
||||
Status string
|
||||
}
|
||||
|
||||
type ImagesByBreed struct {
|
||||
Message []string
|
||||
Status string
|
||||
}
|
||||
```
|
||||
|
||||
Ajouter les fonctions suivantes dans `app.go` (après la déclaration de la fonction déjà existante):
|
||||
|
||||
```go
|
||||
func (a *App) GetRandomImageUrl() string {
|
||||
response, err := http.Get("https://dog.ceo/api/breeds/image/random")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
responseData, err := ioutil.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
var data RandomImage
|
||||
json.Unmarshal(responseData, &data)
|
||||
|
||||
return data.Message
|
||||
}
|
||||
|
||||
func (a *App) GetBreedList() []string {
|
||||
var breeds []string
|
||||
|
||||
response, err := http.Get("https://dog.ceo/api/breeds/list/all")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
responseData, err := ioutil.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
var data AllBreeds
|
||||
json.Unmarshal(responseData, &data)
|
||||
|
||||
for k := range data.Message {
|
||||
breeds = append(breeds, k)
|
||||
}
|
||||
|
||||
sort.Strings(breeds)
|
||||
|
||||
return breeds
|
||||
}
|
||||
|
||||
func (a *App) GetImageUrlsByBreed(breed string) []string {
|
||||
|
||||
url := fmt.Sprintf("%s%s%s%s", "https://dog.ceo/api/", "breed/", breed, "/images")
|
||||
response, err := http.Get(url)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
responseData, err := ioutil.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
var data ImagesByBreed
|
||||
json.Unmarshal(responseData, &data)
|
||||
|
||||
return data.Message
|
||||
}
|
||||
```
|
||||
|
||||
Modifiez la section `import` de `app.go` pour ressembler à ceci :
|
||||
|
||||
```go
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"encoding/json"
|
||||
"io/ioutil"
|
||||
"log"
|
||||
"net/http"
|
||||
"sort"
|
||||
)
|
||||
```
|
||||
|
||||
Ajouter les lignes suivantes dans `frontend/src/App.svelte`:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```html
|
||||
<script>
|
||||
import { GetRandomImageUrl } from "../wailsjs/go/main/App.js";
|
||||
import { GetBreedList } from "../wailsjs/go/main/App.js";
|
||||
import { GetImageUrlsByBreed } from "../wailsjs/go/main/App.js";
|
||||
|
||||
let randomImageUrl = "";
|
||||
let breeds = [];
|
||||
let photos = [];
|
||||
let selectedBreed;
|
||||
let showRandomPhoto = false;
|
||||
let showBreedPhotos = false;
|
||||
|
||||
function init() {
|
||||
getBreedList();
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
function getRandomImageUrl() {
|
||||
showRandomPhoto = false;
|
||||
showBreedPhotos = false;
|
||||
GetRandomImageUrl().then((result) => (randomImageUrl = result));
|
||||
showRandomPhoto = true;
|
||||
}
|
||||
|
||||
function getBreedList() {
|
||||
GetBreedList().then((result) => (breeds = result));
|
||||
}
|
||||
|
||||
function getImageUrlsByBreed() {
|
||||
init();
|
||||
showRandomPhoto = false;
|
||||
showBreedPhotos = false;
|
||||
GetImageUrlsByBreed(selectedBreed).then((result) => (photos = result));
|
||||
showBreedPhotos = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h3>Dogs API</h3>
|
||||
<div>
|
||||
<button class="btn" on:click={getRandomImageUrl}>
|
||||
Fetch a dog randomly
|
||||
</button>
|
||||
Click on down arrow to select a breed
|
||||
<select bind:value={selectedBreed}>
|
||||
{#each breeds as breed}
|
||||
<option value={breed}>
|
||||
{breed}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button class="btn" on:click={getImageUrlsByBreed}>
|
||||
Fetch by this breed
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
{#if showRandomPhoto}
|
||||
<img id="random-photo" src={randomImageUrl} alt="No dog found" />
|
||||
{/if}
|
||||
{#if showBreedPhotos}
|
||||
{#each photos as photo}
|
||||
<img id="breed-photos" src={photo} alt="No dog found" />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#random-photo {
|
||||
width: 600px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#breed-photos {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
border-width: 3px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Tester l'application
|
||||
|
||||
Pour générer les liaisons et tester l'application, exécutez `wails dev`.
|
||||
|
||||
### Compiler l'application
|
||||
|
||||
Pour compiler l'application en un seul binaire, exécutez `wails build`.
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# Hello World
|
||||
|
||||
Le but de ce tutoriel est de vous faire créer l'application la plus basique en utilisant Wails. Vous serez capables de :
|
||||
|
||||
- Créer une nouvelle application Wails
|
||||
- Compiler l'application
|
||||
- Démarrer l'application
|
||||
|
||||
:::note
|
||||
|
||||
Ce tutoriel utilise Windows comme plate-forme cible. La sortie variera légèrement selon votre système d'exploitation.
|
||||
|
||||
:::
|
||||
|
||||
## Créer une nouvelle application Wails
|
||||
|
||||
Pour créer une nouvelle application Wails utilisant le template Vanilla JS par défaut, vous devez exécuter la commande suivante :
|
||||
|
||||
```bash
|
||||
wails init -n helloworld
|
||||
```
|
||||
|
||||
Vous devriez voir quelque chose de similaire à ce qui suit :
|
||||
|
||||
```
|
||||
Wails CLI v2.0.0
|
||||
|
||||
Initialising Project 'helloworld'
|
||||
---------------------------------
|
||||
|
||||
Project Name: helloworld
|
||||
Project Directory: C:\Users\leaan\tutorial\helloworld
|
||||
Project Template: vanilla
|
||||
Template Support: https://wails.io
|
||||
|
||||
Initialised project 'helloworld' in 232ms.
|
||||
```
|
||||
|
||||
Cela va créer un nouveau dossier nommé `helloworld` dans le dossier actuel. Dans ce dossier, vous trouverez un certain nombre de fichiers :
|
||||
|
||||
```
|
||||
build/ - Contains the build files + compiled application
|
||||
frontend/ - Contains the frontend files
|
||||
app.go - Contains the application code
|
||||
main.go - The main program with the application configuration
|
||||
wails.json - The project configuration file
|
||||
go.mod - The go module file
|
||||
go.sum - The go module checksum file
|
||||
```
|
||||
|
||||
## Compiler l'application
|
||||
|
||||
Pour compiler l'application, déplacez-vous dans le dossier du nouveau projet `helloworld` et exécutez la commande suivante :
|
||||
|
||||
```bash
|
||||
wails build
|
||||
```
|
||||
|
||||
Vous devriez voir quelque chose comme ça :
|
||||
|
||||
```
|
||||
Wails CLI v2.0.0
|
||||
|
||||
App Type: desktop
|
||||
Platforms: windows/amd64
|
||||
Compiler: C:\Users\leaan\go\go1.18.3\bin\go.exe
|
||||
Build Mode: Production
|
||||
Devtools: false
|
||||
Skip Frontend: false
|
||||
Compress: false
|
||||
Package: true
|
||||
Clean Build Dir: false
|
||||
LDFlags: ""
|
||||
Tags: []
|
||||
Race Detector: false
|
||||
|
||||
Building target: windows/amd64
|
||||
------------------------------
|
||||
- Installing frontend dependencies: Done.
|
||||
- Compiling frontend: Done.
|
||||
- Generating bundle assets: Done.
|
||||
- Compiling application: Done.
|
||||
Built 'C:\Users\leaan\tutorial\helloworld\build\bin\helloworld.exe' in 10.616s.
|
||||
```
|
||||
|
||||
Cela a compilé l'application et l'a enregistré dans le dossier `build/bin`.
|
||||
|
||||
## Démarrer l'application
|
||||
|
||||
Si on voit le dossier `build/bin` dans l'explorateur Windows, nous devrions voir le binaire de notre projet :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
On peut l'exécuter en simplement double-cliquant sur le fichier `helloworld.exe`.
|
||||
|
||||
Sur Max, Wails va générer un fichier `helloworld.app` qui peut être exécuté en simplement double-cliquant dessus.
|
||||
|
||||
Sur Linux, vous pouvez exécuter l'application en utilisant `./helloworld` depuis le répertoire `build/bin`.
|
||||
|
||||
Vous devriez voir l'application fonctionner comme prévu :
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/windows-default-app.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Appendix",
|
||||
"position": 70
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Community",
|
||||
"position": 50
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# リンク
|
||||
|
||||
このページは、コミュニティ関連のリンクの一覧です。 リンクを追加したい場合は、プルリクエストを送信(ページ下部の`このページを編集`をクリック) してください。
|
||||
|
||||
## Awesome Wails
|
||||
|
||||
Wailsに関する[最高のリンク一覧](https://github.com/wailsapp/awesome-wails)です。
|
||||
|
||||
## サポートチャネル
|
||||
|
||||
- [Wails Discordサーバ](https://discord.gg/JDdSxwjhGf)
|
||||
- [Github Issues](https://github.com/wailsapp/wails/issues)
|
||||
- [v2ベータディスカッションボード](https://github.com/wailsapp/wails/discussions/828)
|
||||
|
||||
## ソーシャルメディア
|
||||
|
||||
- [Twitter](https://twitter.com/wailsapp)
|
||||
- [Wails中国語コミュニティQQグループ](https://qm.qq.com/cgi-bin/qm/qr?k=PmIURne5hFGNd7QWzW5qd6FV-INEjNJv&jump_from=webapi) - グループナンバー: 1067173054
|
||||
|
||||
## その他のチュートリアルや記事
|
||||
|
||||
- [掲示板を作ってみる](https://blog.customct.com/building-bulletin-board)
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Showcase",
|
||||
"position": 1
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
# BulletinBoard
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/bboard.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[BulletinBoard](https://github.com/raguay/BulletinBoard)は、静的なメッセージや、スクリプト用にユーザから情報を得るためのダイアログを表示する、汎用的なメッセージボードアプリケーションです。 後者はユーザから情報を取得するために使用でき、新しいダイアログを作成するためのTUIを備えています。 システム上で動作し続け、必要に応じて情報を表示・非表示できるように設計されています。 システム上のファイルを監視し、内容が変更されたときにBulletinBoardに送信するという処理もできます。 これは、私のワークフローと相性が良いのです。 なお、プログラムに情報を送信するための[Alfredワークフロー](https://github.com/raguay/MyAlfred/blob/master/Alfred%205/EmailIt.alfredworkflow)があります。 また、[EmailIt](https://github.com/raguay/EmailIt)と連携するためのワークフローもあります。
|
||||
@ -0,0 +1,39 @@
|
||||
# CFN トラッカー
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/cfntracker.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[CFN Tracker](https://github.com/williamsjokvist/cfn-tracker) - ストリートファイ
|
||||
ター 6 または V CFN プロフィールのライブマッチを追跡します。 開始するには
|
||||
、[Web サイト](https://cfn.williamsjokvist.se/) を確認してください。
|
||||
|
||||
## 特徴
|
||||
|
||||
- リアルタイムの試合追跡
|
||||
- 試合ログと統計の保存
|
||||
- ブラウザソース経由で OBS にライブ統計を表示するためのサポート
|
||||
- SF6 と SFV の両方をサポート
|
||||
- ユーザーが CSS を使用して独自の OBS ブラウザ テーマを作成できる機能
|
||||
|
||||
### Wails とともに使用される主要なテクノロジー
|
||||
|
||||
- [タスク](https://github.com/go-task/task) - Wails CLI をラップして一般的なコマ
|
||||
ンドを使いやすくする
|
||||
- [React](https://github.com/facebook/react) - 豊富なエコシステム (基数、フレー
|
||||
マーモーション) で選ばれました
|
||||
- [Bun](https://github.com/oven-sh/bun) - 依存関係の高速解決とビルド時間に使用さ
|
||||
れます。
|
||||
- [Rod](https://github.com/go-rod/rod) - 認証とポーリングの変更のためのヘッドレ
|
||||
スブラウザ自動化
|
||||
- [SQLite](https://github.com/mattn/go-sqlite3) - 一致、セッション、プロファイル
|
||||
の保存に使用されます
|
||||
- [サーバー送信イベント](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) -
|
||||
追跡更新を OBS ブラウザ ソースに送信するための http ストリーム
|
||||
- [i18next](https://github.com/i18next/) - Go レイヤーからローカリゼーション オ
|
||||
ブジェクトを提供するバックエンド コネクタを使用
|
||||
- [xstate](https://github.com/statelyai/xstate) - 認証プロセスと追跡のためのステ
|
||||
ート マシン
|
||||
@ -0,0 +1,10 @@
|
||||
# EmailIt
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/emailit.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[EmailIt](https://github.com/raguay/EmailIt/)はWails 2で作成されており、9個のノートパット、テキスト操作のためのスクリプト、およびテンプレートを備えた、マークダウンベースのEメール送信ソフトです。 また、システム内のファイルに対してEmailItのスクリプトを実行するためのスクリプトターミナルを備えています。 スクリプトとテンプレートは、コマンドライン自体から、またはAlfred、Keyboard Maestro、Dropzone、PopClipの拡張機能から使用することができます。 さらに、GitHubからダウンロードしたスクリプトやテーマにも対応しています。 ドキュメントは未完成ですが、ブログラム自体は動作します。 Wails 2とSvelteを使用して構築されており、ユニバーサルmacOSアプリケーションとしてダウンロードできます。
|
||||
@ -0,0 +1,12 @@
|
||||
# EncryptEasy
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/encrypteasy.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
**[EncryptEasy](https://www.encrypteasy.app)は、シンプルで使いやすいPGP暗号化ツールで、すべての連絡先の鍵を管理することができます。 暗号化は簡単にできるべきです。 Wailsで開発されました。**
|
||||
|
||||
PGPを使用したメッセージの暗号化は、業界の標準です。 誰もが、秘密鍵と公開鍵を所持しています。 あなたの秘密鍵は、あなただけがメッセージを読めるように、常に秘密にしておく必要があります。 あなたの公開鍵は、暗号化されたメッセージを送信したい人に配布します。 鍵の管理、メッセージの暗号化、およびメッセージの復号化は、スムーズにできなければなりません。 EncryptEasyはそれらを簡単に実現します。
|
||||
@ -0,0 +1,13 @@
|
||||
# ESP Studio
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/esp-studio.png").default}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[ESP Studio](https://github.com/torabian/esp-studio) - クロスプラットフォーム、デスクトップ、クラウド、組み込みソフトウェア
|
||||
ESP/Arduino デバイスの制御、複雑な IOT ワークフローと制御システムの構築用
|
||||
@ -0,0 +1,16 @@
|
||||
# FileHound Export Utility
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/filehound.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[FileHound Export Utility](https://www.filehound.co.uk/) FileHoundは、安全なファイル保管、ビジネスプロセスの自動化、およびSmartCapture機能のための、クラウドドキュメント管理プラットフォームです。
|
||||
|
||||
FileHound Export Utilityを使用すると、FileHoundの管理者はバックアップやリカバリのために、安全なドキュメントとデータ抽出タスクを実行できます。 このアプリケーションは、選択したフィルタにもとづいて、FileHoundに保存されているすべての文書やメタデータをダウンロードします。 メタデータはJSON形式とXML形式の両方でエクスポートされます。
|
||||
|
||||
バックエンド: Go 1.15 Wails 1.11.0 go-sqlite3 1.14.6 go-linq 3.2
|
||||
|
||||
フロントエンド: Vue 2.6.11 Vuex 3.4.0 TypeScript Tailwind 1.9.6
|
||||
@ -0,0 +1,10 @@
|
||||
# hiposter
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/hiposter.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[hiposter](https://github.com/obity/hiposter)は、シンプルで効率的に使用できる、http APIテストクライアントツールです。 Wails、Go、sveltejsで構築されました。
|
||||
@ -0,0 +1,14 @@
|
||||
# Minecraft Updater
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={
|
||||
require("@site/static/img/showcase/minecraft-mod-updater.webp").default
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater)は、ユーザベースMinecraft Modを更新および同期するためのユーティリティツールです。 Wails2とReactで構築されており、フロントエンドフレームワークには[antd](https://ant.design/)を使用しています。
|
||||
@ -0,0 +1,14 @@
|
||||
# Modal File Manager
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/modalfilemanager.webp").default}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Modal File Manager](https://github.com/raguay/ModalFileManager)は、Web技術を使用した、デュアルペインファイルマネージャです。 [こちら](https://github.com/raguay/ModalFileManager-NWjs)でもともと公開していたNW.jsで構築されたものをベースとしています。 本バージョンでは、フロントエンドのコードには前と同様にSvelteを使用(NW.jsを使用していた時から大幅な修正はありました)しましたが、バックエンドの実装にはWails 2を使用しました。 この実装によって、コマンドラインの`rm`、`cp`などのコマンドを使用しなくなりましたが、テーマや拡張機能のダウンロードのために、システム上でgitのインストールは必要となります。 Goで完全にコード化されており、以前のバージョンよりもはるかに高速に実行されます。
|
||||
|
||||
このファイルマネージャは、Vimと同じ、状態制御キーボード操作の原理に基づいて設計されています。 状態の数に制限はなく、とてもプログラマブルです。 つまり、無数にキーボード構成を作成・使用することができます。 この点は、他のファイルマネージャとの主な違いと言えるでしょう。 また、GitHubからテーマや拡張機能をダウンロードできます。
|
||||
@ -0,0 +1,10 @@
|
||||
# Molley Wallet
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/mollywallet.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Molly Wallet](https://github.com/grvlle/constellation_wallet/)は、Constellation Networkの公式$DAGウォレットです。 ユーザは、$DAGトランザクションの生成に限らず、様々な方法でHypergraph Networkとやり取りすることができます。
|
||||
@ -0,0 +1,14 @@
|
||||
# October
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/october.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[October](https://october.utf9k.net)は、[Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader)からハイライトを抽出し、簡単に[Readwise](https://readwise.io)へ転送できる、シンプルなWailsアプリケーションです。
|
||||
|
||||
[UPX圧縮](https://upx.github.io/)なしで、すべてのプラットフォームで10MB以下という、比較的小さなサイズとなっています!
|
||||
|
||||
これとは対照的に、開発者が以前にElectronで作成したものは、簡単に数百MBにまで膨らんでしまいました。
|
||||
@ -0,0 +1,10 @@
|
||||
# Optimus
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/optimus.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Optimus](https://github.com/splode/optimus)は、画像最適化のためのデスクトップアプリケーションです。 WebP、JPEG、PNG形式画像の相互変換や圧縮をサポートしています。
|
||||
@ -0,0 +1,10 @@
|
||||
# Portfall
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/portfall.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Portfall](https://github.com/rekon-oss/portfall) - すべてのクラスタUIに簡単にアクセスできる、デスクトップk8s port-forwardingポータルです。
|
||||
@ -0,0 +1,12 @@
|
||||
# Restic Browser
|
||||
|
||||
```mdx-code-block
|
||||
<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) - resticリポジトリを参照およびリストアするための、シンプルでクロスプラットフォームな[restic](https://github.com/restic/restic)バックアップGUIツールです。
|
||||
@ -0,0 +1,21 @@
|
||||
# RiftShare
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/riftshare-main.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
誰にとっても簡単、安全、そして無料のファイル共有。 詳しくは[Riftshare.app](https://riftshare.app)をご覧ください。
|
||||
|
||||
## 機能
|
||||
|
||||
- ローカルネットワーク内またはインターネット経由で、簡単にセキュアなコンピュータ間ファイル共有が可能
|
||||
- [magic wormhole プロトコル](https://magic-wormhole.readthedocs.io/en/latest/)を介したファイル・ディレクトリのセキュアな送信をサポート
|
||||
- magic wormholeを使用する他のすべてのアプリ(magic-wormhole、wormhole-william CLI、wormhole-guiなど) との互換性
|
||||
- 選択された複数ファイルを自動圧縮して一括送信
|
||||
- フルアニメーション、プログレスバー、および送受信のキャンセルをサポート
|
||||
- OSネイティブのファイル選択UIを利用可能
|
||||
- 受信したファイルをワンクリックで開ける
|
||||
- 自動アップデート - 最新のリリースを気にする必要はありません!
|
||||
@ -0,0 +1,10 @@
|
||||
# ScriptBar
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/scriptbar.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[ScriptBar](https://GitHub.com/raguay/ScriptBarApp)は、スクリプトまたは[Node-Red](https://nodered.org)サーバの出力を表示するためのプログラムです。 EmailItプログラムで定義されたプログラムを実行し、出力を表示します。 xBarやTextBarのスクリプトも使用できますが、現時点ではTextBarのスクリプトが正常に動作します。 また、システム上にスクリプトの出力を表示できます。 ScriptBarはそれらの情報をメニューバーには表示させず、簡単に参照できる便利なウィンドウ上に表示されます。 複数のタブを使用して、様々な情報を表示できます。 よくアクセスするWebサイトへのリンクを配置することもできます。
|
||||
@ -0,0 +1,10 @@
|
||||
# Surge
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/surge.png").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Surge](https://getsurge.io/)は、ブロックチェーン技術を使用して、100%匿名でのファイル転送ができるように設計された、p2pファイル共有アプリです。 エンドツーエンド暗号化に対応、分散型、そしてオープンソースである点が、Surgeの特徴です。
|
||||
@ -0,0 +1,11 @@
|
||||
# Tiny RDM
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/tiny-rdm1.webp").default} />
|
||||
<img src={require("@site/static/img/showcase/tiny-rdm2.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
The [Tiny RDM](https://redis.tinycraft.cc/) application is an open-source, modern lightweight Redis GUI. It has a beautful UI, intuitive Redis database management, and compatible with Windows, Mac, and Linux. It provides visual key-value data operations, supports various data decoding and viewing options, built-in console for executing commands, slow log queries and more.
|
||||
@ -0,0 +1,10 @@
|
||||
# Wally
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/wally.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Wally](https://ergodox-ez.com/pages/wally)は、[Ergodox](https://ergodox-ez.com/)キーボード公式の、ファームウェアフラッシャーです。 とても見栄えが良く、GoのパワーとWeb開発技術の豊富なグラフィカルツールを組み合わせるという、Wailsで達成できる機能を示す良い例となるアプリです。
|
||||
@ -0,0 +1,19 @@
|
||||
# Minecraft launcher for WarMine
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/warmine1.png").default}
|
||||
/>
|
||||
<img
|
||||
src={require("@site/static/img/showcase/warmine2.png").default}
|
||||
/>
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Minecraft launcher for WarMine](https://warmine.ru/)は、Modを導入したゲームサーバに簡単にアクセスしたり、ゲームアカウントを管理できるWailsアプリケーションです。
|
||||
|
||||
ランチャーでは、ゲームファイルをダウンロードし、その整合性のチェックして、様々なカスタマイズが可能なバックエンドからの起動引数を使用してゲームを起動します。
|
||||
|
||||
フロントエンドはSvelteで記述され、ランチャー全体は9MBに収まり、Windows 7-11をサポートしています。
|
||||
@ -0,0 +1,10 @@
|
||||
# Wombat
|
||||
|
||||
```mdx-code-block
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img src={require("@site/static/img/showcase/wombat.webp").default} />
|
||||
<br />
|
||||
</p>
|
||||
```
|
||||
|
||||
[Wombat](https://github.com/rogchap/wombat)はクロスプラットフォーム対応のgRPCクライアントです。
|
||||
@ -0,0 +1,10 @@
|
||||
# Ytd
|
||||
|
||||
```mdx-code-block
|
||||
<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)はYouTubeからトラックをダウンロードしたり、オフラインプレイリストを作成して友達と共有するためのアプリです。友達は、あなたのプレイリストを内蔵プレーヤーで再生したり、オフラインで聴くためにダウンロードしたりできます。
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# テンプレート
|
||||
|
||||
このページでは、コミュニティがサポートしているテンプレートを紹介しています。 このページに新たにテンプレートを含めたい場合は、このページの下側にある`このページを編集`をクリックして、プルリクエストを出してください。 独自テンプレートの作成方法については、[テンプレート](../guides/templates.mdx)ガイドをご覧ください。
|
||||
|
||||
これらのテンプレートを使用するには、`wails init -n "プロジェクト名" -t [テンプレートのリンク[@バージョン]]`コマンドを実行してください。
|
||||
|
||||
バージョンサフィックスが無い場合は、デフォルトで、メインブランチのコードテンプレートが使用されます。 バージョンサフィックスがある場合は、当該バージョンのタグに対応するコードテンプレートが使用されます。
|
||||
|
||||
例: `wails init -n "プロジェクト名" -t https://github.com/misitebao/wails-template-vue`
|
||||
|
||||
:::warning 注意
|
||||
|
||||
**Wailsプロジェクトでは、サードパーティ製テンプレートのメンテナンスは行っておらず、責任も負いません!**
|
||||
|
||||
テンプレートについてよく分からない場合は、`package.json`および`wails.json`を確認し、どのようなスクリプトが実行されるのかや、どのようなパッケージがインストールされるのかを調べてください。
|
||||
|
||||
:::
|
||||
|
||||
## Vue
|
||||
|
||||
- [wails-template-vue](https://github.com/misitebao/wails-template-vue) - VueのエコシステムをベースにしたWailsテンプレート (TypeScript、ダークテーマ、i18n、シングルページルーティング、TailwindCSSを統合)
|
||||
- [wails-vite-vue-ts](https://github.com/codydbentley/wails-vite-vue-ts) - Viteを使用したVue 3 TypeScript (および機能を追加する手順)
|
||||
- [wails-vite-vue-the-works](https://github.com/codydbentley/wails-vite-vue-the-works) - Vite、Vuex、Vue Router、SaaS、ESLint + Prettier を使用した Vue 3 TypeScript
|
||||
- [wails-template-quasar-js](https://github.com/sgosiaco/wails-template-quasar-js) - JavaScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier) を使用したテンプレート
|
||||
- [wails-template-quasar-ts](https://github.com/sgosiaco/wails-template-quasar-ts) - TypeScript + Quasar V2 (Vue 3, Vite, Sass, Pinia, ESLint, Prettier, <script setup>によるComposition API) を使用したテンプレート
|
||||
- [wails-template-naive](https://github.com/tk103331/wails-template-naive) - Naive UI(Vue3のコンポーネントライブラリ)をベースにしたWailsテンプレート
|
||||
|
||||
## Angular
|
||||
|
||||
- [wails-template-angular](https://github.com/mateothegreat/wails-template-angular) - 15以上のAngularアクションを含み、すぐに実装に取り掛かれるテンプレート
|
||||
- [wails-angular-template](https://github.com/TAINCER/wails-angular-template) - TypeScript、Sass、ホットリロード、コード分割、i18n を使用した Angular
|
||||
|
||||
## React
|
||||
|
||||
- [wails-react-template](https://github.com/AlienRecall/wails-react-template) - reactjsを使用したテンプレート
|
||||
- [wails-react-template](https://github.com/flin7/wails-react-template) - ライブ開発をサポートしたReactの最小テンプレート
|
||||
- [wails-template-nextjs](https://github.com/LGiki/wails-template-nextjs) - Next.js、TypeScript を使用したテンプレート
|
||||
- [wails-vite-react-ts-tailwind-template](https://github.com/hotafrika/wails-vite-react-ts-tailwind-template) - React + TypeScript + Vite + TailwindCSSを使用したテンプレート
|
||||
- [wails-vite-react-ts-tailwind-shadcnui-template](https://github.com/Mahcks/wails-vite-react-tailwind-shadcnui-ts) - Vite、React、TypeScript、TailwindCSS、shadcn/uiを使用したテンプレート
|
||||
|
||||
## Svelte
|
||||
|
||||
- [wails-svelte-template](https://github.com/raitonoberu/wails-svelte-template) - Svelteを使用したテンプレート
|
||||
- [wails-vite-svelte-template](https://github.com/BillBuilt/wails-vite-svelte-template) - SvelteおよびViteを使用したテンプレート
|
||||
- [wails-vite-svelte-tailwind-template](https://github.com/BillBuilt/wails-vite-svelte-tailwind-template) - TailwindCSS v3を含んだ、SvelteおよびViteを使用したテンプレート
|
||||
- [wails-svelte-tailwind-vite-template](https://github.com/PylotLight/wails-vite-svelte-tailwind-template/tree/master) - Svelte v4.2.0、Vite、TailwindCSS v3.3.3を使用したテンプレート
|
||||
- [wails-sveltekit-template](https://github.com/h8gi/wails-sveltekit-template) - SvelteKitを使用したテンプレート
|
||||
|
||||
## Solid
|
||||
|
||||
- [wails-template-vite-solid-ts](https://github.com/xijaja/wails-template-solid-ts) - Solid + Ts + Viteを使用したテンプレート
|
||||
- [wails-template-vite-solid-js](https://github.com/xijaja/wails-template-solid-js) - Solid + Js + Viteを使用したテンプレート
|
||||
|
||||
## Elm
|
||||
|
||||
- [wails-elm-template](https://github.com/benjamin-thomas/wails-elm-template) - 関数型プログラミングと**高速な**ホットリロードを使ったGUIアプリ開発 :tada: :rocket:
|
||||
- [wails-template-elm-tailwind](https://github.com/rnice01/wails-template-elm-tailwind) - Elm + Tailwind CSS + Wailsのパワー:muscle:を組み合わせたテンプレート (ホットリロードサポートあり)
|
||||
|
||||
## HTMX
|
||||
|
||||
- [wails-htmx-templ-chi-tailwind](https://github.com/PylotLight/wails-hmtx-templ-template) - インタラクティビティを実現するためのピュアなhtmxに、コンポーネントおよびフォームを作成するためのテンプレートが合わさったテンプレート
|
||||
|
||||
## ピュアJavaScript (バニラ)
|
||||
|
||||
- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - 基本的なJavaScript、HTML、CSSのみを含むテンプレート
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user