前言
我們使用go-sciter，就不得不提Sciter，Sciter 是一個嵌入式的 HTML/CSS/腳本引擎，旨在爲桌面應用創建一個 UI 框架層。
說簡單點就是我們通過它可以像寫GUI。
目錄
一、環境準備
1、下載sciter-sdk
第一步：從地址下載sciter-sdk
解壓，找到
sciter-sdk\bin\64\sciter.dll
複製到
c:\Windows\System32
TIPS：
上面的請根據你的系統選擇相應文件
2、安裝MingW
第二步：由於使用到cgo，所以Window下需要安裝Mingw
下載地址：
https://sourceforge.net/projects/mingw/files/
安裝可以參考cygwin
也可以直接下載對應文件，把mingw\bin，添加到path裏。
3 、安裝go-sciter
go get -u github.com/sciter-sdk/go-sciter
如果是設置了 gomodule111=on的注意參考這篇：
輸入以下代碼：
go mod init go-sciter
go mod edit -require github.com/sciter-sdk/go-sciter@latest
二、開始編寫GUI
1、 Hello World
demo_one.go代碼如下：
package main
import (
"github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
"log"
)
func main() {
//創建window窗口
//參數一表示創建窗口的樣式
//SW_TITLEBAR 頂層窗口，有標題欄
//SW_RESIZEABLE 可調整大小
//SW_CONTROLS 有最小/最大按鈕
//SW_MAIN 應用程序主窗口，關閉後其他所有窗口也會關閉
//SW_ENABLE_DEBUG 可以調試
//參數二表示創建窗口的矩形
w, err := window.New(sciter.SW_TITLEBAR|
sciter.SW_RESIZEABLE|
sciter.SW_CONTROLS|
sciter.SW_MAIN|
sciter.SW_ENABLE_DEBUG,
nil);
if err != nil {
log.Fatal(err);
}
//加載文件
w.LoadFile("demo1.html");
//設置標題
w.SetTitle("你好，世界");
//顯示窗口
w.Show();
//運行窗口，進入消息循環
w.Run();
}
demo_one.html代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<h1>
Let's Start.
</h1>
<body>
Hello World!
</body>
</html>
2、表單測試
demo_two.go代碼如下：
package main
import (
"github.com/sciter-sdk/go-sciter"
"github.com/sciter-sdk/go-sciter/window"
"log"
)
func main() {
//創建window窗口
//參數一表示創建窗口的樣式
//SW_TITLEBAR 頂層窗口，有標題欄
//SW_RESIZEABLE 可調整大小
//SW_CONTROLS 有最小/最大按鈕
//SW_MAIN 應用程序主窗口，關閉後其他所有窗口也會關閉
//SW_ENABLE_DEBUG 可以調試
//參數二表示創建窗口的矩形
w, err := window.New(sciter.SW_TITLEBAR|
sciter.SW_RESIZEABLE|
sciter.SW_CONTROLS|
sciter.SW_MAIN|
sciter.SW_ENABLE_DEBUG,
//給窗口設置個大小
&sciter.Rect{Left: 0, Top: 0, Right: 500, Bottom: 500});
if err != nil {
log.Fatal(err);
}
//加載文件
w.LoadFile("demo2.html");
//設置標題
w.SetTitle("表單");
//顯示窗口
w.Show();
//運行窗口，進入消息循環
w.Run();
}
demo_two.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table td {
padding: 10px;
border: 1px solid #ccc;
}
table td:first-child {
white-space:nowrap;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>用戶名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>暱稱：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password"></td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" value="0">男
<input type="radio" value="1">女
</td>
</tr>
<tr>
<td>愛好：</td>
<td>
<input type="checkbox" value="">看書
<input type="checkbox" value="">打球
<input type="checkbox" value="">旅遊
</td>
</tr>
<tr>
<td>簡介：</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>