https://mobile.yangkeduo.com/goods2.html?pdd_bapp_share_channel=copy_link&goods

本文链接：https://blog.csdn.net/2401_86778468/article/details/141231221

一、Electron是什么
简单的一句话，就是用html+css+js+nodejs+（Native Api）做兼容多个系统（Windows、Linux、Mac）的软件。

官网解释如下(有点像绕口令)：
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

二、Elemtron流程模型

三、Electron搭建工程，若成功则输出123
3.1 准备
可参考Electron官网地址
需要node和npm，先检测是否安装。

node -v
npm -v
1
2

3.2 项目初始化
命令行创建

mkdir my-electron-app && cd my-electron-app
npm init
1
2
或者，手动快速创建

package.json文件

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "test Electron",
"main": "main.js",
"author": "Bin9153",
"license": "MIT"
}
1
2
3
4
5
6
7
8
有几条规则需要遵循：

entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。

3.3 安装 Electron
npm install --save-dev electron
//或者
npm install electron -D
1
2
3
3.4 配置并启动
在 package.json配置文件中的scripts字段下增加一条start命令：

{
"scripts": {
"start": "electron ."
}
}
1
2
3
4
5
这一步，完整的package.json

{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "bin9153",
"license": "ISC",
"description": "electron test",
"dependencies": {
"electron": "^31.2.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
代码解析：

创建main.js。

在main.js里写入

console.log(123)
1
'
运行运行

再运行！

npm start
1
注意：

先创建main.js，否则报错
如果main.js里没写输出（或其他代码）则，启动了运行窗口也不容易看出变化

成功输出123，工程搭建完成。

四、开始制作程序
4.1 案例1：做一个简易网页程序
点击可以查看，browser-window配置项的开发文档
在main.js里写入

const {app, BrowserWindow} = require('electron')

app.on('ready', () => {
//当app准备好后，执行createWindow创建窗口
const win = new BrowserWindow({
width: 800,//窗口宽度
height: 600,//窗口高度
autoHideMenuBar: true,//自动隐藏菜单档
alwaysOnTop: true,//置顶
x: 0,//窗口位置x坐标
y: 0//窗口位置y坐标
})
//加载一个远程页面
win.loadURL('https://blog.csdn.net/qq_33650655/article/details/140353815')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
运行