Optimise images part 2
@ -7,7 +7,7 @@ tags: [wails, v2]
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -71,7 +71,7 @@ Gophers rejoice! The single binary dream lives on!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -93,7 +93,7 @@ but we hope to support other IDEs such as Goland soon.
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -119,7 +119,7 @@ They don't even need to be in the top directory - Wails will just work it out fo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -152,7 +152,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -7,7 +7,7 @@ tags: [wails, v2]
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -29,7 +29,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -97,7 +97,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -122,7 +122,7 @@ builds:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -133,7 +133,7 @@ You can also specify `darwin/amd64` as a target too:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -144,7 +144,7 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -157,7 +157,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -7,7 +7,7 @@ tags: [wails, v2]
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -22,7 +22,7 @@ is very different from those first experiments. So without further ado, let's go
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -81,7 +81,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -105,7 +105,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -11,7 +11,7 @@ If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -95,14 +95,14 @@ our custom assets handler:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. If we updated our default vanilla template and
|
||||
@ -122,7 +122,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -9,7 +9,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
@ -11,7 +11,7 @@ version of the runtime library. Finally, it is possible to bind Go methods to th
|
||||
Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## The Main Application
|
||||
|
@ -29,7 +29,7 @@ you'd expect from a modern native app.
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://varly.app/">
|
||||
<img src={require("@site/static/img/varly.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/varly.webp").default} width="75%" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
@ -548,9 +548,9 @@ Preconfigured titlebar settings are available:
|
||||
|
||||
| Setting | Example |
|
||||
| --------------------------- | --------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
Example:
|
||||
|
||||
@ -619,7 +619,7 @@ The "About" menu item will appear in the app menu:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-menu.png").default}
|
||||
src={require("@site/static/img/reference/about-menu.webp").default}
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
@ -629,7 +629,7 @@ When clicked, that will open an about message box:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-dialog.png").default}
|
||||
src={require("@site/static/img/reference/about-dialog.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -6,7 +6,7 @@ sidebar_position: 20
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/tutorials/dogsapi/img.png").default}
|
||||
src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
|
@ -96,7 +96,7 @@ If we view the `build/bin` directory in Windows Explorer, we should see our proj
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.png").default}
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
@ -112,7 +112,7 @@ You should see the application working as expected:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/windows-default-app.png").default}
|
||||
src={require("@site/static/img/windows-default-app.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -54,7 +54,7 @@ Gophers rejoice! The single binary dream lives on!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -70,7 +70,7 @@ There is now the option to generate IDE configuration along with your project. T
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -94,7 +94,7 @@ You just pass a single `embed.FS` that contains all your assets into your applic
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -119,7 +119,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -28,7 +28,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -80,7 +80,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -98,7 +98,7 @@ Thanks to the amazing support of [Mat Ryer](https://github.com/matryer/), the Wa
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -110,7 +110,7 @@ You can also specify `darwin/amd64` as a target too:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -122,7 +122,7 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -136,7 +136,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -24,7 +24,7 @@ I'm pleased to finally announce that Wails v2 is now in beta for Linux! It is so
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -67,7 +67,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -85,7 +85,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -89,14 +89,14 @@ This will generate an error in the devtools. We can see that the error is what w
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
|
||||
@ -115,7 +115,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -8,7 +8,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
@ -7,7 +7,7 @@ sidebar_position: 20
|
||||
A Wails application is a standard Go application, with a webkit frontend. The Go part of the application consists of the application code and a runtime library that provides a number of useful operations, like controlling the application window. The frontend is a webkit window that will display the frontend assets. Also available to the frontend is a Javascript version of the runtime library. Finally, it is possible to bind Go methods to the frontend, and these will appear as Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## The Main Application
|
||||
|
@ -26,7 +26,7 @@ This is [varly](https://varly.app) - a desktop application for MacOS & Windows w
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://varly.app/">
|
||||
<img src={require("@site/static/img/varly.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/varly.webp").default} width="75%" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
@ -605,9 +605,9 @@ Preconfigured titlebar settings are available:
|
||||
|
||||
| Setting | Example |
|
||||
| --------------------------- | --------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
Example:
|
||||
```go
|
||||
@ -669,7 +669,7 @@ func main() {
|
||||
The "About" menu item will appear in the app menu:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/reference/about-menu.png" class="screenshot"/>
|
||||
<img src="/img/reference/about-menu.webp" class="screenshot"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@ -677,7 +677,7 @@ The "About" menu item will appear in the app menu:
|
||||
When clicked, that will open an about message box:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/reference/about-dialog.png" width="40%" class="screenshot"/>
|
||||
<img src="/img/reference/about-dialog.webp" width="40%" class="screenshot"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
@ -93,7 +93,7 @@ If we view the `build/bin` directory in Windows Explorer, we should see our proj
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.png").default}
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
@ -110,7 +110,7 @@ You should see the application working as expected:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/windows-default-app.png").default}
|
||||
src={require("@site/static/img/windows-default-app.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -54,7 +54,7 @@ Gophers rejoice! The single binary dream lives on!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -70,7 +70,7 @@ There is now the option to generate IDE configuration along with your project. T
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -94,7 +94,7 @@ You just pass a single `embed.FS` that contains all your assets into your applic
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -119,7 +119,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -28,7 +28,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -80,7 +80,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -98,7 +98,7 @@ Thanks to the amazing support of [Mat Ryer](https://github.com/matryer/), the Wa
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -110,7 +110,7 @@ You can also specify `darwin/amd64` as a target too:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -122,7 +122,7 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -136,7 +136,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -24,7 +24,7 @@ I'm pleased to finally announce that Wails v2 is now in beta for Linux! It is so
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -67,7 +67,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -85,7 +85,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -89,14 +89,14 @@ This will generate an error in the devtools. We can see that the error is what w
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
|
||||
@ -115,7 +115,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -8,7 +8,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
@ -7,7 +7,7 @@ sidebar_position: 20
|
||||
A Wails application is a standard Go application, with a webkit frontend. The Go part of the application consists of the application code and a runtime library that provides a number of useful operations, like controlling the application window. The frontend is a webkit window that will display the frontend assets. Also available to the frontend is a Javascript version of the runtime library. Finally, it is possible to bind Go methods to the frontend, and these will appear as Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## The Main Application
|
||||
|
@ -26,7 +26,7 @@ This is [varly](https://varly.app) - a desktop application for MacOS & Windows w
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://varly.app/">
|
||||
<img src={require("@site/static/img/varly.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/varly.webp").default} width="75%" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
@ -515,9 +515,9 @@ Preconfigured titlebar settings are available:
|
||||
|
||||
| Setting | Example |
|
||||
| --------------------------- | --------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
Example:
|
||||
|
||||
@ -585,7 +585,7 @@ The "About" menu item will appear in the app menu:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-menu.png").default}
|
||||
src={require("@site/static/img/reference/about-menu.webp").default}
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
@ -596,7 +596,7 @@ When clicked, that will open an about message box:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-dialog.png").default}
|
||||
src={require("@site/static/img/reference/about-dialog.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -93,7 +93,7 @@ If we view the `build/bin` directory in Windows Explorer, we should see our proj
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.png").default}
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
@ -110,7 +110,7 @@ You should see the application working as expected:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/windows-default-app.png").default}
|
||||
src={require("@site/static/img/windows-default-app.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -54,7 +54,7 @@ Gophers rejoice! The single binary dream lives on!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -70,7 +70,7 @@ There is now the option to generate IDE configuration along with your project. T
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -94,7 +94,7 @@ You just pass a single `embed.FS` that contains all your assets into your applic
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -119,7 +119,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -28,7 +28,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -80,7 +80,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -98,7 +98,7 @@ Thanks to the amazing support of [Mat Ryer](https://github.com/matryer/), the Wa
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -110,7 +110,7 @@ You can also specify `darwin/amd64` as a target too:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -122,7 +122,7 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -136,7 +136,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -24,7 +24,7 @@ I'm pleased to finally announce that Wails v2 is now in beta for Linux! It is so
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -67,7 +67,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -85,7 +85,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -89,14 +89,14 @@ This will generate an error in the devtools. We can see that the error is what w
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
|
||||
@ -115,7 +115,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -8,7 +8,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
@ -7,7 +7,7 @@ sidebar_position: 20
|
||||
A Wails application is a standard Go application, with a webkit frontend. The Go part of the application consists of the application code and a runtime library that provides a number of useful operations, like controlling the application window. The frontend is a webkit window that will display the frontend assets. Also available to the frontend is a Javascript version of the runtime library. Finally, it is possible to bind Go methods to the frontend, and these will appear as Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## The Main Application
|
||||
|
@ -26,7 +26,7 @@ Wails - это проект, позволяющий писать настоль
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://varly.app/">
|
||||
<img src={require("@site/static/img/varly.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/varly.webp").default} width="75%" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
@ -605,9 +605,9 @@ Preconfigured titlebar settings are available:
|
||||
|
||||
| Setting | Example |
|
||||
| --------------------------- | --------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
Example:
|
||||
```go
|
||||
@ -669,7 +669,7 @@ func main() {
|
||||
The "About" menu item will appear in the app menu:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/reference/about-menu.png" class="screenshot"/>
|
||||
<img src="/img/reference/about-menu.webp" class="screenshot"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@ -677,7 +677,7 @@ The "About" menu item will appear in the app menu:
|
||||
When clicked, that will open an about message box:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/reference/about-dialog.png" width="40%" class="screenshot"/>
|
||||
<img src="/img/reference/about-dialog.webp" width="40%" class="screenshot"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
@ -92,7 +92,7 @@ This has compiled the application and saved it in the `build/bin` directory.
|
||||
If we view the `build/bin` directory in Windows Explorer, we should see our project binary:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/helloworld-app-icon.png" width="134px"/>
|
||||
<img src="/img/helloworld-app-icon.webp" width="134px"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@ -106,7 +106,7 @@ On Linux, you can run the application using `./helloworld` from the `build/bin`
|
||||
You should see the application working as expected:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/windows-default-app.png" width="50%"
|
||||
<img src="/img/windows-default-app.webp" width="50%"
|
||||
className="screenshot"/>
|
||||
</div>
|
||||
<br/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -54,7 +54,7 @@ Gophers 欢呼吧! 单个二进制文件的构想依然存在!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -70,7 +70,7 @@ Gophers 欢呼吧! 单个二进制文件的构想依然存在!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -94,7 +94,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -119,7 +119,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -28,7 +28,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -80,7 +80,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -98,7 +98,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -110,7 +110,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -122,7 +122,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -136,7 +136,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -24,7 +24,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -67,7 +67,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@ -85,7 +85,7 @@ v1 的一个巨大痛点是需要将整个应用程序压缩为单个 JS 和 CSS
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -10,7 +10,7 @@ sidebar_position: 6
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
@ -89,14 +89,14 @@ This will generate an error in the devtools. This will generate an error in the
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image: This technique can be used to load images directly into the page. This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image: This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
|
||||
@ -115,7 +115,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -8,7 +8,7 @@ Wails 旨在提供出色的开发体验。 为此,我们现在支持生成 IDE
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
@ -7,7 +7,7 @@ sidebar_position: 20
|
||||
Wails 应用程序是一个带有一个 webkit 前端的标准的 Go 应用程序。 应用程序的 Go 部分由应用程序代码和一个运行时库组成, 该库提供了许多有用的操作,例如控制应用程序窗口。 前端是一个 webkit 窗口,将显示前端资源。 前端还可以使用运行时库的 Javascript 版本。 最后,可以将 Go 方法绑定到前端,这些将显示为可以调用的 Javascript 方法,就像它们是原生 Javascript 方法一样。
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## 主应用程序
|
||||
|
@ -26,7 +26,7 @@ Wails 是一个可让您使用 Go 和 Web 技术编写桌面应用的项目。
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://varly.app/">
|
||||
<img src={require("@site/static/img/varly.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/varly.webp").default} width="75%" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
@ -601,9 +601,9 @@ Preconfigured titlebar settings are available:
|
||||
|
||||
| 值 | 描述 |
|
||||
| --------------------------- | --------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
名称:Mac
|
||||
```go
|
||||
@ -681,7 +681,7 @@ func main() {
|
||||
The "About" menu item will appear in the app menu:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/reference/about-menu.png" class="screenshot"/>
|
||||
<img src="/img/reference/about-menu.webp" class="screenshot"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@ -689,7 +689,7 @@ The "About" menu item will appear in the app menu:
|
||||
When clicked, that will open an about message box:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/reference/about-dialog.png" width="40%" class="screenshot"/>
|
||||
<img src="/img/reference/about-dialog.webp" width="40%" class="screenshot"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
@ -105,7 +105,7 @@ This has compiled the application and saved it in the `build/bin` directory.
|
||||
If we view the `build/bin` directory in Windows Explorer, we should see our project binary:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/helloworld-app-icon.png" width="134px"/>
|
||||
<img src="/img/helloworld-app-icon.webp" width="134px"/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
@ -119,6 +119,6 @@ On Linux, you can run the application using `./helloworld` from the `build/bin`
|
||||
You should see the application working as expected:
|
||||
|
||||
<div class="text--center">
|
||||
<img src="/img/windows-default-app.png" width="50%" className="screenshot"/>
|
||||
<img src="/img/windows-default-app.webp" width="50%" className="screenshot"/>
|
||||
</div>
|
||||
<br/>
|
||||
|
Before Width: | Height: | Size: 19 KiB |
BIN
website/static/img/architecture.webp
Normal file
After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 9.8 KiB |
BIN
website/static/img/assetshandler-does-not-exist.webp
Normal file
After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 56 KiB |
BIN
website/static/img/assetshandler-go-mod.webp
Normal file
After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 73 KiB |
BIN
website/static/img/assetshandler-image.webp
Normal file
After Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 24 KiB |
BIN
website/static/img/bronze sponsor.webp
Normal file
After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 278 KiB |
BIN
website/static/img/browser.webp
Normal file
After Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 130 KiB |
BIN
website/static/img/build-cross-windows.webp
Normal file
After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 128 KiB |
BIN
website/static/img/build-darwin-amd.webp
Normal file
After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 126 KiB |
BIN
website/static/img/build-darwin-arm.webp
Normal file
After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 151 KiB |
BIN
website/static/img/build-darwin-universal.webp
Normal file
After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 24 KiB |
BIN
website/static/img/defaultproject.webp
Normal file
After Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 44 KiB |
BIN
website/static/img/easyweb.webp
Normal file
After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 15 KiB |
BIN
website/static/img/go-logo.webp
Normal file
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 5.1 KiB |
BIN
website/static/img/helloworld-app-icon.webp
Normal file
After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 103 KiB |
BIN
website/static/img/jetbrains-grayscale.webp
Normal file
After Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 19 KiB |
BIN
website/static/img/linux-build-cross-windows.webp
Normal file
After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 393 KiB |
BIN
website/static/img/nsis.webp
Normal file
After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 155 KiB |
BIN
website/static/img/reference/about-dialog.webp
Normal file
After Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 21 KiB |
BIN
website/static/img/reference/about-menu.webp
Normal file
After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 100 KiB |
BIN
website/static/img/reference/titlebar-default.webp
Normal file
After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 78 KiB |
BIN
website/static/img/reference/titlebar-hidden-inset.webp
Normal file
After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 132 KiB |