Electron相当于个性化的浏览器，它把V8引擎单独打包成型。可以把网页打包成一个在桌面运行的程序。大家见到的微信电脑版就是Electron做的。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。
下面就是极简入门（采用命令行创建）
一 、创建空的文件夹
- 随便在某个位置 创建名为 electron-demo 的空文件。
-
用命令行进入该文件 image.png
- 初始化项目
yarn init -y
image.png - 安装
Electron(可以指定版本号 yarn add --dev electron@版本号)
这里用的是 6.0.0 版本( yarn add --dev electron@6.0.0 )
image.png -
查看当前的版本号image.png
二、进入编辑器开始配置
1、创建如下文件
- package.json （已经通过yarn init -y 建好）
- main.js
- index.html
image.png
2、在package.json中添加script
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
3、修改main
image.png
三、在main.js中加入以下代码
const { app, BrowserWindow } = require('electron')
function createWindow() {
//创建 浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
//加载index.html文件
win.loadFile('index.html')
}
app.on('ready', createWindow)
四、在命令行中 运行文件
image.png
效果如下 ：
image.png
五、发布成可执行文件
- 可以使用的发布工具
electron-builder
image.png - 在package.json添加builder配置
"build": {
"appId": "yapp.nihao",
"mac": {
"category": "game"
}
},
image.png
-
在 script中添加脚本
image.png -
在命令行中 打包 完成
image.png
image.png
image.png
最终长成这个样子
image.png
