基于Electron的touchbar开发

Electron使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的一个框架,本人之前写的一个放烟花的程序fireworks-cool就是基于这套框架来做的。electron在跨平台应用方面做的还是挺好的,著名的编辑器VS CodeAtom都是使用Electron来开发的。有了Node,前端工程师可以直接干后端的事了;有了Electron,前端工程师可以直接干桌面应用工程师的事了。昨天研究这个touchbar,真心感觉到了JavaScript的无所不能属性,明天我们开发一个操作系统😊。
吹了这么多Electron,我们再说说touchbar吧。我觉得touchbarMac上一个鸡肋的功能,我在使用Mac的时候很少去关注touchbar。昨天忽然想到Electron可以开发桌面应用,那么是否可以做touchbar相关的功能呢?于是看了下它的官方文档,发现确实是可以开发touchbar相关的功能,不过目前Electrontouchbar还是实验性的API,后续有可能更改也有可能去掉,不过并不影响我们先玩玩它。玩玩它后,你会发现鸡肋的touchbar还是有点意思的。当然touchbarMac特有的硬件,如果不是Mac的小伙伴就体验不了本章的内容了。


运行官方的例子

官方给了一个老虎机的一个例子,这个例子还是很有趣的,感兴趣的可以直接点击这里查看。如果连接打不开,可以直接看下面的代码,我已经帮你拷贝好了:

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
const { app, BrowserWindow, TouchBar } = require('electron')

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

// Reel labels
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()

// Spin result label
const result = new TouchBarLabel()

// Spin button
const spin = new TouchBarButton({
label: '🎰 Spin',
backgroundColor: '#7851A9',
click: () => {
// Ignore clicks if already spinning
if (spinning) {
return
}

spinning = true
result.label = ''

let timeout = 10
const spinLength = 4 * 1000 // 4 seconds
const startTime = Date.now()

const spinReels = () => {
updateReels()

if ((Date.now() - startTime) >= spinLength) {
finishSpin()
} else {
// Slow down a bit on each spin
timeout *= 1.1
setTimeout(spinReels, timeout)
}
}

spinReels()
}
})

const getRandomValue = () => {
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
return values[Math.floor(Math.random() * values.length)]
}

const updateReels = () => {
reel1.label = getRandomValue()
reel2.label = getRandomValue()
reel3.label = getRandomValue()
}

const finishSpin = () => {
const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
if (uniqueValues === 1) {
// All 3 values are the same
result.label = '💰 Jackpot!'
result.textColor = '#FDFF00'
} else if (uniqueValues === 2) {
// 2 values are the same
result.label = '😍 Winner!'
result.textColor = '#FDFF00'
} else {
// No values are the same
result.label = '🙁 Spin Again'
result.textColor = null
}
spinning = false
}

const touchBar = new TouchBar({
items: [
spin,
new TouchBarSpacer({ size: 'large' }),
reel1,
new TouchBarSpacer({ size: 'small' }),
reel2,
new TouchBarSpacer({ size: 'small' }),
reel3,
new TouchBarSpacer({ size: 'large' }),
result
]
})

let window

app.once('ready', () => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hiddenInset',
width: 200,
height: 200,
backgroundColor: '#000'
})
window.loadURL('about:blank')
window.setTouchBar(touchBar)
})

运行上面的代码:

  1. 建立一个文件夹,比如touchbar-demo,再创建一个文件touchbar.js,将上面的代码拷贝进去。
  2. 当前目录下,在命令行输入下面的内容来安装Electron

    ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron

  3. 命令行执行下面内容以启动:

    ./node_modules/.bin/electron touchbar.js

你可以看到我们安装Electron的时候加了一个ELECTRON_MIRROR的参数,为什么要带这个参数呢?其实在npm install electron的时候会下载electron依赖,这个依赖有一个postinstall的脚本,该脚本会继续从github下载当前平台的Electron应用程序,由于国内对国外网站的限制,虽然github是可以访问的,但是网速不咋样。所以直接访问的话往往会有下载失败的问题(即使npm的源切换到taobao也经常出现问题,因为下载Electron应用程序是走github的下载地址的,下载地址具体请看这里)。

通过上述三个步骤,实例代码基本上可以跑通了,大概效果如下,是不是很有意思呢?

运行官方示例

组件

通过上面的代码我们可以看到,通过new TouchBar()创建了一个TouchBar的实例,然后调用BrowserWindow对象的setTouchBar()方法就可以了,TouchBar的构造方法的参数是一个对象,这个对象可选字段有2个,一个是items,另一个是escapeItemitems是一个数组,用来添加touchbar中间部分的组件。escapeItem是单个的一个组件,用来替换touchbar左侧的esc按钮。
现在我们新建一个index.js,运行下面代码(命令行输入./node_modules/.bin/electron index.js),看看效果:

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
const { app, BrowserWindow, TouchBar } = require('electron')

const { TouchBarLabel, TouchBarButton } = TouchBar

const touchBar = new TouchBar({
items: [
new TouchBarButton({
label: '😇',
}),
new TouchBarButton({
label: '😁',
backgroundColor: '#ff0000'
}),
new TouchBarButton({
label: '🤣',
backgroundColor: '#00ff00'
}),
new TouchBarButton({
label: '😂',
backgroundColor: '#0000ff'
}),
new TouchBarLabel({
label: 'TouchBarLabel就是文字',
textColor: '#AACCEE'
})
],
escapeItem: new TouchBarButton({
label: '这里原本是退出键',
icon: './img.jpeg',
iconPosition: 'left',
click:()=>{
console.log('点了也不会退出的!因为我就没写退出的事件');
}
})
})

let window

app.once('ready', () => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hiddenInset',
width: 200,
height: 200,
backgroundColor: '#000'
})
window.loadURL('about:blank')
window.setTouchBar(touchBar)
})

运行结果如下:

items与escapeItem

代码中第29行的图标点击这里下载

上面使用了2个组件,一个是TouchBarButton,代表的是一个按钮,另一个是TouchBarLabel,代表的是一个简单的标签。需要注意的是TouchBarLabel只是单纯的文字,不支持点击事件(当然你使用的时候有可能API已经支持了),它的参数也很简单,就是上面例子中的那2个,TouchBarButton是支持点击事件的,如上面escapeItem中的click方法。

Electron所支持的所有组件(写本章的时候)有:

  1. TouchBarButton
  2. TouchBarLabel
  3. TouchBarColorPicker
  4. TouchBarGroup
  5. TouchBarPopover
  6. TouchBarScrubber
  7. TouchBarSegmentedControl
  8. TouchBarSlider
  9. TouchBarSpacer

这里给一个简单的例子展示一下其中的几个组件,剩下的你可以自己去尝试一下:

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
const { app, BrowserWindow, TouchBar } = require('electron')

const { TouchBarColorPicker, TouchBarSpacer, TouchBarScrubber, TouchBarSegmentedControl, TouchBarSlider } = TouchBar

const touchBar = new TouchBar({
items: [
new TouchBarColorPicker(),
new TouchBarSpacer({
size: 'small'
}),
new TouchBarScrubber({
items: [{label:'第一个'},{label:'第二个'}],
selectedStyle: 'outline'
}),
new TouchBarSpacer({
size: 'large'
}),
new TouchBarSegmentedControl({
segments:[{label:'第一个'},{label:'第二个'}],
mode: 'buttons'// single multiple buttons
}),
new TouchBarSpacer({
size: 'flexible'
}),
new TouchBarSlider({
label: '滑动组件'
})
]
})

let window

app.once('ready', () => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hiddenInset',
width: 200,
height: 200,
backgroundColor: '#000'
})
window.loadURL('about:blank')
window.setTouchBar(touchBar)
})

组件展示


PS:学会了这个,就有了后来的一个小项目touchbar-emoji,使用touchbar来控制飘落emoji表情雨。

-------------本文结束 感谢您的阅读-------------
0%