类:TouchBar触摸条

为本机macOS应用程序创建TouchBar布局

进程: 主进程

new TouchBar(options) 实验功能

用途:使用指定项目创建新的触摸条,使用 BrowserWindow.setTouchBar将 TouchBar加到窗口中

提醒: 如果您没有自带触控板的MacBook的话,可以使用这个触控板模拟器.

注意: TouchBar API 目前是实验功能,未来可能删除.

下面是个用在摇一摇或老虎机,贩卖机上的简单的带有按钮的触摸条例子:

  1. const {app, BrowserWindow, TouchBar} = require('electron')
  3. const {TouchBarLabel, TouchBarButton, TouchBarSpacer} = TouchBar
  5. let spinning = false
  7. //卷轴标签
  8. const reel1 = new TouchBarLabel()
  9. const reel2 = new TouchBarLabel()
  10. const reel3 = new TouchBarLabel()
  12. //旋转结果标签
  13. const result = new TouchBarLabel()
  15. //旋转按钮
  16. const spin = new TouchBarButton({
  17.   label: '🎰 Spin',
  18.   backgroundColor: '#7851A9',
  19.   click: () => {
  20.    //忽略已经旋转的点击
  21.     if (spinning) {
  22.       return
  23.     }
  25.     spinning = true
  26.     result.label = ''
  28.     let timeout = 10
  29.     const spinLength = 4 * 1000 // 4 seconds
  30.     const startTime = Date.now()
  32.     const spinReels = () => {
  33.       updateReels()
  35.       if ((Date.now() - startTime) >= spinLength) {
  36.         finishSpin()
  37.       } else {
  38.   //每次旋转减慢一点
  39.         timeout *= 1.1
  40.         setTimeout(spinReels, timeout)
  41.       }
  42.     }
  44.     spinReels()
  45.   }
  46. })
  48. const getRandomValue = () => {
  49.   const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
  50.   return values[Math.floor(Math.random() * values.length)]
  51. }
  53. const updateReels = () => {
  54.   reel1.label = getRandomValue()
  55.   reel2.label = getRandomValue()
  56.   reel3.label = getRandomValue()
  57. }
  59. const finishSpin = () => {
  60.   const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
  61.   if (uniqueValues === 1) {
  62.  //3个相同值
  63.     result.label = '💰 Jackpot!'
  64.     result.textColor = '#FDFF00'
  65.   } else if (uniqueValues === 2) {
  66.     // 2个相同值
  67.     result.label = '😍 Winner!'
  68.     result.textColor = '#FDFF00'
  69.   } else {
  70.   //没有相同值
  71.     result.label = '🙁 Spin Again'
  72.     result.textColor = null
  73.   }
  74.   spinning = false
  75. }
  77. const touchBar = new TouchBar([
  78.   spin,
  79.   new TouchBarSpacer({size: 'large'}),
  80.   reel1,
  81.   new TouchBarSpacer({size: 'small'}),
  82.   reel2,
  83.   new TouchBarSpacer({size: 'small'}),
  84.   reel3,
  85.   new TouchBarSpacer({size: 'large'}),
  86.   result
  87. ])
  89. let window
  91. app.once('ready', () => {
  92.   window = new BrowserWindow({
  93.     frame: false,
  94.     titleBarStyle: 'hidden-inset',
  95.     width: 200,
  96.     height: 200,
  97.     backgroundColor: '#000'
  98.   })
  99.   window.loadURL('about:blank')
  100.   window.setTouchBar(touchBar)
  101. })

上方代码的运行方法

假设已有终端已打开您期望的例子并打算运行上方的例子,那么你需要这么做:

  1. 将上面的内容以 touchbar.js文件保存到计算机中.
  2. 如果没有安装electron的话,则通过npm安装electron 如 npm install electron.
  3. 在Electron中运行: ./node_modules/.bin/electron touchbar.js

这样,您就能看到一个新窗口,而触摸条中也将运行相应程序.