github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-03 13:20:56 +08:00
Code Projects Activity

Fix tutorial. Remove animation.

Browse Source
This commit is contained in:
Lea Anthony 2024-12-17 06:00:08 +11:00
parent 19f60798b3
commit 37f9f19d6f
No known key found for this signature in database
GPG Key ID: 33DAF7BB90A58405
2 changed files with 82 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/content/docs/index.mdx
View File

@ -35,8 +35,6 @@ import CardAnimation from '../../components/CardAnimation.astro';
<br/>
<CardAnimation />
<div class="animate-cards">
<CardGrid>
<Card title="What is Wails?" icon="star">
@ -63,7 +61,7 @@ import CardAnimation from '../../components/CardAnimation.astro';
<Card title="Quick Start" icon="rocket">
```bash
# Install wails
go install github.com/wailsapp/wails/v3/cmd/wails@latest
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
# Create a new project
wails init -n myproject

108
docs/src/content/docs/tutorials/01-creating-a-service.mdx
View File

@ -226,33 +226,64 @@ This will show you how to organize your code into reusable services and handle e
}
```
Now update `main.js` to simply set the image `src` attribute to the QR code URL:
Now update `index.html` to use the new bindings in the `initializeQRGenerator` function:
```js title="frontend/src/main.js"
import { GenerateQRCode } from './bindings/changeme/qrservice.js';
```html title="frontend/src/index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#qrcode {
margin-bottom: 20px;
width: 256px;
height: 256px;
display: flex;
align-items: center;
justify-content: center;
}
#controls {
display: flex;
gap: 10px;
}
#text {
padding: 5px;
}
#generateButton {
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<img id="qrcode"/>
<div id="controls">
<input type="text" id="text" placeholder="Enter text">
<button id="generateButton">Generate QR Code</button>
</div>
async function generateQR() {
const text = document.getElementById('text').value;
if (!text) {
alert('Please enter some text');
return;
}
const img = document.getElementById('qrcode');
img.src = `/qrservice?text=${text}`
}
export function initializeQRGenerator() {
const button = document.getElementById('generateButton');
if (button) {
button.addEventListener('click', generateQR);
} else {
console.error('Generate button not found');
}
}
<script type="module">
import { initializeQRGenerator } from './main.js';
document.addEventListener('DOMContentLoaded', initializeQRGenerator);
</script>
</body>
</html>
```
Now, when you click the "Generate QR Code" button, you should see a QR code in the center of the page:
Run `wails3 dev` to start the dev server. After a few seconds, the application should open.
Type in some text and click the "Generate QR Code" button. You should see a QR code in the center of the page:
<Image src={qr1} alt="QR Code"/>
@ -339,13 +370,36 @@ This will show you how to organize your code into reusable services and handle e
}
```
Update `main.js` to make the image source the path to the QR code service, passing the text as a query parameter:
```js title="frontend/src/main.js"
import { GenerateQRCode } from './bindings/changeme/qrservice.js';
async function generateQR() {
const text = document.getElementById('text').value;
if (!text) {
alert('Please enter some text');
return;
}
const img = document.getElementById('qrcode');
// Make the image source the path to the QR code service, passing the text
img.src = `/qrservice?text=${text}`
}
export function initializeQRGenerator() {
const button = document.getElementById('generateButton');
if (button) {
button.addEventListener('click', generateQR);
} else {
console.error('Generate button not found');
}
}
```
Running the application again should result in the same QR code:
<Image src={qr1} alt="QR Code"/>
<br/>
</Steps>
## Next Steps
Now that we've created our QR service, we will create bindings so that we can use it in our frontend.