当前位置：首页 > wzjs >正文

政府网站建设计划东营百度推广公司

wzjs 2025/8/17 2:20:14

政府网站建设计划,东营百度推广公司,wordpress 标签大全,咸阳营销型网站建设文章目录概要Electron开发环境搭建第一个Hello Wold程序概要 Electron 是由 Github开发的开源框架它允许开发者使用Web技术构建跨平台的桌面应用 Electron Chromium Node.js Native API Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下&am…

文章目录

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

<!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')  //要加载的页面// 监听关闭事件，把主窗口设置为nullmainWindow.on('close',()=>{mainWindow = null;})
})

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