基于Electron的touchbar开发
Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
的一个框架,本人之前写的一个放烟花的程序fireworks-cool就是基于这套框架来做的。electron在跨平台应用方面做的还是挺好的,著名的编辑器VS Code
与Atom
都是使用Electron
来开发的。有了Node
,前端工程师可以直接干后端的事了;有了Electron
,前端工程师可以直接干桌面应用工程师的事了。昨天研究这个touchbar
,真心感觉到了JavaScript
的无所不能属性,明天我们开发一个操作系统?。
吹了这么多Electron
,我们再说说touchbar
吧。我觉得touchbar
是Mac
上一个鸡肋的功能,我在使用Mac
的时候很少去关注touchbar
。昨天忽然想到Electron
可以开发桌面应用,那么是否可以做touchbar
相关的功能呢?于是看了下它的官方文档,发现确实是可以开发touchbar
相关的功能,不过目前Electron
的touchbar
还是实验性的API,后续有可能更改也有可能去掉,不过并不影响我们先玩玩它。玩玩它后,你会发现鸡肋的touchbar
还是有点意思的。当然touchbar
是Mac
特有的硬件,如果不是Mac
的小伙伴就体验不了本章的内容了。
运行官方的例子
官方给了一个老虎机的一个例子,这个例子还是很有趣的,感兴趣的可以直接点击这里查看。如果连接打不开,可以直接看下面的代码,我已经帮你拷贝好了:
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)
})
运行上面的代码:
- 建立一个文件夹,比如
touchbar-demo
,再创建一个文件touchbar.js
,将上面的代码拷贝进去。 - 当前目录下,在命令行输入下面的内容来安装
Electron
。 ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron - 命令行执行下面内容以启动: ./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
,另一个是escapeItem
。items
是一个数组,用来添加touchbar
中间部分的组件。escapeItem
是单个的一个组件,用来替换touchbar
左侧的esc
按钮。
现在我们新建一个index.js
,运行下面代码(命令行输入./node_modules/.bin/electron index.js
),看看效果:
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)
})
运行结果如下:
代码中第29行的图标点击这里下载。
上面使用了2个组件,一个是TouchBarButton
,代表的是一个按钮,另一个是TouchBarLabel
,代表的是一个简单的标签。需要注意的是TouchBarLabel
只是单纯的文字,不支持点击事件(当然你使用的时候有可能API已经支持了),它的参数也很简单,就是上面例子中的那2个,TouchBarButton
是支持点击事件的,如上面escapeItem
中的click方法。
Electron
所支持的所有组件(写本章的时候)有:
- TouchBarButton
- TouchBarLabel
- TouchBarColorPicker
- TouchBarGroup
- TouchBarPopover
- TouchBarScrubber
- TouchBarSegmentedControl
- TouchBarSlider
- TouchBarSpacer
这里给一个简单的例子展示一下其中的几个组件,剩下的你可以自己去尝试一下:
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表情雨。
- 从yield关键字看IEnumerable和Collection的区别
- 让“链式调用(方法链)”更加自然一点
- ASP.NET应用下基于SessionState的“状态编程框架”解决方案
- 为自定义配置的编辑提供”智能感知”的支持
- 在ASP.NET Core应用中如何设置和获取与执行环境相关的信息?
- 在ASP.NET MVC中如何应用多个相同类型的ValidationAttribute?
- [ASP.NET MVC]如何定制Numeric属性/字段验证消息
- 为.NET Core项目定义Item Template
- 晚绑定场景下对象属性赋值和取值可以不需要PropertyInfo
- 一个关于反序列化的小问题
- 两个简单的扩展方法:TrimPrefix和TrimSuffix
- 谈谈Nullable<T>的类型转换问题
- ASP.NET MVC是如何运行的(3): Controller的激活
- ASP.NET MVC是如何运行的[2]: URL路由
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 练习2-8 计算摄氏温度
- 浙大版《C语言程序设计(第3版)》题目集 练习2-9 整数四则运算
- 浙大版《C语言程序设计(第3版)》题目集 练习2-10 计算分段函数[1]
- 浙大版《C语言程序设计(第3版)》题目集 练习2-11 计算分段函数[2]
- SAP Spartacus产品页面的normalizer
- Nodejs中使用net-snmp库读取智慧站房的温湿度、空调等实时数据
- 生气!面试官你过来,我给你手写一个Spring Aop实现!
- 浙大版《C语言程序设计(第3版)》题目集 练习2-12 输出华氏-摄氏温度转换表
- Linux下文本处理“三剑客”
- Thread和goroutine两种方式实现共享变量按序输出
- 浙大版《C语言程序设计(第3版)》题目集 练习2-13 求N分之一序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 练习2-14 求奇数分之一序列前N项和
- dotnet 双缓存数据结构设计 下载库的文件写入缓存框架
- 浙大版《C语言程序设计(第3版)》题目集 练习2-15 求简单交错序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 练习2-17 生成3的乘方表