我們使用go-sciter,就不得不提Sciter,Sciter 是一個嵌入式的 HTML/CSS/腳本引擎,旨在為桌面應用創建一個 UI 框架層。
說簡單點就是我們通過它可以像寫html,css那樣寫桌面UI。
一、環境准備
第一步:從https://sciter.com/download/地址下載sciter-sdk
解壓,找到sciter-sdk\bin\64\sciter.dll復制到c:\windows\system32
注意上面的請根據你自已的系統選擇相應文件
第二步:由於使用到cgo,所以window下需要安裝mingw或tdm-gcc(建議安裝tdm-gcc)
下載地址:
https://sourceforge.net/projects/mingw/files/
下載地址:
http://tdm-gcc.tdragon.net/download
下載:mingw-get-setup.exe或tdm64-gcc-5.1.0-2.exe
安裝,然后把mingw\bin或tdm-gcc\bin加入到環境變量中
第三步:cmd進入gopath目錄並運行
go get -x github.com/sciter-sdk/go-sciter
二、通過html,css編寫簡單UI
demo1.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(); }
demo1.html代碼如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> 你好,世界 </body> </html>
如果出現亂碼請把demo1.html文件轉成gb2312並加上<meta charset="gb2312">或者轉成UTF-8+BOM(注意是加BOM,加BOM,加BOM)。
三、寫個表單的UI
demo2.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(); }
demo2.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="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>
是不是感覺很方便,我個人覺得未來這種方式寫UI會成為主流,傳統的過於繁瑣和麻煩了。
關於一些問題的說明:
1、w.LoadFile() 無法加載相對路徑的文件,請確保你運行程序的目錄是否正確。
比如新版本的GoLand,在你右鍵Run時,程序所指向的目錄是你New Project時設置Location的目錄,而不是此時go腳本所在的目錄。