Golang跨平台桌面UI开发HTML/CSS/脚本引擎插件库go-sciter的使用

简介

go-sciter是Sciter的Golang绑定库，使用cgo实现。Sciter是一个嵌入式的HTML/CSS/脚本引擎，可用于现代UI开发。Web设计师和开发者可以利用他们在创建现代外观桌面应用程序方面的经验和专业知识。

特性

go-sciter支持大多数Sciter API，包括：

HTML字符串/文件加载
DOM操作/回调/事件处理
DOM状态/属性处理
自定义资源加载
Sciter行为
Sciter选项
Sciter值支持
NativeFunctor（用于sciter脚本）

安装要求

目前仅支持Go 1.10或更高版本。

安装步骤

从Sciter官网下载sciter-sdk

将sciter运行时库提取到系统PATH中

Windows: 将bin\64\sciter.dll复制到c:\windows\system32即可

Linux:

cd sciter-sdk/bin.lnx/x64
export LIBRARY_PATH=$PWD
echo $PWD >> libsciter.conf
sudo cp libsciter.conf /etc/ld.so.conf.d/
sudo ldconfig
ldconfig -p | grep sciter  # 应该打印libsciter-gtk.so位置

OSX:

cd sciter-sdk/bin.osx/
export DYLD_LIBRARY_PATH=$PWD

设置CGO的GCC环境
- Windows用户推荐使用mingw64-gcc（5.2.0和7.2.0已测试）
- Linux需要gcc(4.8或以上)和gtk±3.0
执行go get -x github.com/sciter-sdk/go-sciter
运行示例并享受:)

示例代码

下面是一个简单的go-sciter使用示例：

package main

import (
	"github.com/sciter-sdk/go-sciter"
	"github.com/sciter-sdk/go-sciter/window"
	"log"
)

func main() {
	// 创建窗口
	w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect)
	if err != nil {
		log.Fatal(err)
	}
	
	// 加载HTML文件
	err = w.LoadFile("example.html")
	if err != nil {
		log.Fatal(err)
	}
	
	// 设置窗口标题
	w.SetTitle("Go-Sciter示例")
	
	// 定义处理点击事件的函数
	w.DefineFunction("handleClick", func(args ...*sciter.Value) *sciter.Value {
		log.Println("按钮被点击了!")
		return sciter.NullValue()
	})
	
	// 显示窗口并运行
	w.Show()
	w.Run()
}

对应的HTML文件(example.html):

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Go-Sciter示例</h1>
    <p>这是一个使用go-sciter创建的简单桌面应用</p>
    <button onclick="handleClick()">点击我</button>
</body>
</html>

Sciter版本支持

目前支持Sciter版本4.0.0.0及更高版本。

关于Sciter

Sciter是一个嵌入式的HTML/CSS/脚本引擎，用于现代UI开发。Web设计师和开发者可以重用他们在创建现代外观桌面应用程序方面的经验和专业知识。

Sciter虽然不是开源的，但它是一个使用完整Web技术栈的优秀桌面UI开发环境，体积小（小于5MB），特别是与CEF、Node Webkit和Atom Electron相比。

更多关于golang跨平台桌面UI开发HTML/CSS/脚本引擎插件库go-sciter的使用的实战教程也可以访问 https://www.itying.com/category-94-b0.html

songsunli 1楼

更多关于golang跨平台桌面UI开发HTML/CSS/脚本引擎插件库go-sciter的使用的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html

Go-Sciter: Golang跨平台桌面UI开发指南

Go-Sciter是一个强大的Golang绑定库，用于Sciter引擎，允许开发者使用HTML/CSS和JavaScript/TIScript来构建跨平台的桌面应用程序界面。

什么是Sciter?

Sciter是一个轻量级的、可嵌入的HTML/CSS/UI引擎，它允许开发者使用Web技术（HTML/CSS/JavaScript）来构建原生桌面应用程序的界面。Sciter引擎被设计为：

轻量级（约5MB）
高性能
跨平台（Windows, macOS, Linux）
支持现代CSS3特性
内置JavaScript/TIScript引擎

Go-Sciter安装

首先需要安装Go-Sciter库：

go get github.com/sciter-sdk/go-sciter

注意：你还需要下载对应平台的Sciter SDK动态库文件，并将其放在可执行文件同级目录或系统库路径中。

基础示例

下面是一个简单的Go-Sciter应用程序示例：

package main

import (
	"github.com/sciter-sdk/go-sciter"
	"github.com/sciter-sdk/go-sciter/window"
	"log"
)

func main() {
	// 创建窗口
	w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect)
	if err != nil {
		log.Fatal(err)
	}
	
	// 加载HTML文件
	err = w.LoadFile("ui.html")
	if err != nil {
		log.Fatal(err)
	}
	
	// 设置窗口标题
	w.SetTitle("Go-Sciter示例")
	
	// 定义Go函数供HTML调用
	w.DefineFunction("goFunc", func(args ...*sciter.Value) *sciter.Value {
		if len(args) > 0 {
			log.Println("从JS/TIScript调用Go函数，参数:", args[0].String())
		}
		return sciter.NewValue("Hello from Go!")
	})
	
	// 显示窗口并运行消息循环
	w.Show()
	w.Run()
}

对应的HTML文件(ui.html)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Go-Sciter示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        button {
            padding: 10px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <h1>Go-Sciter示例</h1>
    <p>这是一个使用HTML/CSS构建的桌面应用界面</p>
    <button onclick="callGoFunc()">调用Go函数</button>
    
    <script type="text/tiscript">
        function callGoFunc() {
            var result = view.goFunc("来自JS的参数");
            stdout.println("Go函数返回: " + result);
        }
    </script>
</body>
</html>

主要功能特性

1. 双向通信

Go-Sciter支持Go和脚本引擎之间的双向通信：

// Go调用JavaScript/TIScript函数
w.Eval(`
    function jsFunc(param) {
        return "JS received: " + param;
    }
`)

result, _ := w.Call("jsFunc", sciter.NewValue("Hello from Go!"))
fmt.Println(result.String()) // 输出: JS received: Hello from Go!

2. DOM操作

// 获取根元素
root, _ := w.GetRootElement()

// 创建新元素
div, _ := sciter.CreateElement("div", "Hello from Go!")
div.SetAttr("id", "go-created")

// 添加到DOM
root.Append(div)

// 查找元素并修改样式
elem, _ := root.SelectById("go-created")
elem.SetStyle("color", "red")

3. 事件处理

// 在Go中处理HTML元素事件
button, _ := root.SelectById("myButton")
button.OnClick(func() {
    fmt.Println("按钮被点击了!")
    return true
})

4. 资源嵌入

可以将HTML/CSS/JS资源嵌入到Go可执行文件中：

//go:embed ui.html style.css script.js
var assets embed.FS

// 加载嵌入的资源
htmlContent, _ := assets.ReadFile("ui.html")
w.LoadHtml(string(htmlContent), "/")

高级用法

自定义行为

// 定义自定义元素行为
type MyBehavior struct {
    *sciter.EventHandler
}

func (b *MyBehavior) OnEvent(evt *sciter.Event) bool {
    switch evt.Code {
    case sciter.SUBSCRIPTIONS_REQUEST:
        // 订阅事件
        evt.Handler = b
        return evt.Subscribe(sciter.EventType("click"))
    case sciter.HANDLE_CLICK:
        fmt.Println("自定义元素被点击")
        return true
    }
    return false
}

// 注册行为
w.DefineBehavior("my-behavior", func() *sciter.EventHandler {
    return &MyBehavior{}
})

数据绑定

// 创建数据模型
model := sciter.NewValue()
model.Set("title", sciter.NewValue("Go-Sciter应用"))
model.Set("count", sciter.NewValue(0))

// 绑定到窗口
w.SetVariable("model", model)

// HTML中使用数据绑定
/*
<div>
    <h1>{{title}}</h1>
    <p>计数: {{count}}</p>
    <button onclick="++model.count">增加</button>
</div>
*/

跨平台注意事项

样式差异：不同平台下默认样式可能略有不同，建议明确指定所有样式属性
字体渲染：各平台字体渲染效果可能不同，考虑嵌入字体
路径处理：使用path/filepath处理文件路径，确保跨平台兼容性
系统集成：对于系统托盘、菜单等特性，可能需要平台特定代码

性能优化建议

避免频繁的Go-JS互操作
使用CSS动画而非JavaScript动画
对于复杂UI，考虑使用虚拟列表
将长时间运行的任务放在Go协程中

总结

Go-Sciter为Golang开发者提供了一个强大的工具，可以使用熟悉的Web技术构建跨平台的桌面应用程序界面。它结合了Go的后端处理能力和Sciter的前端渲染能力，是构建现代桌面应用的优秀选择。

相比Electron等方案，Go-Sciter生成的应用程序更小、启动更快、内存占用更低，同时仍然保持了使用Web技术开发UI的便利性。

golang跨平台桌面UI开发HTML/CSS/脚本引擎插件库go-sciter的使用