Wails使用半透明“冰霜”效果
首先初始化一个模板项目
wails init -n transparent -t vue
示例仓库https://github.com/skypiaoyizhe/wails-demo
然后把项目跑起来
修改应用配置
main.go
将背景色改为黑色,透明度0,也就是没有背景。
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},
package main
import (
"embed"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed frontend/dist
var assets embed.FS
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "transparent",
Width: 1024,
Height: 768,
Assets: assets,
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},
OnStartup: app.startup,
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err.Error())
}
}
修改网页部分
frontend/src/style.css 删除所有的background样式
html {
text-align: center;
}
body {
margin: 0;
color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: local(""),
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}
#app {
height: 100vh;
text-align: center;
}
然后就能看见界面变成了
继续修改main.go
引入包,修改window下的配置
"github.com/wailsapp/wails/v2/pkg/options/windows"
添加参数
Windows: &windows.Options{
WebviewIsTransparent: true,// 网页透明
WindowIsTranslucent: true,// 窗口透明
DisableWindowIcon: false,
DisableFramelessWindowDecorations: false,
WebviewUserDataPath: "",
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),
},
},
完整main.go
package main
import (
"embed"
"github.com/wailsapp/wails/v2/pkg/options/windows"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
)
//go:embed frontend/dist
var assets embed.FS
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "transparent",
Width: 1024,
Height: 768,
Assets: assets,
BackgroundColour: &options.RGBA{R: 0, G: 0, B: 0, A: 0},
OnStartup: app.startup,
Bind: []interface{}{
app,
},
Windows: &windows.Options{
WebviewIsTransparent: true,
WindowIsTranslucent: true,
DisableWindowIcon: false,
DisableFramelessWindowDecorations: false,
WebviewUserDataPath: "",
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),
},
},
})
if err != nil {
println("Error:", err.Error())
}
}
运行效果
此时窗口是透明了,冰霜效果也有了,但是窗口名称还是有点违和感,继续修改。
添加无边框
Frameless: true,
这样看起来就舒服多了,但是这样就不能拖动窗口和关闭了,就需要用到wail自带的一些方法和参数配置。
退出程序
window.runtime.Quit();
界面可以拖动,添加data-wails-drag
界面不可以拖动部分,添加data-wails-no-drag
完整代码
<script setup>
import HelloWorld from './components/HelloWorld.vue'
const handleQuit = () => {
window.runtime.Quit();
}
</script>
<template>
<div data-wails-drag>
拖动
</div>
<div data-wails-no-drag>
拖不动
</div>
<button @click="handleQuit">关闭</button>
<img id="logo" alt="Wails logo" src="./assets/images/logo-universal.png"/>
<HelloWorld/>
</template>
<style>
#logo {
display: block;
width: 50%;
height: 50%;
margin: auto;
padding: 10% 0 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
</style>
运行效果
此时拖动部分可以拖动窗口移动位置,关闭可以关闭窗口,退出程序。