利用electron框架构建桌面级应用

前言

electron是一个可以利用 JavaScript HTML CSS 等技术构建原生程序的框架，也就是说，利用electron可以让我们使用web技术来开发桌面应用。electron的GUI核心来自于Chrome，使用V8（JavaScript引擎），本身是基于C++编写的。市面上很多的程序，都是用electron开发的，例如：vscode atom 等。

electron一个很大的特点就是跨平台。electron兼容Windows，Linux以及Mac平台，利用electron开发的程序可以在这几个平台上运行。electron基于chromium，nodejs，这就让你可以用HTML CSS JavaScript构建应用。并且还是开源的，拥有活跃的社区来维护项目。

讲了这么多，现在就让我们来构建第一个属于自己的electron程序吧！

准备

使用electron前，你需要安装nodejs。在终端输入以下命令，来检查nodejs是否安装 :

node -v

npm -v

如果终端返回了相对应的nodejs与npm的版本信息，那么恭喜你，你可以进行下一步了；如果没有返回，那么你则需要安装nodejs与npm，然后重新输入命令检查，再进行下一步。

安装Electron

你可以创建一个名为”electron-app”的文件夹，然后打开它，并在这个文件夹当中执行终端。输入以下命令：

1	npm init -y

1	npm i --save-dev electron

Electron的基本目录结构

electron-app/
├── package.json
├── main.js
└── index.html

我们可以通过上面的结构，分别将 package.json main.js index.html 创建出来。

创建main.js

在electron-app目录下创建 main.js 文件（main.js是electron的主脚本文件，它指定了运行主进程electron程序的入口，在electron程序中，只能有一个 main.js 文件），你可以在 main.js 中输入以下代码：

const electron = require('electron') //导入模块
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const app = electron.app

function createWindow () {
  const win = new BrowserWindow({
    width: 414, //定义窗口行高
    height: 700,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html') //将index.html导入窗口
}

app.whenReady().then(createWindow) //创建窗口
//侦听器
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

创建index.html

我们在 main.js 文件当中，将 index.html 文件加载到了窗口当中，那么index.html文件就是窗口的内容了

index.html 文件可以这样写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        这是我的第一个electron程序！
    </p>
</body>
</html>

修改package.json

编辑 package.json ，改为下面内容:

{
    "name": "electron-app",
    "version": "0.1.0",
    "author": "name",
    "description": "Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}