Electron.js - 学习记录 - 陈陈菌博客

Electron.js 是一个跨平台的 JavaScript 桌面应用开发框架。可用 HTML + CSS + JavaScript 的方式来开发系统桌面应用。不仅易用，而且对多平台的支持也非常不错。如果你厌倦了用 C# 和 C++ 或者苹果的（swift）来构建桌面应用，不妨可以试试下这个 JavaScript 框架。

对这框架使用前需要安装 Node.js 和 Git ，可以到官网 https://nodejs.org/zh-cn 、https://git-scm.com 来获取。

在学这个框架之前只需要会前端三件套（HTML，CSS，JavaScript）即可。同时为了方便编程和 Debug。可以去下载 VSCode 来作为开发主要工具。

安装完 Node.js 和 Git 并配置环境变量后（为了更方便的从任意目录调用）使用命令

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

可以从 GitHub 上克隆一个 Electron.js 的 Hello World 项目。随后，再使用命令

1	npm install

下载安装 Electron.js 的相关依赖。这个时间不会很长，（如果是的话）你可以设置 npm 的镜像源。以提高你下载安装的速度。

有关镜像源：

淘宝 https://npm.taobao.org/mirrors/npm/
设置源的 npm 命令：

1	npm install 包名 --registry=镜像库地址

运行 Electron 项目

当项目克隆和安装相关依赖后，可以使用 npm start 命令来运行 Electron 项目。

开发工具及Debug

接下来我们可以准备一个方便开发的工具 Vscdoe 并且为其配置 Electron.js 的开发环境。有关 Vscode，可以前往官网 https://code.visualstudio.com 获取。

如果已经安装 Vscode，我们可以接下来在 Electron 项目目录下新建一个名为 .vscode 的文件夹。并在里面自行新建一个配置文件 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "args": [
                "."
            ],
            "outputCapture": "std"
        }
    ]
}

回到 Vscode ，我们就可以直接通过这里来运行 Electron 项目，从而不需要命令行的繁琐步骤。

在运行的程序中的此菜单栏里找到开发者工具以用于 Debug 。

创建基本Electron应用的另一种方法

从开发的角度来看，Electron应用基本上是一种Node.js应用。可以使用 npm 直接进行构建。
1.创建 json

1 2	npm init -y npm i --save-dev electron

2.创建脚本 index.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('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()
  }
})

3.创建 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>
        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>.
    </p>
</body>

</html>

4.根据个人更改 package.json 文件信息

{
  "name": "项目名",
  "version": "版本号",
  "description": "公司",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [关键字],
  "author": "作者",
  "license": "许可",
  "devDependencies": {
    "electron": "electron版本"
  }
}

打包 Electron 应用

当项目完成时，可以使用 Electron Forge 来打包。键入以下命令来导入 Electron Forge。

1	npx @electron-forge/cli import

导入 Electron Forge 后键入命令

1	npm run make

进行应用打包工作。最后，输出 out 文件夹，里面即是打包出来的软件。

Electron.js 工程主要文件结构

结构	说明
node_modules	依赖文件
index.html	页面
index.js	脚本
package.json	工程信息

Electron.js - 学习记录

运行 Electron 项目

开发工具及Debug

创建基本Electron应用的另一种方法

打包 Electron 应用

Electron.js 工程主要文件结构

FEATURED TAGS

FRIENDS