nodejs的GUI基础electron（3）
Yu Lei 2019-4-12
nodejs
electron
electron 的深入
系统托盘
创建任务栏图标，并且给图标添加 监听事件，使用 tray 模块，再主进程中
const { Menu, Tray, app } = require('electron')
const path = require('path')
const linkmenu = require('../linkmenutest')
const m = Menu.buildFromTemplate(linkmenu)
Menu.setApplicationMenu(m)
const appIcon = new Tray(path.resolve(__dirname, '../static/lover.png')) //开启右下角图标并且设置其显示图标
const icon = Menu.buildFromTemplate([
//设置其右键菜单
{
label: '设置',
click: () => {
console.log('setting')
}
},
{
label: '退出',
click: () => {
if (process.platform !== 'darwin') {
app.quit()
}
}
},
{
label: '升级',
click: () => {
console.log('update')
}
}
])
let index = 0
appIcon.setContextMenu(icon) //设置右键惨淡
appIcon.setToolTip('yinyinying') //设置鼠标进入显示的标题
let timer = setInterval(() => {
appIcon.setImage(path.resolve(__dirname, '../static/lover.png'))
}, 500)
module.exports = win222 => {
//再主文件中导入的时候传入主渲染进程对象
win222.on('close', e => {
if (!win222.isFocused()) {
//如果不是再最前端则关闭
win222 = null
} else {
//否则隐藏
e.preventDefault() //阻止窗口的关闭事件
win222.hide()
}
})
appIcon.on('double-click', () => {
//右下角双击打开应用
win222.show()
})
appIcon.on('mouse-enter', () => {
//鼠标进入 停止体标删除
clearInterval(timer)
appIcon.setImage(path.resolve(__dirname, '../static/lover.png'))
index = 0
})
appIcon.on('mouse-leave', () => {
//鼠标离开开始闪烁图标
timer = setInterval(() => {
index++
if (index % 2 === 0) appIcon.setImage(path.resolve(__dirname, '../static/lover.png'))
else appIcon.setImage(path.resolve(__dirname, '../static/empty.ico'))
}, 500)
})
}
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
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
软件消息通知
消息通知是基于 h5 的 notification 来实现的，再渲染进程中
const path = require('path')
const btn = document.querySelector('#message')
btn.onclick = () => {
console.log('111')
const option = {
title: '通知',
body: 'aasdasdasdasd',
icon: path.resolve(__dirname, 'electron-demo03', '../static/favicon2.ico')
}
let notification = new Notification(option.title, option) //通知弹窗组件
notification.onclick = () => {
console.log('点击了')
}
}
window.addEventListener('online', () => {
//监听网络变化 有网
console.log('有网络了')
})
window.addEventListener('offline', () => {
//监听网络变化 断网
console.log('断开网络了')
let notification = new Notification('断网提示', {
title: '断网提示',
body: '网络以断开请重新链接',
icon: path.resolve(__dirname, 'electron-demo03', '../static/favicon2.ico')
})
notification.onclick = () => {
console.log('点击了')
}
})
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
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
electron 全局快捷键模块
全局快捷键
const { globalShortcut, app } = require('electron')
const template = {
'ctrl+e': () => {
console.log('ctrl+e')
}
}
app.on('ready', () => {
for (const key in template) {
if (template.hasOwnProperty(key)) {
globalShortcut.register(key, template[key]) //注册全局快捷键
console.log(globalShortcut.isRegistered(key)) //返回true 或者false 确认是否绑定成功
}
}
//检测注册的全局快捷键是否成功
})
app.on('will-quit', () => {
//app 退出之前触发的钩子
for (const key in template) {
if (template.hasOwnProperty(key)) {
globalShortcut.unregister(key) //解绑全局快捷键
console.log(globalShortcut.isRegistered(key))
}
}
//推出的额时候 取消全局快捷键
})
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
剪切板事件
clipboard 模块 可以再主进程也可以再渲染进程中使用
但是再渲染进程使用比较方便
const path = require('path')
const {
clipboard,//剪贴版模块
nativeImage//内置的本地图片模块
} = require('electron')
window.onload = function() {
document.querySelector('#number').onclick = function() {
const test = this.innerText
clipboard.writeText(test)
console.log(11)
}
document.querySelector('#copy').onclick = function() {
document.querySelector('#message').value = clipboard.readText()
}
document.querySelector('#copyImage').onclick = function() {
//从本地路径创建一张nvtive 图片
const impath = nativeImage.createFromPath(path.resolve(__dirname, 'electrom-demo03', '../static/favicon2.ico'))
console.log(impath)
clipboard.writeImage(impath) //writeimage 内部的图片需要时 路径或者 nativeimage 格式
}
document.querySelector('#parseImage').onclick = function() {
const image = new Image()
image.src = clipboard.readImage().toDataURL()//从图片转换成base64 格式
console.log(image.src)
document.querySelector('#imageBox').appendChild(image)
}
}
# html
<div>
<span>
点击复制
</span>
<span id="number">
1111111111111111111111111111111
</span>
</div>
<input type="text" id="message">
<button id="copy">点击粘贴</button>
<button id="copyImage"> 点击复制图片</button>
<div style="border: 1px solid salmon;width: 200px;height: 200px;" id="imageBox"></div>
<button id="parseImage"> 点击复制图片</button>
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
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
本地化
通过 app.getLocale()来获取本地值 Electron 使用 Chromium 的 l10n_util 库来获取 locale
console.log(app.getLocale(), '================== app.getLocale()')
// zh-CN ================== app.getLocale()
1
2
2
screen 模块
检索有关屏幕大小、显示器、光标位置等的信息。
//初始化屏幕大小 为全屏
const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize
win = new Browerwindow({
width,
height
})
1
2
3
4
5
6
2
3
4
5
6