golang gui 那些事

一. 前言

接触 go 需要已经有几年时间了，也写了不少项目功能，接触了各种各样的框架，这里就只说说 gui 图形界面相关的，踩过不少坑了，能填的填，不能填的就没有办法了，期待后面的不断优化更新，不断做到更好。

python 都有桌面程序了，于是就想用 go 写写桌面程序，搜了有不少开源的轮子。walk，webview，lurca这几个都用了用，接下来一个个说说。

二. Walk

1. 介绍

walk 项目源 "github.com/lxn/walk", 需要引入依赖 declarative，如果需要做一些订制化需求的话，还需要引入 win，自带了一些简单的样式，按钮，行列格式等，写成样式比较丑，主题内容订制比较难，下面附带个小栗子

2. 例子1: 原生 gui

package main

import (
	"fmt"
	"io/ioutil"
	"log"
	"os"
	"os/exec"
	"strings"
	"syscall"
	"time"

	"github.com/lxn/walk"
	. "github.com/lxn/walk/declarative"
	"github.com/lxn/win"
)

var (
	mw *MyMainWindow
)

// 执行程序
func openExe(Filename string) {
	Filename = "\"" + Filename + "\""
	fmt.Println(Filename)
	cmd := exec.Command("cmd.exe")
	cmd.SysProcAttr = &syscall.SysProcAttr{CmdLine: fmt.Sprintf(`/c %s`, Filename), HideWindow: true}
	output, err := cmd.Output()
	fmt.Printf("output:\n%s\n", output)
	if err != nil {
		fmt.Printf("error: %+v\n", err)
	}
}

//自定义窗口
type MyMainWindow struct {
	*walk.MainWindow
	te *walk.TextEdit

	//listbox使用的数据
	model *EnvModel
	//listbox控件
	listBox *walk.ListBox
}

//环境变量条目数据模型
type EnvItem struct {
	//环境变量的名字和值
	name  string
	value string
}

//列表数据模型
type EnvModel struct {
	//继承ListModelBase
	walk.ListModelBase

	//环境变量数集合
	items []EnvItem
}

//列表数据模型的工厂方法
func NewEnvModel() *EnvModel {
	env := os.Environ()
	m := &EnvModel{items: make([]EnvItem, len(env))}
	for i, e := range env {
		j := strings.Index(e, "=")
		if j == 0 {
			continue
		}

		name := e[0:j]
		value := strings.Replace(e[j+1:], ";", "\r\n", -1)

		m.items[i] = EnvItem{name, value}
	}

	return m
}

//定义列表项目的单击监听
func (mw *MyMainWindow) lb_CurrentIndexChanged() {
	i := mw.listBox.CurrentIndex()
	item := &mw.model.items[i]

	mw.te.SetText(item.value)

	fmt.Println("CurrentIndex: ", i)
	fmt.Println("CurrentEnvVarName: ", item.name)
}

//定义列表项目的双击监听
func (mw *MyMainWindow) lb_ItemActivated() {
	value := mw.model.items[mw.listBox.CurrentIndex()].value

	walk.MsgBox(mw, "Value", value, walk.MsgBoxIconInformation)
}

//列表的系统回调方法：获得listbox的数据长度
func (m *EnvModel) ItemCount() int {
	return len(m.items)
}

//列表的系统回调方法：根据序号获得数据
func (m *EnvModel) Value(index int) interface{} {
	return m.items[index].name
}

//显示消息窗口
func ShowMsgBox(title, msg string) int {
	return walk.MsgBox(mw, title, msg, walk.MsgBoxOK)
}

//一个普通的事件回调函数
func TiggerFunc(key, value string) {
	ShowMsgBox(key, value)
}

const (
	SIZE_W = 800
	SIZE_H = 650
)

func main() {
	f, _ := os.OpenFile("a.log", os.O_APPEND|os.O_CREATE, 07777)
	defer f.Close()
	logger := log.New(f, "[info]\t", log.Ltime)
	logger.Println("开始输出日志信息")
	defer func() {
		if err := recover(); err != nil {
			errMsg := fmt.Sprintf("%#v", err)
			logger.Println(errMsg)
			ioutil.WriteFile("fuck.log", []byte(errMsg), 0644)
		}
	}()

	mw = &MyMainWindow{model: NewEnvModel()}
	MainWindow{
		Icon:     Bind("'three.ico'"),
		AssignTo: &mw.MainWindow,
		Title:    "程序列表",

		//窗口菜单
		MenuItems: []MenuItem{},

		//工具栏
		ToolBar: ToolBar{
			//按钮风格：图片在字的前面
			ButtonStyle: ToolBarButtonImageBeforeText,

			//工具栏中的工具按钮
			Items: []MenuItem{
				//自带子菜单的工具按钮
				Menu{
					//工具按钮本身的图文和监听
					Text:  "聊天工具",
					Image: "img/document-properties.png",

					//附带一个子菜单
					Items: []MenuItem{
						Action{
							Text: "QQ",
							OnTriggered: func() {
								go openExe("E:\\apps\\qq\\Tencent\\QQ\\Bin\\QQScLauncher.exe")
							},
						},
						Action{
							Text: "微信",
							OnTriggered: func() {
								go openExe("C:\\Program Files (x86)\\Tencent\\WeChat\\WeChat.exe")
							},
						},
					},
				},
				Separator{},
				Menu{
					//工具按钮本身的图文和监听
					Text:  "开发工具",
					Image: "img/document-properties.png",

					//附带一个子菜单
					Items: []MenuItem{
						Action{
							Text: "vscode",
							OnTriggered: func() {
								go openExe("D:\\apps\\vscode\\Microsoft VS Code\\Code.exe")
							},
						},
						Action{
							Text: "nginx",
							OnTriggered: func() {
								cmd := exec.Command("cmd.exe", "/C", "E:/apps/nginx-1.20.2/nginx.exe -p E:/apps/nginx-1.20.2/ -c E:/apps/nginx-1.20.2/conf/nginx.conf -e E:/apps/nginx-1.20.2/logs/error.log &")
								cmd.Stdout = os.Stdout
								cmd.Stderr = os.Stderr
								println(cmd.Run())
							},
						},
					},
				},
				Separator{},
				Menu{
					//工具按钮本身的图文和监听
					Text:  "运维工具",
					Image: "img/document-properties.png",

					//附带一个子菜单
					Items: []MenuItem{
						Action{
							Text: "xshell",
							OnTriggered: func() {
								go openExe("D:\\apps\\xshell7\\Xshell.exe")
							},
						},
					},
				},
				Separator{},
				Menu{
					//工具按钮本身的图文和监听
					Text:  "连接工具",
					Image: "img/document-properties.png",

					//附带一个子菜单
					Items: []MenuItem{
						Action{
							Text: "向日葵",
							OnTriggered: func() {
								go openExe("E:\\apps\\xrk\\SunloginClient\\SunloginClient.exe")
							},
						},
					},
				},
				Separator{},
				Menu{
					//工具按钮本身的图文和监听
					Text:  "其他工具",
					Image: "img/document-properties.png",

					//附带一个子菜单
					Items: []MenuItem{
						Action{
							Text: "谷歌",
							OnTriggered: func() {
								go openExe("C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe")
							},
						},
						Action{
							Text: "WPS",
							OnTriggered: func() {
								go openExe("E:\\apps\\wps\\WPS Office\\ksolaunch.exe")
							},
						},
						Action{
							Text: "迅雷",
							OnTriggered: func() {
								go openExe("D:\\apps\\xunlei\\Thunder\\Program\\Thunder.exe")
							},
						},
					},
				},
				Separator{},
			},
		},

		// MinSize: Size{600, 400},
		Size:   Size{600, 400},
		Layout: VBox{},

		//控件们
		Children: []Widget{
			//水平局部
			HSplitter{

				MinSize: Size{600, 300},
				Children: []Widget{
					ListBox{
						StretchFactor: 1,
						//赋值给myWindow.listBox
						AssignTo: &mw.listBox,
						//要显示的数据
						Model: mw.model,

						//单击监听
						OnCurrentIndexChanged: mw.lb_CurrentIndexChanged,
						//双击监听
						OnItemActivated: mw.lb_ItemActivated,
					},
					TextEdit{
						StretchFactor: 1,
						AssignTo:      &mw.te,
						ReadOnly:      true,
					},
				},
			},

			HSplitter{
				MaxSize: Size{600, 50},
				Children: []Widget{
					//图像
					ImageView{
						Background: SolidColorBrush{Color: walk.RGB(255, 191, 0)},
						//图片文件位置
						Image: "img/clock.jpg",
						//和四周的边距
						Margin: 5,
						//定义最大拉伸尺寸
						MinSize: Size{50, 50},

						//显示模式
						Mode: ImageViewModeZoom,
					},

					//按钮
					PushButton{
						StretchFactor: 8,
						Text:          "时间提醒",
						OnClicked: func() {
							currentTime := time.Now()
							ShowMsgBox("时间提醒", currentTime.Format("2006.01.02 15:04:05"))
						},
					},
				},
			},
		},
	}.Create()
	// win.SetWindowLong(mw.Handle(), win.GWL_STYLE, win.WS_EX_CONTEXTHELP) // removes default styling

	xScreen := win.GetSystemMetrics(win.SM_CXSCREEN)
	yScreen := win.GetSystemMetrics(win.SM_CYSCREEN)
	win.SetWindowPos(
		mw.Handle(),
		0,
		(xScreen-SIZE_W)/2,
		(yScreen-SIZE_H)/2,
		SIZE_W,
		SIZE_H,
		win.SWP_FRAMECHANGED,
	)
	win.ShowWindow(mw.Handle(), win.SW_SHOW)
	mw.Run()
}

接下来想要优化下页面，发现 walk 框架中自带了一个 webview 功能，这个功能可以内嵌一个网站，可以配合原声html，js，css，jquery等使用更复杂的页面功能，但是使用过程中也遇到了一些坑，因为没有使用前后端分离，使用go gin框架做web驱动，walk 的webview对于html中一些特殊字符无法识别，会报错弹窗，比如反引号，更无法使用一些前端框架，比如 vue element ui等有些好看样式的框架。无法渲染出来，对于网站中一些复杂的样式功能，纯原声自己去写还是有些麻烦的，不过这个webview也使用蛮久的，附带一个小栗子吧。

3. 例子2: walk webview 使用

package main

import (
	"github.com/lxn/walk"
	. "github.com/lxn/walk/declarative"
	"github.com/lxn/win"
)

const (
	SIZE_W = 800
	SIZE_H = 600
)

type MyMainWindow struct {
	*walk.MainWindow
}

func main() {
	var le *walk.LineEdit
	var wv *walk.WebView
	mw := new(MyMainWindow)

	MainWindow{
		Visible:  false,
		AssignTo: &mw.MainWindow,
		Icon:     Bind("'three.ico'"),
		Title:    "Walk WebView Example'",
		MinSize:  Size{SIZE_W, SIZE_H},
		Layout:   VBox{MarginsZero: true},
		Children: []Widget{
			LineEdit{
				AssignTo: &le,
				Text:     Bind("wv.URL"),
				OnKeyDown: func(key walk.Key) {
					if key == walk.KeyReturn {
						wv.SetURL(le.Text())
					}
				},
			},
			WebView{
				AssignTo: &wv,
				Name:     "wv",
				URL:      "https://github.com/lxn/walk",
			},
		},
	}.Create()
	win.SetWindowLong(mw.Handle(), win.GWL_STYLE, win.WS_BORDER) // removes default styling

	xScreen := win.GetSystemMetrics(win.SM_CXSCREEN)
	yScreen := win.GetSystemMetrics(win.SM_CYSCREEN)
	win.SetWindowPos(
		mw.Handle(),
		0,
		(xScreen-SIZE_W)/2,
		(yScreen-SIZE_H)/2,
		SIZE_W,
		SIZE_H,
		win.SWP_FRAMECHANGED,
	)
	win.ShowWindow(mw.Handle(), win.SW_SHOW)

	mw.Run()
}

4. 编译使用

go walk编译并且带着图标的方法比较简单，首先必须要有一个manifest 文件，然后

1. 准备 main.manifest 文件

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
    <assemblyIdentity version="1.0.0.0" processorArchitecture="*" name="SomeFunkyNameHere" type="win32"/>
    <dependency>
        <dependentAssembly>
            <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"/>
        </dependentAssembly>
    </dependency>
    <asmv3:application>
        <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
            <dpiAware>true</dpiAware>
        </asmv3:windowsSettings>
    </asmv3:application>
</assembly>

2.安装 rsrc 工具，加入到 path 路径

go get github.com/akavel/rsrc
cd xxx/rsrc
go install

3. 生成项目可执行文件

rsrc.exe -manifest main.manifest -ico main.ico -o main.syso
go build -ldflags="-H windowsgui" -o localJob.exe

三. webview 

1. 介绍

walk webview 上面也说了，对于前端一些特殊字符无法使用，于是就接触了第二个 gui 框架，"github.com/polevpn/webview"

这个框架是一个分支，原来的是 "github.com/webview/webview", polevpn 的对于原来的做了一些优化，使用了后，也遇到了一些问题，设置标题时不支持中文(或许可以通过其他方法设置)

但是不能支持设置左上角图标，webview.SetIcon() 无法使用，官方作者给出了一种使用 win 的解决方案，不过我试了，不管用，可能自己有某些地方没有考虑到。接下来附带使用流程

2. 环境准备

1. 只能 windows 平台使用，并且依赖 webview2，调用本地微软浏览器

2. 准备依赖文件

WebView2Loader.dll
WebView2Loader.dll.lib
WebView2LoaderStatic.lib

3. 准备 version_template.h 

#pragma once
#define VER_MAJOR 1
#define VER_MINOR 0
#define VER_PATCH 1

4. 准备 make_version.bat

@ECHO OFF
cd /d %1
if exist %2 del /q %2
for /f "delims=" %%i in ('git rev-list --count HEAD') do (set REVISION=%%i)
for /f "delims=" %%i in ('git rev-parse --short HEAD') do (set REVISION_HASH=%%i)

if "%REVISION%" == "" (
	set REVISION=0
) 

(echo #define VER_REVISION %REVISION%  && echo #define VER_REVISION_HASH %REVISION_HASH%) > %2

5. 准备  build.bat

@ECHO OFF
cd /d %1
if exist %2 del /q %2
for /f "delims=" %%i in ('git rev-list --count HEAD') do (set REVISION=%%i)
for /f "delims=" %%i in ('git rev-parse --short HEAD') do (set REVISION_HASH=%%i)

if "%REVISION%" == "" (
	set REVISION=0
) 

(echo #define VER_REVISION %REVISION%  && echo #define VER_REVISION_HASH %REVISION_HASH%) > %2

6. 准备 main 文件

package main

import (
	"fmt"

	"github.com/polevpn/webview"
)

func run() {
	w := webview.New(800, 600, false, true)
	defer w.Destroy()
	w.SetTitle("baidu")
	w.SetSize(800, 600, webview.HintNone)
	w.Navigate("http://www.baidu.com")
	w.Run()
}

3. 测试编译

1. 测试

go run main.go 可以直接打开 gui 进行调试

2. 编译

./build.bat, 会生成可执行文件直接运行。

四. lorca

1. 介绍

因为上面 webview 框架有一点点小问题，1. 无法设置图标；2. 标题不支持中文。

2. 准备代码

package main

import (
	"log"

	"github.com/zserge/lorca"
)

func main() {
	ui, err := lorca.New("http://www.baidu.com", "", 800, 600)
	if err != nil {
		log.Fatal(err)
	}
	ui.Eval(`
		//alert('1');
	`)
	defer ui.Close()
	<-ui.Done()
}

3. 测试编译

1. 测试

go run main.go

2. 编译

go build ldflags="-H windowsgui"

4. 问题

1. 提示 谷歌浏览器正在受控

mod 里找到  lurca 里的 ui.go，注释掉 "--enable-automation"

2. 登录提示是否记录密码,谷歌浏览器自带的

目前还没找到解决办法。

五. 总结

各个框架，都有各种优缺点，根据个人可容忍度去选择吧