Golang使用HTML和CSS快速开发跨平台桌面UI插件gowd的应用

简介

gowd是一个使用Go语言结合HTML/JS/CSS构建跨平台GUI应用程序的库，基于nwjs技术实现。

如何使用这个库

下载并安装nwjs
安装gowd库：go get github.com/dtylman/gowd
克隆gowd仓库
将模板文件夹中的package.json、index.html、main.go和main.js复制到新文件夹
执行go build
编辑main.js，设置goBinary为你的可执行文件名：

var goBinary = "./template"; //或template.exe

运行nw .，将会显示Hello World模板

使用示例

最简单的Hello World

import "github.com/dtylman/gowd"

func main() {
    body, err := gowd.ParseElement("<h1>Hello world</h1>", nil)
    if err != nil {
        panic(err)
    }
    gowd.Run(body)
}

添加按钮

import (
    "github.com/dtylman/gowd"
)

func main() {
    body, err := gowd.ParseElement("<h1>Hello world</h1>", nil)
    if err != nil {
        panic(err)
    }
    p := body.AddElement(gowd.NewElement("p"))
    btn := p.AddElement(gowd.NewElement("button"))
    btn.SetText("Click me")
    btn.OnEvent(gowd.OnClick, btnClicked)
    gowd.Run(body)
}

func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
    sender.SetText("Clicked!")
}

从HTML创建并绑定元素

import (
    "github.com/dtylman/gowd"
    "fmt"
)

func main() {
    body, err := gowd.ParseElement("<h1>Hello world</h1>", nil)
    if err != nil {
        panic(err)
    }
    p := body.AddElement(gowd.NewElement("p"))
    em := gowd.NewElementMap()
    p.AddHtml(`<select id="select1">
        <option value="" disabled="disabled" selected="selected">Please select a name</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        </select>`, em)
    em["select1"].OnEvent(gowd.OnChange, btnClicked)
    em["select1"].Object = body
    gowd.Run(body)
}

func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
    body := sender.Object.(*gowd.Element)
    body.AddElement(gowd.NewStyledText(fmt.Sprintf("Selected %s", event.GetValue()), gowd.BoldText))
    body.AddElement(gowd.NewElement("br"))
}

使用Bootstrap

首先在index.html中添加Bootstrap的CSS和JS：

<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

然后可以创建Bootstrap元素：

import (
    "github.com/dtylman/gowd"
    "github.com/dtylman/gowd/bootstrap"
    "time"
    "fmt"
)

var body *gowd.Element

func main() {
    // 创建一个新的bootstrap流体容器
    body = bootstrap.NewContainer(false)
    // 使用对象模型添加一些元素
    div := bootstrap.NewElement("div", "well")
    row := bootstrap.NewRow(bootstrap.NewColumn(bootstrap.ColumnLarge, 6, div))
    body.AddElement(row)
    // 从HTML添加其他元素
    div.AddHTML(`<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" id="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    </ul>
    </div>`, nil)
    // 添加一个按钮来显示进度条
    btn := bootstrap.NewButton(bootstrap.ButtonPrimary, "Start")
    btn.OnEvent(gowd.OnClick, btnClicked)
    row.AddElement(bootstrap.NewColumn(bootstrap.ColumnLarge, 4, bootstrap.NewElement("div", "well", btn)))

    // 启动UI循环
    gowd.Run(body)
}

// 当"start"按钮被点击时触发
func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
    // 向body添加文本和进度条
    text := body.AddElement(gowd.NewStyledText("Working...", gowd.BoldText))
    progressBar := bootstrap.NewProgressBar()
    body.AddElement(progressBar.Element)
    
    // 使body停止响应用户事件
    body.Disable()
    
    // 清理 - 移除添加的元素
    defer func() {
        body.RemoveElement(text)
        body.RemoveElement(progressBar.Element)
        body.Enable()
    }()

    // 渲染进度条
    for i := 0; i <= 123; i++ {
        progressBar.SetValue(i, 123)
        text.SetText(fmt.Sprintf("Working %v", i))
        time.Sleep(time.Millisecond * 20)
        // 这将导致body被刷新
        body.Render()
    }
}

高级示例

更高级的使用示例可以参考TodoMVC示例，它展示了gowd更复杂的功能和用法。

更多关于golang使用HTML和CSS快速开发跨平台桌面UI插件gowd的应用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

gougou168 1楼

更多关于golang使用HTML和CSS快速开发跨平台桌面UI插件gowd的应用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html

使用GOWD开发跨平台桌面UI应用

GOWD (Go Webview Desktop) 是一个基于Go语言和Webview的轻量级框架，允许开发者使用HTML/CSS/JavaScript构建跨平台桌面应用。下面我将介绍如何使用GOWD快速开发桌面应用。

基本概念

GOWD的核心思想是将Web技术(HTML/CSS/JS)与Go后端结合，通过Webview显示界面，实现跨平台桌面应用开发。

安装

首先安装GOWD：

go get -u github.com/dtylman/gowd

基本示例

下面是一个最简单的GOWD应用：

package main

import (
	"github.com/dtylman/gowd"
)

func main() {
	// 创建主窗口
	window := gowd.NewWindow("我的第一个GOWD应用")
	
	// 创建HTML元素
	title := gowd.NewElement("h1")
	title.SetText("Hello, GOWD!")
	
	button := gowd.NewElement("button")
	button.SetText("点击我")
	
	// 添加点击事件处理
	button.OnEvent(gowd.OnClick, func(sender *gowd.Element, event *gowd.EventElement) {
		title.SetText("按钮被点击了!")
	})
	
	// 将元素添加到body
	window.AddElement(title)
	window.AddElement(button)
	
	// 启动应用
	window.Run()
}

使用HTML模板

更常见的做法是使用HTML模板：

package main

import (
	"github.com/dtylman/gowd"
)

func main() {
	// 创建窗口
	window := gowd.NewWindow("HTML模板示例")
	
	// 加载HTML模板
	html := `
	<!DOCTYPE html>
	<html>
	<head>
		<title>模板示例</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				padding: 20px;
			}
			.button {
				background-color: #4CAF50;
				color: white;
				padding: 10px 15px;
				border: none;
				border-radius: 4px;
				cursor: pointer;
			}
			.button:hover {
				background-color: #45a049;
			}
		</style>
	</head>
	<body>
		<h1 id="title">欢迎使用GOWD</h1>
		<button id="myButton" class="button">点击我</button>
	</body>
	</html>
	`
	
	// 解析HTML
	window.SetTemplate(html)
	
	// 获取元素并添加事件
	title := window.GetElement("title")
	button := window.GetElement("myButton")
	
	button.OnEvent(gowd.OnClick, func(sender *gowd.Element, event *gowd.EventElement) {
		title.SetText("按钮被点击了!")
	})
	
	// 启动应用
	window.Run()
}

更复杂的应用结构

对于更复杂的应用，可以组织为以下结构：

myapp/
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── templates/
│   └── index.html
└── main.go

main.go:

package main

import (
	"embed"
	"log"
	
	"github.com/dtylman/gowd"
)

//go:embed assets/*
var assets embed.FS

//go:embed templates/*
var templates embed.FS

func main() {
	// 创建窗口
	window := gowd.NewWindow("结构化应用示例")
	
	// 加载HTML模板
	html, err := templates.ReadFile("templates/index.html")
	if err != nil {
		log.Fatal(err)
	}
	
	// 设置模板
	window.SetTemplate(string(html))
	
	// 添加CSS
	css, err := assets.ReadFile("assets/css/style.css")
	if err != nil {
		log.Fatal(err)
	}
	window.AddCSS(string(css))
	
	// 添加JavaScript
	js, err := assets.ReadFile("assets/js/script.js")
	if err != nil {
		log.Fatal(err)
	}
	window.AddJS(string(js))
	
	// 获取元素并添加事件
	btnSubmit := window.GetElement("btnSubmit")
	if btnSubmit != nil {
		btnSubmit.OnEvent(gowd.OnClick, onSubmit)
	}
	
	// 启动应用
	window.Run()
}

func onSubmit(sender *gowd.Element, event *gowd.EventElement) {
	// 处理提交逻辑
}

数据绑定

GOWD支持简单的数据绑定：

package main

import (
	"github.com/dtylman/gowd"
)

type User struct {
	Name  string
	Email string
}

func main() {
	user := User{
		Name:  "张三",
		Email: "zhangsan@example.com",
	}
	
	window := gowd.NewWindow("数据绑定示例")
	
	html := `
	<!DOCTYPE html>
	<html>
	<body>
		<h1>用户信息</h1>
		<div>姓名: {{.Name}}</div>
		<div>邮箱: {{.Email}}</div>
	</body>
	</html>
	`
	
	// 使用数据渲染模板
	window.SetTemplateWithData(html, user)
	
	window.Run()
}

与Go后端交互

GOWD允许从JavaScript调用Go函数：

package main

import (
	"fmt"
	"log"
	
	"github.com/dtylman/gowd"
)

func main() {
	window := gowd.NewWindow("JS与Go交互")
	
	html := `
	<!DOCTYPE html>
	<html>
	<body>
		<button onclick="callGoFunction()">调用Go函数</button>
		<script>
			function callGoFunction() {
				gowd.call("sayHello", "来自JS的消息", function(response) {
					alert(response);
				});
			}
		</script>
	</body>
	</html>
	`
	
	window.SetTemplate(html)
	
	// 注册Go函数供JS调用
	window.Expose("sayHello", func(args []string) string {
		msg := args[0]
		log.Printf("收到来自JS的消息: %s", msg)
		return "Go函数已收到: " + msg
	})
	
	window.Run()
}

打包应用

要打包为可执行文件，可以使用go build：

go build -o myapp

对于跨平台打包，可以设置GOOS和GOARCH环境变量：

# Windows
GOOS=windows GOARCH=amd64 go build -o myapp.exe

# MacOS
GOOS=darwin GOARCH=amd64 go build -o myapp

# Linux
GOOS=linux GOARCH=amd64 go build -o myapp

优缺点

优点：

使用熟悉的Web技术开发
真正的跨平台
轻量级
与Go后端无缝集成

缺点：

性能不如原生UI
应用体积较大
某些原生功能可能需要额外处理

GOWD非常适合需要快速开发跨平台桌面应用且团队熟悉Web技术的场景。对于性能要求极高的应用，可能需要考虑其他方案。