【Wails】高大上的半透明“冰霜” 效果

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>

运行效果

此时拖动部分可以拖动窗口移动位置，关闭可以关闭窗口，退出程序。