（1/7）Electron教程（一）什么是 Electron，由来、适用场景和 Electron 的环境搭建（1/7）

置顶十月ooOO

已于 2023-06-03 14:17:20 修改

阅读量1.8w

点赞数 25

分类专栏： # electron 文章标签： electron js

于 2021-07-25 11:55:47 首次发布

本文链接：https://blog.csdn.net/KimBing/article/details/119079828

版权

electron 专栏收录该内容

15 篇文章 35 订阅

订阅专栏

（1/7）Electron教程（一）什么是 Electron，由来、适用场景和 Electron 的环境搭建

Electron教程（一）什么是 Electron，由来、适用场景和 Electron 的环境搭建
 Electron教程（二）启动过程：主进程，渲染进程是什么
 Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程
 Electron教程（四）使用 Vue Browser 版，创建小工具应用
 Electron教程（五）读取本地文件内容， ipcMain ipcRenderer 之间的交互
 Electron教程（六）应用菜单设置例子
 Electron教程（七）结语

一、前言

最近自己有个小的需求，是做一个能编辑本地特定文本的工具，需要跨平台， Windows 和 macOS，这样，如果用原生开发的话，Windows 就要用 c# macOS 就要用 swift，学习成本高，并且学完用处也不是很大。
我本身是前端开发的，发现了这个 electron 能满足我的需求，跨平台运行，内部是 js 驱动的，简直就是如鱼得水。
顺便把学习的经历写出来，分享需要的人，我会按标题序号渐进式地编写内容。
如果你喜欢这个文章，欢迎点赞评论支持。

二、什么是 `electron`

electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独立的浏览器，而这个浏览器可以提供给你一些接口，去调用系统的资源。
一般在浏览器中网页是没有权限去调用系统资源的，本地文件都无法自主获取，只能通过用户操作喂给浏览器才行。
有了 electron 就自由了，可以调用 electron 提供的一些系统功能，所有 nodejs 中可以使用的功能都可以。

在这里插入图片描述

你看到的 electron 程序内的界面全是 html + css 搭建的，并不是原生系统的界面。

electron 的一个很大的优势是可以做到一套代码通吃各平台，因为它的核心逻辑是 js 写的，只需要给不同平台的应用套上一个对应的外壳即可。

应用场景
我感觉有两种应用场景很适合用 electron，都是趋于本地化的：

一种是希望给现有项目打包成可执行文件，直接双击打开使用，不需要布署 web 服务器
另一种是想做一个本地化的工具，能操作系统资源，并且能跨平台使用

实例
其实你正在用的应用中就有不少是用 Electron 做的， VSCode 就是，你敢信？还有比较不错的下载工具 Motrix。
好像新版 macOS 的 QQ 也是用类似 electron 的东西做的

由来
electron 的前身是 atom 编辑器，是在它的基础上实现过来的一套跨平台解决方案，

参阅：Introducing Electron

electron具体能实现些什么功能，具体可以看这里

https://www.electronjs.org/docs

三、环境搭建

1. 所需的基础文件

基础的环境搭建只需要三个文件

github: https://github.com/KyleBing/electron-demo

.
├── app.js
├── index.html
└── package.json

所有使用 npm 的项目都是一个 npm 包，只不过你的包是私密的。这个可以去看 npm 基础。

package.json

package.json 中只需要在 devDependencies 标签中添加 electron 即可
字段 main 指定程序的入口 js 文件，也就是上面的 app.js，
这个名字自己随便定， main.js 也行，对应上就可以。

electron 的版本号不一定非是这个，用最新的就好了。这个是我写教程时的最新版本。

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163.com"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

app.js

这是程序的入口文件，electron 的主进程就是这个。里面是关于 electron app 的一些生命周期方法

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

const url = require("url");
const path = require("path");


let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'index.html'), // 指定好对应的主页文件就好了
            protocol: "file:",
            slashes: true
        })
    )
    mainWindow.on('closed', function () {
        mainWindow = null
    })

    mainWindow.webContents.openDevTools() // 显示这个窗口的调试窗口，如果不想显示，删除该段即可
}

// 程序启动时
app.on('ready', ()=>{
    createWindow()
})

// 所有窗口关闭时
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

// 程序处于激活状态时
app.on('activate', function () {
    if (mainWindow === null) {
        createWindow()
    }
})

index.html

目前只是简单的 html 主页文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Eelctron-Demo</title>
</head>
<body>
	<h1>Electron Demo</h1>
	<p>你好呀！</p>
</body>
</html>