Electron?自定義窗口桌面時鐘實現示例詳解

更新時間：2023年03月09日 14:29:54 作者：喬珂力

這篇文章主要為大家介紹了Electron?自定義窗口桌面時鐘實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

本節(jié)主要講解如何使用 Electron 創(chuàng)建自定義窗口，并帶領大家開發(fā)一款漂亮的桌面時鐘

效果如下

實例化 BrowserWindow 類創(chuàng)建窗口

眾所周知，在 Electron 里面，窗口都是通過實例化 BrowserWindow 類創(chuàng)建出來的

一個最簡單的創(chuàng)建窗口的代碼如下：

const win = new BrowserWindow({ width: 800, height: 600 })

這樣就會創(chuàng)建出一個寬 800 像素，高 600 像素的窗口出來。BrowserWindow 類是 Electron 提供的窗口管理的類，繼承自 EventEmitter：

class BrowserWindow extends NodeEventEmitter {
	// 省略...
}

窗口創(chuàng)建之后，默認是空的，如果想要界面上顯示內容，Electron 提供了兩個方法：

loadURL：加載指定網站
loadFile：加載本地文件

加載本地 clock.html 文件

const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile(path.join(__dirname, '../renderer/clock.html'))

默認的窗口是帶標題欄的，但系統(tǒng)自帶的標題欄定制功能很弱，往往無法滿足個性化需求，于是 Electron 提供了 titleBarStyle 選項來隱藏標題欄：

win = new BrowserWindow({
  width: 600,
  height: 500,
  titleBarStyle: 'hiddenInset', // 隱藏標題欄
})

這個時候的效果看起來舒服多了：

除此之外，還可以設置 transparent: true 來創(chuàng)建一個透明窗口：

可以看到，整個矩形窗體的非內容區(qū)都變成了透明狀態(tài)，但還能看到邊框，此時可以用 frame: false 創(chuàng)建一個無邊框窗口，僅顯示時鐘圓形區(qū)域：

win = new BrowserWindow({
  width: 600,
  height: 500,
  resizable: false,
  frame: false,
  transparent: true,
  webPreferences: {
    preload: path.join(__dirname, '../preload/index.js'),
  },
})

這樣就實現文章開頭的效果了：

不過雖然窗口變透明了，但本質上窗口還是矩形的，如果用戶點擊時鐘外側、矩形內側的區(qū)域，還是能夠選中時鐘窗口：

但我們要實現的是鼠標穿透效果，即：點擊透明區(qū)域能夠選中下層的元素。BrowserWindow 提供了一個方法：

win.setIgnoreMouseEvents(true)

但這會帶來新的問題：點擊時鐘里面也會造成鼠標穿透！也就是說，時鐘變成了一個永遠無法選中、無法拖動的窗口了。要想解決這個問題，只能通過渲染進程向主進程發(fā)送消息，動態(tài)的設置鼠標穿透效果，

主進程代碼

ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
  console.log('set-ignore-mouse-events', args)
  BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)
})

在 preload.js 中監(jiān)聽鼠標事件，當進入時鐘圓形內部的時候，不設置鼠標穿透，離開時鐘再設置穿透效果：

const { ipcRenderer } = require('electron')

document.addEventListener('DOMContentLoaded', () => {
  const clock = document.getElementById('clock')
  clock.addEventListener('mouseenter', () => {
    ipcRenderer.send('set-ignore-mouse-events', false)
  })
  clock.addEventListener('mouseleave', () => {
    ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
  })
})

這樣就完美實現了可拖拽、可移動的時鐘啦！