《真·簡單》Golang 輕量級桌面程式 wails 庫(聖誕節限定)
Golang 輕量級桌面程式 wails2 教學
推薦理由
不依賴 cgo! 不依賴 cgo! 不依賴 cgo!(參考文獻:https://wails.io/blog#no-cgo-dependency)真的不依賴 cgo,且跨平臺,原生渲染 無嵌入式瀏覽器,輕量級,生成的檔案很小,而且只有一個可執行檔案就可執行。
功能介紹
- 後端使用標準 Go
- 使用任意前端技術構建 UI 介面
- 快速為您的 Go 應用生成 Vue、Vuetify、React 前端程式碼
- 通過簡單的繫結命令將 Go 方法暴露到前端
- 使用原生渲染引擎 - 無嵌入式瀏覽器
- 共享事件系統
- 原生檔案系統對話方塊
- 強大的命令列工具
- 跨多個平臺
使用指南
本次教學在 windows 下進行。
安裝
1、首先要安裝三個必要的東西:
npm: https://nodejs.org/en/download/
webviews2: https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/#download-section (下載常青版載入程式
,記得安裝是一定用管理員安裝)
*upx: https://github.com/upx/upx/releases/tag/v3.96 (下載後:upx-3.96-win64.zip,然後放入環境變數)
2、golang版本必須是1.17及其以上,安裝wails工具:
go install github.com/wailsapp/wails/v2/cmd/wails@latest
3、wails doctor (用此命令檢視是否已安裝完整必要依賴) 如下圖:
目錄結構概要:
/main.go - 主應用
/frontend/ - 前端專案檔案
/build/ - 專案構建目錄
/build/appicon.png - 應用程式圖示
/build/darwin/ - Mac 特定的專案檔案
/build/windows/ - Windows 特定的專案檔案
/wails.json - 專案配置
/go.mod - Go 模組檔案
/go.sum - Go 模組校驗檔案
frontend目錄沒有特定於 Wails 的內容,可以是您選擇的任何前端專案。
build目錄在構建過程中使用。這些檔案可以修改以自定義您的構建。如果檔案從構建目錄中刪除,將重新生成預設版本。
go.mod中的預設模組名稱是“changeme”。您應該將其更改為更合適的內容。
開始做我們的聖誕樹
1、首先,利用 wails 工具建立一個專案:
wails init -n 專案名稱
2、然後,我們開始寫我們們的 main:(看到 go:embed 註解就知道為什麼要用 go1.17 及其以上的版本了吧)
package main
import (
"embed"
"log"
"github.com/wailsapp/wails/v2/pkg/options/mac"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/logger"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/windows"
)
//go:embed frontend/src
var assets embed.FS
//go:embed build/appicon.png
var icon []byte
func main() {
// 建立一個APP結構體例項
app := NewApp()
// 給這個APP設定引數
err := wails.Run(&options.App{
Title: "GoCN祝天下所有的Gopher聖誕節快樂",
Width: 720,
Height: 570,
MinWidth: 720,
MinHeight: 570,
MaxWidth: 1280,
MaxHeight: 740,
DisableResize: false,
Fullscreen: false,
Frameless: false,
StartHidden: false,
HideWindowOnClose: false,
RGBA: &options.RGBA{R: 33, G: 37, B: 43, A: 255},
Assets: assets,
LogLevel: logger.DEBUG,
OnStartup: app.startup,
OnDomReady: app.domReady,
OnShutdown: app.shutdown,
Bind: []interface{}{
app,
},
// Windows平臺特定選項
Windows: &windows.Options{
WebviewIsTransparent: false, // 背景是否半透明
WindowIsTranslucent: false, // 導航條是否半透明
DisableWindowIcon: false, // 是否關閉視窗上的圖示
},
Mac: &mac.Options{
TitleBar: mac.TitleBarHiddenInset(),
WebviewIsTransparent: true,
WindowIsTranslucent: true,
About: &mac.AboutInfo{
Title: "Vanilla Template",
Message: "Part of the Wails projects",
Icon: icon,
},
},
})
if err != nil {
log.Fatal(err)
}
}
3、寫我們們的前端,在 frontend/src/index.html 下寫入下面的程式碼(我也是抄h 阿泉的):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>聖誕節快樂</title>
<meta charset="utf-8">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
canvas {
width: 100%;
height: 100%;
}
div {
margin: 0;
padding: 0;
border: 0;
}
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 27px;
background-color: white;
color: black;
text-align: center;
line-height: 25px;
}
a {
color: black;
text-decoration: none;
border-bottom: 1px dashed black;
}
a:hover {
border-bottom: 1px solid red;
}
.previous {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.green {
color: green;
}
.red {
color: red;
}
textarea {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
padding-bottom: 20px;
}
.block-outer {
float: left;
width: 22%;
height: 100%;
padding: 5px;
border-left: 1px solid black;
margin: 30px 3px 3px 3px;
}
.block-inner {
height: 68%;
}
.one {
border: 0;
}
</style>
</head>
<body marginwidth="0" marginheight="0">
<canvas id="c" height="800" width="300">
<script>
var collapsed = true;
function toggle() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
if (collapsed) {
fs.rows = '250px,*';
// enable resizing of frames in firefox/opera
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} else {
fs.rows = '30px,*';
// disable resizing of frames in firefox/opera
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
collapsed = !collapsed;
}
</script>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth; // fix bug in chrome.
</script>
<script>
// start of submission //
M = Math;
Q = M.random;
J = [];
U = 16;
T = M.sin;
E = M.sqrt;
for (O = k = 0; x = z = j = i = k < 200;) with (M[k] = k ? c.cloneNode(0) : c) {
width = height = k ? 32 : W = 446;
with (getContext('2d')) if (k > 10 | !k) for (font = '60px Impact', V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '205,205,215,.15)' : V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#cca', i < 7;) beginPath(fill(arc(U - i / 3, 24 - i / 2, k == 13 ? 4 - (i++) / 2 : 8 - i++, 0, M.PI * 2, 1))); else for (; x = T(i), y = Q() * 2 - 1, D = x * x + y * y, B = E(D - x / .9 - 1.5 * y + 1), R = 67 * (B + 1) * (L = k / 9 + .8) >> 1, i++ < W;) if (D < 1) beginPath(strokeStyle = V + R + ',' + (R + B * L >> 0) + ',40,.1)'), moveTo(U + x * 8, U + y * 8), lineTo(U + x * U, U + y * U), stroke();
for (y = H = k + E(k++) * 25, R = Q() * W; P = 3, j < H;) J[O++] = [x += T(R) * P + Q() * 6 - 3, y += Q() * U - 8, z += T(R - 11) * P + Q() * 6 - 3, j / H * 20 + ((j += U) > H & Q() > .8 ? Q(P = 9) * 4 : 0) >> 1]
}
setInterval(function G(m, l) {
A = T(D - 11);
if (l) return (m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
a.clearRect(0, 0, W, W);
J.sort(G);
for (i = 0; L = J[i++]; a.drawImage(M[L[3] + 1], 207 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {
if (i == 2e3) a.fillText('Merry Christmas!', U, 412);
if (!(i % 7)) a.drawImage(M[13], ((157 * (i * i) + T(D * 5 + i * i) * 5) % W) >> 0, ((113 * i + (D * i) / 60) % (290 + i / 99)) >> 0);
}
D += .02
}, 1)
// end of submission //
</script>
</body>
</html>
4、在當前目錄下用命令列開啟開發者熱載入工具檢視效果:
wails dev
效果圖來啦,提前祝各位 2021 聖誕節快樂~:
5、當然我們也可以打包成自己的可執行二進位制檔案喲:
wails build
生成的檔案放在了 build/bin 下。
總結
其實之前我也知道有不少的 go 桌面應用庫,可要麼就是效率低,要麼就是生產的二進位制檔案太大,但 wails 似乎讓我看到了新希望,很多簡單的桌面級小應用可能會因此而誕生更多。
參考資料
更多原創文章乾貨分享,請關注公眾號
- 加微信實戰群請加微信(註明:實戰群):gocnio
相關文章
- Golang wails2 輕量級跨端桌面解決方案GolangAI跨端
- 「趣圖」第四張圖,程式設計師的聖誕節願望清單,過於真實,聖誕老人很難辦啊程式設計師
- 程式設計師的聖誕節--送她一顆聖誕樹(附原始碼)程式設計師原始碼
- 程式設計師的聖誕節–送她一顆聖誕樹(附原始碼)程式設計師原始碼
- Golang wails2 跨端桌面解決方案GolangAI跨端
- AntD 聖誕節彩蛋事件事件
- Go 實戰|使用 Wails 構建輕量級的桌面應用:仿微信登入介面 DemoGoAI
- 「程式設計師小漫畫」 之 程式設計師眼中的聖誕節和萬聖節程式設計師
- Clash聖誕節取消!《部落衝突》&《皇室戰爭》“滾木聖誕節” 狂歡開場
- 聖誕節快到了,快來裝飾你的Mac電腦桌面吧!Mac
- 簡單小清新植物點綴綠色花邊邊框,聖誕節花環節日PNG素材
- 聖誕節到了!!你的桌面下雪了嗎?? - Qt趣味開發之讓你的桌面下雪QT
- 聖誕節快到啦!Mac電腦系統如何在聖誕節讓電腦螢幕下雪?Mac
- 聖誕節的python豪華版聖誕樹,包括雪花彩燈文字背景Python
- Golang web filter 輕量級實現GolangWebFilter
- PetaPoco .net 輕量級orm簡單實用教程ORM
- 聖誕夜,讓你的程式碼都變成聖誕樹吧!
- 快到聖誕節了,用python來給自己的頭像加上一頂聖誕帽Python
- Pekwm:一個輕量級的 Linux 桌面Linux
- 輕量級多級選單控制框架程式(C語言)框架C語言
- RxRouter -- 一個輕量級、簡單、智慧並且強大的安卓路由庫安卓路由
- JAVA輕量級鎖簡介Java
- 桌面輕量級資料處理指令碼指令碼
- C# 輕量級 ORM 框架 NPoco 的簡單應用C#ORM框架
- 唯美紅色聖誕節背景素材,節日氣氛盡顯
- 輕量級超級簡單的element的layout柵格化佈局
- 神奇的C語言輸出12天聖誕節歌詞程式碼C語言
- 輕量級網站建設jsonp跨域簡單例項網站JSON跨域單例
- 前端輕量級資料庫mongodb前端資料庫MongoDB
- 聖誕節如何打造新穎的郵件營銷?
- 聖誕小鹿?VScodeVSCode
- 聖誕樹--pythonPython
- 聖誕快樂
- SqueezeNet/SqueezeNext簡述 | 輕量級網路
- Fastflow——基於golang的輕量級工作流框架ASTGolang框架
- virtono聖誕節月付0.68歐元VPS註冊教程
- Sensor Tower:2019年聖誕節App Store收入1.93億美元APP
- OnePoll:聖誕節拆禮物平均每人用半小時