Electron初探

Electron是一个用于开发桌面端应用的框架，它让你使用纯 JavaScript 语法来调用丰富的原生(操作系统) APIs，从而创建桌面应用。你实际是一个 Node. js 的变体，只是它专注于桌面应用而不是 Web 服务器端。

但这并不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用的是 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。

Electron安装

由于Electron的本质是一个Node.js应用程序，所以，我们可以像构建Node.js应用一样来构建Electron应用。

初始化Node.js应用

npm init

按照提示输入工程的一些相关信息（基本都可以保持默认）：

package name: (demo) 
version: (1.0.0) 
description: a Electron Demo Application
entry point: (index.js) main.js
test command: 
git repository: 
keywords: 
author: Woods
license: (ISC)

npm会帮你创建一个package.json文件，大体内容如下：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "a Electron Demo Application",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Woods",
  "license": "ISC"
}

然后在package.json文件中，增加start脚本用于启动node

{
  "name": "demo",
  "version": "1.0.0",
  "description": "a Electron Demo Application",
  "main": "main.js",
  "scripts": {
    "start": "node ."
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Woods",
  "license": "ISC"
}

这样以来，一个基本的Node.js应用就构建结束了。

安装Electron

通过如下命令安装electron的依赖项：

npm install --save-dev electron

将package.json文件中的start中的node运行时修改为electron

{
  "name": "demo",
  "version": "1.0.0",
  "description": "a Electron Demo Application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Woods",
  "license": "ISC",
  "devDependencies": {
    "electron": "^9.1.0"
  }
}

这样，一个空的 electron应用程序就构建完毕了。

开发第一个Electron应用程序

新建一个main.js（和package.json中配置的"main":"main.js"对应）文件，内容如下：

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

然后，再新建一个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>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

启动应用
在工程的根目录执行启动命令：
```
npm start
```
就可以看到刚才编写的Electron程序了。

2020年7月3日

# Electron初探

# Electron安装

Electron初探

Electron安装