golang用wails开发类似360的悬浮球(二)

关于后续

距离上篇文章发布有差不多一年了,第一次写博客,开始信心满满,结果发现搜索引擎根本搜不到,于是乎觉得自己写的东西别人应该是看不到,最近无意间发现有人评论,本着自己学习,帮助他人的想法,今天完成wails悬浮球的后续。

窗体属性

由于我不是c系列的开发人员,为了隐藏wails在任务栏的图标,搜索了很多资料,甚至尝试了从任务栏所在的窗体入手修改windows的ui,虽然感觉我在绕路,但网上相关资料确实太少,总之搜索到的资料就是如果用c++写怎么怎么样就可以实现图标在任务栏隐藏,但是wails提供的窗口设置属性实在太少,在尝试了无数种办法后,只能是查看wails的源码了。

修改源码

在这里插入图片描述

如图经过慢慢找最终windows的窗口属性在这个位置被设置,就是我们在app.go设置的窗体属性会在这里被设置到窗体上,在第71行我加入了一行代码(我的idea能临时编辑源码)


exStyle=w32.WS_EX_NOREDIRECTIONBITMAP|w32.WS_EX_TOOLWINDOW|w32.WS_EX_TOPMOST


上面的代码作用,是创建一个混合渲染、在顶部、工具栏的窗口WS_EX_TOOLWINDOW这个属性是关键,窗口的图标不在任务栏显示,直接百度WS_EX_TOOLWINDOW这个关键字能出现详细说明。另外在这里能拓展windows窗体的各种功能。

给个边框加点样式

在这里插入图片描述

更好看的样式就百度各种特效,旋转啦、发光了等,wails的ui完全是个网页可以自由发挥,现在我们已经实现了大半,隐藏了任务栏图标,现在需要在系统托盘添加图标。

系统托盘图标实现

先找一张png的图片,我们就用悬浮球那张图片
在这里插入图片描述
先复制出来,观察build目录下,appiocn.png图片
在这里插入图片描述
没错你会发现这张图片就是wails的图标图片,现在你需要把桌面的那张图片修改名称替换这种图片
在这里插入图片描述
然后删除build ----》windows下的icon.ico
在这里插入图片描述
之后启动wails 运行 wails dev ,然后build ----》windows下的icon.ico会重新生成,并且是我们替换后的图片了,ico格式是图标图片,系统托盘的图标要用这种格式。接下来就是把图标放入系统托盘,这里我们使用github.com/getlantern/systray这个包来完成,详细教程可以自行百度
完整的appgo代码
在这里插入图片描述

package main

import (
	"embed"
	"github.com/wailsapp/wails/v2"
	"github.com/wailsapp/wails/v2/pkg/options/windows"

	"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
Wails 是一个使用 Go 编程语言创建跨平台本机应用程序的框架,它允许您使用 Go 编写前端和后端代码。Wails 提供了一个简单的方式来构建具有本机外观和感觉的应用程序,可以在所有主要平台上运行,包括 Windows、macOS 和 Linux。 要使用 Wails 开发 UI 窗口,可以遵循以下步骤: 1. 安装 Wails 首先,您需要安装 Wails。您可以访问官方网站 https://wails.app/ ,根据您的操作系统选择对应的安装包进行安装。 2. 创建新项目 使用 `wails init` 命令在您的工作目录中创建新项目。该命令将生成一个基本的 Wails 项目结构。 3. 创建 UI 窗口 在项目的 `frontend` 目录下创建一个 HTML 文件,该文件将作为窗口的 UI 界面。您可以使用 HTML、CSS 和 JavaScript 来创建您的 UI 界面。Wails 使用 Go 的 Webview 库来呈现 UI 界面。 4. 连接前端和后端 在项目的 `backend` 目录下创建一个 Go 文件,该文件将作为窗口后端处理逻辑。您可以使用 Go 编写您的业务逻辑,并将其与前端交互。Wails 提供了一些方便的方法来实现前后端之间的通信。 5. 构建应用程序 使用 `wails build` 命令构建您的应用程序。该命令将生成适用于您的操作系统和架构的进制文件。 6. 运行应用程序 使用 `./<yourapp>` 命令运行您的应用程序。您将看到一个带有本机外观和感觉的 UI 界面,可以在其中与您的后端进行交互。 以上是使用 Wails 开发 UI 窗口的基本步骤。您可以使用 Wails 提供的其他功能来扩展您的应用程序。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wangkai031

您的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值