Electron入门-CFANZ编程社区

文章目录

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

概要

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

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,写入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</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 .