使用Electron构建桌面应用

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

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

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

main.js

当你使用npm start启动Electron程序时，这是最先被执行的脚本。在main.js中可以创建窗口对象以构建图形界面。一个典型的main.js如下：

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替换为

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

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

mainWindow.setAlwaysOnTop(true, "")

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

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，需要在页面中增加以下内容

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

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

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

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

mainWindow.webContents.send(channel, messageContent)

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

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构建功能丰富的跨平台应用啦！

参考文章：http://www.zhangxinxu.com/wordpress/2017/05/electron-node-js-desktop-application-experience/

官方文档：https://electronjs.org/docs