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是一个使用 javascripthtml 和 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.jsonscript添加启动命令,运行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试水篇的主要内容,如果未能解决你的问题,请参考以下文章

Electron试水篇

yarn add electron安装失败

yarn add electron安装失败

yarn add electron安装失败

试水“一”搏

第一回:Scrapy的试水