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试水篇的主要内容,如果未能解决你的问题,请参考以下文章