Electron入门

文章目录

- 概要
- Electron开发环境搭建
- 第一个Hello Wold程序

概要

Electron 是由 Github开发的开源框架
它允许开发者使用Web技术构建跨平台的桌面应用

Electron = Chromium + Node.js + Native API

Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。
Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。
Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

Electron开发环境搭建

1、安装node.js：

官网地址：Node.js 版本 v10+；
安装完成后使用以下两个命令检查版本；
```
npm -v
node -v
```

2、安装Electron：


//方法一：新建项目文件夹安装
npm install electron --save-dev
//方法二：全局安装
npm install -g electron

安装完成后使用以下两个命令检查版本；


npx electron -v
./node_modules/.bin/electron -v

命令行启动一下Electron，出现下图弹出则安装启动成功；


//启动命令
./node_modules/.bin/electron

第一个Hello Wold程序

1、新建一个文件夹项目名称为Electron_Demo，在项目的根目录下新建一个index.html,写入如下代码：


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<body>
  Hello world！
body>
html>

2、在根目录下新建入口文件main.js，写入如下代码：


let electron = require('electron');  // 引入electron模块
let app = electron.app  //创建electron引用
let BrowserWindow = electron.BrowserWindow  //创建窗口引用
let mainWindow = null; //声明要打开的主窗口
app.on('ready',()=>{ 
  mainWindow = new BrowserWindow({width: 400, height:400})  //设置主窗口大小
  mainWindow.loadFile('index.html')  //要加载的页面
  // 监听关闭事件，把主窗口设置为null
  mainWindow.on('close',()=>{
    mainWindow = null;
  })
})

3、在项目路径的控制台下运行如下代码初始化生成package.json 文件：

npm init --yes

4、运行项目，在终端里输入electron .即可出现窗口:

electron .

相关阅读:
Linux 设备模型【1】-PLATFORM(平台)总线详解
【组成原理九 CPU】
这一次，Windows 站起来了：Windows & Linux 的性能 Battle
跳表的实现
Linux进程地址空间
BERT模型的详细介绍
Unity入门08——核心系统02
将网站域名访问从http升级到https（腾讯云/阿里云）
线性搜索简介
MULLS: Versatile LiDAR SLAM via Multi-metric Linear Least Square 论文翻译

原文地址：https://blog.csdn.net/weixin_47978760/article/details/131890987