Electron入门
- 游戏开发
- 2025-08-12 07:57:02
文章目录 概要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 -v2、安装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 --yes4、运行项目，在终端里输入electron .即可出现窗口:
electron .Electron入门由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Electron入门”
下一篇
Day01嵌入式-----流水灯
