Electron 自定义窗口 —— 桌面时钟

本节主要讲解如何使用 Electron 创建自定义窗口，并带领大家开发一款漂亮的桌面时钟，效果如下：

众所周知，在 Electron 里面，窗口都是通过实例化 BrowserWindow 类创建出来的，一个最简单的创建窗口的代码如下：

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

这样就会创建出一个宽 800 像素，高 600 像素的窗口出来。BrowserWindow 类是 Electron 提供的窗口管理的类，继承自 EventEmitter：

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

窗口创建之后，默认是空的，如果想要界面上显示内容，Electron 提供了两个方法：

• loadURL：加载指定网站
• loadFile：加载本地文件

例如加载本地 clock.html 文件：

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

会显示下面的窗口：