Electron试水篇
Posted 空城机
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Electron试水篇相关的知识，希望对你有一定的参考价值。
Electron
序
对于Electron，我没有去看vs code的历史时是完全不知道这样一款框架的。
首先先从Vs Code说起，总所周知，这是一款非常好用的编辑器（尤其是对于前端开发人员）。一开始我看到Vs Code的全名 —— Visual Studio Code ，以为这也是像VS一般使用后端语言编写出来的编辑器。 不过当我知道居然是开发人员使用TypeScript编写的，当时是非常惊讶的。
介绍：Visual Studio Code 基于 Electron 开发。Electron 是一个基于 Chromium 的项目，可用于开发基于 Node.js 的本地应用程序。
所以当时就 — 把Electron官网收藏了一下，准备下次一定，所以一直到现在都没学过
官网地址：https://www.electronjs.org/
简介
Electron是一个使用 javascript、html 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。
可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。
Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 Node.js 的 APIs 的能力，可以与底层操作系统直接交互。
前提条件
之前也说到了Electron是基于Node.js的，所以需要先安装Node.js
node的安装这里就不多说了，大家懂的都懂，狗头.jpg
查看版本命令：node -v
使用 yarn init先初始化一个项目
项目的架构：
注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js
接下来安装Electron，命令是： cnpm install Electron -S-D
这里不适用yarn的原因很简单，yarn安装不了Electron。所以这里我还是用回了cnpm （关于yarn下载Electron网上可能有其他方案可以解决，不过都有些麻烦）
此时在package.json的依赖中就会出现：
"dependencies": {
"electron": "^13.2.2"
}
此时可以在package.json的script添加启动命令，运行npm run start即可启动：
"scripts": {
"start": "electron ."
}
配置练习
任何 Electron 应用程序的入口都是
main文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。
执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件。
要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件
此时可以在main.js中加入以下代码：
需要使用require导入electron模块，然后使用BrowserWindow创建相应的窗口应用界面
在mainWindow.loadURL中可以选择加载的Html网页，这里选择的是index.html页面
现在您有了一个页面，将它加载进应用窗口中。 要做到这一点，下面这两个Electron模块很重要：
app模块，它控制应用程序的事件生命周期。BrowserWindow模块，它创建和管理应用程序 窗口。
main.js代码：
const electron = require('electron');
// 控制应用生命周期的模块。
const {app} = electron;
// 创建原生浏览器窗口的模块。
const {BrowserWindow} = electron;
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let mainWindow;
function createWindow() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载应用的 index.html。
mainWindow.loadURL(`file://${__dirname}/index.html`);
// 启用开发工具。
mainWindow.webContents.openDevTools();
}
// Electron 会在初始化后并准备
app.on('ready', createWindow);
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 绝大部分应用会重新创建一个窗口。
if (mainWindow === null) {
createWindow();
}
});
在index.html可以随便写一些东西进行测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>世界你好</h1>
</body>
</html>
运行效果：（关闭窗口也会自动退出运行的）
以上是关于Electron试水篇的主要内容，如果未能解决你的问题，请参考以下文章