使用Electron构建桌面应用

Electron是基于Node.js的桌面应用开发框架,所有代码均在Chrome『外壳』下运行,因而可以调用所有Node.js和浏览器的API,并且具有跨平台的特性。下面介绍如何使用Electron构建简单的桌面应用。你可以参照官方给出的入门程序:

1
git clone https://github.com/electron/electron-quick-start.git

一个Electron应用应包含以下内容:

main.js

当你使用npm start启动Electron程序时,这是最先被执行的脚本。在main.js中可以创建窗口对象以构建图形界面。一个典型的main.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
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})

mainWindow即为BrowserWindow窗口对象。mainWindow有很多参数可以设置,例如,可以将默认的width: 800, height: 600替换为

1
2
width: electron.screen.getPrimaryDisplay().workAreaSize.width,
height: electron.screen.getPrimaryDisplay().workAreaSize.height

来实现全屏。在创建了窗口对象后,可以使用

1
mainWindow.setAlwaysOnTop(true, "")

来使应用置顶(在macOS下,第二个参数将决定置顶的级别,例如,第二个参数取”floating”会使窗口置于大部分应用之前,但会被KeyNote等权限更高的应用挡住;而取”main-menu”则即使在演示KeyNote该窗口也能置于顶层)。 如果窗口设置了全屏置顶,就需要配合以下代码使用:

1
mainWindow.setIgnoreMouseEvents(true)

这样可以使窗口忽略鼠标事件,否则就不能正常操作其他窗口了。 接下来,使用mainWindow.loadURL()来加载页面内容。loadURL中index.html可以替换为任何自定义页面。process.platform !== 'darwin'的作用是,在macOS上,关闭所有窗口并不意味着退出程序——你可以点击Dock中的程序图标唤醒它(即触发activate事件);而在Windows中,关闭所有窗口的默认行为是直接退出程序。

index.html

这是窗口的HTML文件。前面讲到的main.js中pathname应指向它。在创建窗口后,index.html会在Chrome环境下执行,接下来的工作就是进行前端设计,来构建桌面应用的页面——你甚至可以使用jQuery,react.js或vue.js等框架。不过需要注意的是,如果使用jQuery,需要在页面中增加以下内容:

1
<script>if (typeof module === "object") {window.jQuery = window.$ = module.exports}</script>

否则无法正确运行。还要注意的是,全屏状态下使用alert()会导致问题,应该使用

1
2
3
4
const {dialog} = require("electron").remote
function showMessage(msg) {
dialog.showMessageBox({message : msg})
}

然后用showMessage()函数显示消息。 Electron提供了在不同页面间进行通讯的API,在父页面使用

1
mainWindow.webContents.send(channel, messageContent)

发送消息,其中channel是任意字符串,表示通信频道,messageContent是消息内容。在子页面使用

1
2
3
4
const ipcRender = require("electron").ipcRenderer
ipcRender.on(channel, function(event, message) {
alert(messgae)
});

监听消息即可。

renderer.js

默认里面就一堆注释,用来放业务相关JS的,和网页JS的区别在于,这里的JS不仅可以访问DOM,还能使用Node.js所有的API。能前能后,想怎么玩都行。

其他

如果你需要更多的页面,可以创建HTML文件并使用new BrowserWindow()加载这些页面。在设计完成后,使用命令npm start即可运行。如果需要将应用打包,可以使用electron-packager(用npm安装),在Windows系统下就会打包成.exe格式,macOS则为.app。 发挥你的想象力,便能使用Electron构建功能丰富的跨平台应用啦!


参考文章:使用electron构建跨平台Node.js桌面应用经验分享

官方文档:Electron 文档

🍭支持一根棒棒糖!
0%