上次我们介绍了pywebview，并通过pywebview成功实现用前端语言在没有显示调用浏览器（实际是webview，也算是浏览器）的情况下实现了跟python以及操作系统的交互。那么今天这篇文章就来介绍另一个中语言，同样是通过前端语言，只不过是跟go语言进行交互，来实现没有显示调用浏览器就能实现跟操作系统等交互的的功能。
wails是一个用go语言开发的项目，依然是可以让大家方便的搭建夸平台的应用程序
这个是他的中文主页：https://wails.io/zh-Hans/
这个是github地址：https://github.com/wailsapp/wails
如果你对go语言感兴趣，那么用wails开发桌面工具是一个非常好的选择，而且，这个项目的案例也有不少，而且，功能也相当齐全。加之，go语言的简洁性，效率也很高，所以不失为不过的选择。
想要使用wails，首先要安装go语言环境
安装go的安装包：https://go.dev/dl/
然后是配置对应的环境变量和目录，这个可以网上找篇文章弄下，比较简单，不多赘述了。
注意，因为go的很多依赖包或者三方包都是通过go get方式下载，但是因为国外镜像站访问不了，所以需要改为国内的，可以用下面的方式：
1
2
3
|
#重新设置成七牛镜像源（推荐）或阿里镜像源（用原有的会比较慢）
go env -w GOPROXY=https://goproxy.cn,direct
go env -w GOPROXY=https://mirrors.aliyun.com/goproxy
|
其次是安装npm，如果上一篇文章有操作过，安装过node.js那么npm自然就有了哈。
然后运行命令安装wails：
1
|
go install github.com/wailsapp/wails/v2/cmd/wails@latest
|
以上命令安装完之后，在命令行会多出一个指令：wails，这个指令就是wails构建项目过程中的常用工具，所以如果你安装之后没有需要参照文档来看下是不是环境变量没有配置好（默认上述命令安装好之后就会出现）https://wails.io/zh-Hans/docs/gettingstarted/installation
运行 wails doctor 将检查您是否安装了正确的依赖项。 如果没有，它会就缺少的内容提供建议以帮助纠正问题，执行之后结果如图：
在文档里其实介绍的很清楚，我们来创建一个测试项目，这个项目可以直接是vue为前端框架的项目：
1
|
wails init -n myproject -t vue
|
通过以上命令建立项目之后，项目的架构就已经清晰的创建好了：
1
2
3
4
5
6
7
8
9
|
/main.go - 主应用
/frontend/ - 前端项目文件
/build/ - 项目构建目录
/build/appicon.png - 应用程序图标
/build/darwin/ - Mac 特定的项目文件
/build/windows/ - Windows 特定的项目文件
/wails.json - 项目配置
/go.mod - Go module 文件
/go.sum - Go module 校验文件
|
进入该文件夹，可以直接用wails命令直接来启动项目的开发环境：
可以看到，终端里会打印所有的执行日志，同时项目开启的一个窗口，这个窗口的布局就在前段文件夹里，其次，在输入框了输入内容，能够动态响应，而这个响应其实局势go层的函数和js层的互相调用的结果。
通过这样一个基础案例就能很轻松的了解项目的结构和关键功能，很是方便。
这个工具有很多方便的地方，以dev方式运行的时候，无论是go文件，还是前端文件的改变，都可以自动重新发起打包及部署，这样免去了手动执行重复命令的过程，效率做了提升。
说到js和go的互相通信，官网有一张非常理解的图片，可以看下，比我上篇画的图好看好多
首先，go文件需要有个类，go语言里面向对象的写法是这样的：首先定义一个结构体，定义的时候可以设定成员，其次，定义对应的方式，这个案例文件的写法如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
package main
import (
"context"
"fmt"
)
// 定义的结构体，用来传入给wails主函数，告知其要调用的结构体
// App struct
type App struct {
ctx context.Context
}
// 这是一个创建结构提到的单独的函数，与该结构体无关
// 只是wails需要而已，毕竟传入的是要实例化的对象
// NewApp creates a new App application struct
func NewApp() *App {
return &App{}
}
// 给app结构体配置的方法
// startup is called when the app starts. The context is saved
// so we can call the runtime methods
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}
// 给app结构体配置的方法
// Greet returns a greeting for the given name
func (a *App) Greet(name string) string {
return fmt.Sprintf("Hello %s, It's show time!", name)
}
|
然后再将该app结构体，在启动wails窗口的时候放入里面就可以，主代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
package main
// 引入的wails包，如果后续有需要还会继续引入wails的其他包
import (
"embed"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
// Create an instance of the app structure
app := NewApp()
// 创建主窗口，配置相应信息，绑定自己配置的类和方法
// Create application with options
err := wails.Run(&options.App{
Title: "myproject",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
OnStartup: app.startup,//准备工作
Bind: []interface{}{// 绑定app
app,
},
})
if err != nil {
println("Error:", err.Error())
}
}
|
以上绑定过程执行完之后，会在前端文件中生成对应的一个调用的文件，具体的方法都帮助你导出好了。
所以你在vue文件里要调用的时候就变得非常轻松，如图所示，只需要对应位置导入这个已经导出的组件，然后直接用这个方法就可以了。
在 wails.Run里有很多参数可以传入，具体可以看这个链接：https://wails.io/zh-Hans/docs/reference/options，包括debug也在里面。
1
2
3
|
Debug: options.Debug{
OpenInspectorOnStartup: false,//关闭 true为打开
},
|
效果如下：
我们尝试把上次在pywebview上写的代码迁移过来，用wails实现一个解析域名对应证书的功能：
依然还是用npm安装naive-ui，并配置对应组件的全局引入
然后在components文件夹里新建一个组件文件SearchDomain.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<template>
<n-card>
<n-space vertical>
<n-input-group>
<n-input :style="{ width: '50%' }" v-model:value="value" />
<n-button type="primary" ghost>
搜索
</n-button>
</n-input-group>
</n-space>
</n-card>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
</script>
|
然后再App.vue中引入这个组件并使用它即可：
1
2
3
4
5
6
7
8
|
<script setup>
import SearchDomain from './components/SearchDomain.vue';
</script>
<template>
<SearchDomain />
</template>
|
剩下就是用go编写一个获取域名证书并解析该证书各个字段的函数，祭出AI神器，获得如下代码，经过稍稍改造，变成可以导出的函数即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
package main
import (
"crypto/tls"
"crypto/x509"
"fmt"
"net"
"time"
)
func getDomainCert(domain string) ([]byte, error) {
// 创建一个TLS配置
config := &tls.Config{
InsecureSkipVerify: true, // 注意：在生产环境中不要使用此选项
}
// 创建一个TCP连接
conn, err := net.Dial("tcp", domain+":443")
if err != nil {
return nil, err
}
defer conn.Close()
// 将TCP连接包装为TLS连接
tlsConn := tls.Client(conn, config)
if err := tlsConn.Handshake(); err != nil {
return nil, err
}
// 获取TLS状态
state := tlsConn.ConnectionState()
// 获取第一个证书（通常是服务器的证书）
if len(state.PeerCertificates) == 0 {
return nil, fmt.Errorf("no certificates found")
}
cert := state.PeerCertificates[0]
return cert.Raw, nil
}
func parseCert(derCert []byte) (map[string]interface{}, error) {
// 解析证书
cert, err := x509.ParseCertificate(derCert)
if err != nil {
return nil, err
}
// 提取证书信息
certInfo := map[string]interface{}{
"证书版本": cert.Version,
"证书序列号": cert.SerialNumber.String(),
"证书中使用的签名算法": cert.SignatureAlgorithm.String(),
"颁发者": cert.Issuer.String(),
"有效期从": cert.NotBefore.Format(time.RFC3339),
"有效期到": cert.NotAfter.Format(time.RFC3339),
"证书是否已经过期": cert.NotAfter.Before(time.Now()),
"主体信息": cert.Subject.String(),
// "公钥长度": cert.PublicKey
"公钥": cert.PublicKey,
}
return certInfo, nil
}
func printCertInfo(certInfo map[string]interface{}) {
for key, value := range certInfo {
fmt.Printf("%s: %v\n", key, value)
}
}
func GetCertInfo(domain string) map[string]interface{} {
derCert, err := getDomainCert(domain)
if err != nil {
fmt.Printf("Error getting certificate for %s: %v\n", domain, err)
return nil
}
certInfo, err := parseCert(derCert)
if err != nil {
fmt.Printf("Error parsing certificate: %v\n", err)
return nil
}
return certInfo
}
|
然后将该文件放入项目文件夹中，然后在app.go这个文件了添加一个方法，并调用刚刚导出的函数即可：
1
2
3
4
|
// GetCertInfoByDomain by Domain
func (a *App) GetCertInfoByDomain(domain string) map[string]interface{} {
return GetCertInfo(domain)
}
|
然后将该方法在前端引入即可，因为每当你保存go文件的时候，就会重构并部署，对应的前端文件也会自动生成
1
2
3
4
5
6
7
8
9
10
|
import { ref } from 'vue'
import { GetCertInfoByDomain } from '../../wailsjs/go/main/App'
const Domainvalue = ref('')
const CertInfo = ref('')
function getCertInfo(Domainvalue) {
GetCertInfoByDomain(Domainvalue).then((res) => {
CertInfo.value = res
})
}
|
然后直接输入框进行调用，就可以实现如下图的效果了。
为了方便让查询的域名按照表格显示，我们添加一个数据表格来展示数据：
1
|
<n-data-table :columns="columns" :data="certInfo" :bordered="false" :row-props="rowProps" default-expand-all />
|
为了让表格可以互动，比如删除动作，我们添加了悬浮按钮的操作:
1
|
<n-dropdown placement="bottom-start" trigger="manual" :x="xRef" :y="yRef" :options="options" :show="showDropdownRef" :on-clickoutside="onClickoutside" @select="handleSelect" />
|
为了让每一次搜索能显示在表格之上，额外我又修改了对应动作发触发方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function getCertInfo(dv) {
GetCertInfoBySingleDomain(dv).then(res => {
// 把res填充到certInfo中
console.log(res)
var item = {
no: certInfo.value.length + 1,
domain: dv,
subject: res.subject,
issuer: res.issuer,
serialNumber: res.serialNumber,
notBefore: res.notBefore,
notAfter: res.notAfter,
isExpired: res.isExpired,
dnsNames: res.dnsNames,
ipAddresses: res.ipAddresses,
signatureAlgorithm: res.signatureAlgorithm,
publickeyAlgorithm: res.publicKeyAlgorithm,
}
certInfo.value.push(item)
});
}
|
最终形成了如下这个简单的效果:
GetCert.vue的完整代码放在下面，仅供参考：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
<template>
<n-space vertical>
<n-input-group>
<n-input :style="{ width: '50%' }" v-model:value="domainValue" />
<n-button type="primary" ghost @click="getCertInfo(domainValue)">
搜索
</n-button>
</n-input-group>
<n-data-table :columns="columns" :data="certInfo" :bordered="false" :row-props="rowProps" default-expand-all />
<n-dropdown placement="bottom-start" trigger="manual" :x="xRef" :y="yRef" :options="options"
:show="showDropdownRef" :on-clickoutside="onClickoutside" @select="handleSelect" />
</n-space>
</template>
<script setup>
import { ref, h, nextTick } from 'vue'
import { NButton, NTag } from 'naive-ui'
import { GetCertInfoBySingleDomain } from '../../wailsjs/go/main/App'
const domainValue = ref('')
const options = ref([
{
label: "编辑",
key: "edit"
},
{
label: () => h("span", { style: { color: "red" } }, "删除"),
key: "delete"
}
]);
const showDropdownRef = ref(false);
const xRef = ref(0);
const yRef = ref(0);
const currentRow = ref(null);
const onClickoutside = () => {
showDropdownRef.value = false;
}
const handleSelect = (row) => {
// 如果当前为删除操作，则删除当前行
if (row === "delete") {
certInfo.value = certInfo.value.filter(item => item.no !== currentRow.value);
}
showDropdownRef.value = false;
}
const rowProps = (row) => {
return {
onContextmenu: (e) => {
currentRow.value = row.no;
e.preventDefault();
console.log(e);
showDropdownRef.value = false;
nextTick().then(() => {
showDropdownRef.value = true;
xRef.value = e.clientX;
yRef.value = e.clientY;
});
}
};
}
/*
var certInfo = make(map[string]interface{})
certInfo["subject"] = parsedCert.Subject
certInfo["version"] = parsedCert.Version
certInfo["issuer"] = parsedCert.Issuer.String()
certInfo["serialNumber"] = parsedCert.SerialNumber.String()
certInfo["notBefore"] = parsedCert.NotBefore.Format(time.RFC3339)
certInfo["notAfter"] = parsedCert.NotAfter.Format(time.RFC3339)
certInfo["isExpired"] = parsedCert.NotAfter.Before(time.Now())
certInfo["dnsNames"] = parsedCert.DNSNames
certInfo["ipAddresses"] = parsedCert.IPAddresses
certInfo["signatureAlgorithm"] = parsedCert.SignatureAlgorithm.String()
certInfo["publicKeyAlgorithm"] = parsedCert.PublicKeyAlgorithm.String()
certInfo["publicKey"] = parsedCert.PublicKey
*/
const columns = ref([
{
type: "expand",
expandable: (rowData) => true,
renderExpand: (rowData) => {
return `signatureAlgorithm:${rowData.signatureAlgorithm}
publickeyAlgorithm:${rowData.publickeyAlgorithm}
publicKey:${rowData.publicKey} `;
}
},
{
title: "序号",
key: "no"
},
{
title: "域名",
key: "domain"
},
{
title: "主体",
key: "subject"
},
{
title: "颁发方",
key: "issuer"
},
{
title: "序列号",
key: "serialNumber"
},
{
title: "生效时间",
key: "notBefore"
},
{
title: "过期时间",
key: "notAfter"
},
{
title: "是否过期",
key: "isExpired",
render(row) {
return h(
NTag,
{
bordered: false,
type: row.isExpired ? 'error' : 'success',
},
{ default: () => row.isExpired ? "是" : "否" }
);
}
},
// {
// title: "DNSNames",
// key: "dnsNames",
// },
// {
// title: "IPAddresses",
// key: "ipAddresses"
// },
// {
// type: "expand",
// // title: "SignatureAlgorithm",
// key: "signatureAlgorithm",
// // expandable: true,
// },
// {
// type: "expand",
// // title: "PublicKeyAlgorithm",
// key: "publickeyAlgorithm",
// // expandable: true,
// // renderExpand: (rowData) => {
// // return `${rowData} is a good guy.`;
// // }
// }
]);
const certInfo = ref([]);
function getCertInfo(dv) {
GetCertInfoBySingleDomain(dv).then(res => {
// 把res填充到certInfo中
console.log(res)
var item = {
no: certInfo.value.length + 1,
domain: dv,
subject: res.subject,
issuer: res.issuer,
serialNumber: res.serialNumber,
notBefore: res.notBefore,
notAfter: res.notAfter,
isExpired: res.isExpired,
dnsNames: res.dnsNames,
ipAddresses: res.ipAddresses,
signatureAlgorithm: res.signatureAlgorithm,
publickeyAlgorithm: res.publicKeyAlgorithm,
}
certInfo.value.push(item)
});
}
</script>
|
以上就是对两个工具的简单介绍，后续有机会还会跟大家分享更多，随着累计，会把这个小专题的应用发在一个统一的工具里。