认识 electron
electron 是基于 chromium 和 Node.js 让你可以使用 html， css， javascript 构建应用，electron 兼容Mac,Windows,Linux ，可以构建出三个平台的应用程序
搭建第一个 electron
// 创建一个新目录
mkdir electron-demo
// 来到目录下
cd electron-demo
// 初始化npm
npm init -y
// 安装 electron， 注意 nodejs 的版本需要大于 16 ， 通过 node -v可查看版本
npm i electron -D
// 为了保持热更新，我们还需要安装一个 nodemon， 这里也可以通过 -g 全局安装
npm i nodemon -D
执行到这里，我们的第一个 electron 项目已经初步搭建好了， 我们先初步了解一下electron 的核心模块 app 和 BrowserWindow
app
app是electron中的一个核心模块,它控制着应用的事件生命周期。 通过app模块可以控制应用的事件如ready、window-all-closed等。
BrowserWindow
BrowserWindow是electron中用于创建浏览器窗口的模块。通过BrowserWindow可以创建出一个浏览器窗口,然后我们可以对这个窗口进行加载url、控制大小、设置菜单等操作。
new BrowserWindow({...})中的参数用于配置创建出来的浏览器窗口的各种属性,常见的有:
-
width、height:设置窗口的宽度和高度
-
minWidth、minHeight:设置窗口的最小宽度和高度
-
maxWidth、maxHeight:设置窗口的最大宽度和高度
-
x、y:设置窗口的初始位置
-
resizable:是否可以改变窗口大小,默认为true
-
fullscreen:是否全屏显示,默认为false
-
titleBarStyle:标题栏样式,默认为default
-
webPreferences:用于配置与渲染进程相关的参数
- nodeIntegration:是否集成node.js,默认为false
- contextIsolation:上下文隔离,默认为true
- preload:指定预加载的js文件路径
运行electron
一个基本的electron应用通常会先通过app.on('ready')监听应用ready事件,然后在这个事件回调函数里面new BrowserWindow,然后加载url。
首先创建一个main.js文件， 同时修改package.json 的入口文件问 main.js，接着我们去试着使用一下
// main.js
const { app, BrowserWindow } = require('electron')
const createWindows = () => {
const win = new BrowserWindow({
width: 1280,
height: 800
})
// win.loadURL('https://lsk_ciao.gitee.io/vue-web-admin-frame')
win.loadFile('index.html')
// 打开控制台调试工具
win.webContents.openDevTools()
}
app.whenReady().then(createWindows)
app负责应用生命周期,BrowserWindow负责创建浏览器窗口。二者都是electron中的核心模块,需要配合使用来开发出基本的electron应用，上例中我们创建了win实例， 我们可以通过 win 实例的loadFile加载本地文件的内容，也可以loadURL去加载一个线上环境的内容， 我们可以试试加载本地内容， 项目根目录下创建一个index.html ，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// 这个 meta 标签是为了消除不安全的警告，使用了 CSP 安全策略
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://*; child-src 'none';"
/>
<title>Document</title>
</head>
<body>
<h2>第一个electron应用</h2>
</body>
</html>
注意这个meta标签的内容， 我们使用了内容安全策略（CSP） - HTTP | MDN来消除控制台的警告，
此时我们想看看效果的话，可以去package.json中配置一下script 脚本指令"start": "nodemon --exec electron ."，我们使用electron提供的脚本搭配nodemon 提供的热更新配置即可
// pageage.json
{
"name": "electron-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "nodemon --exec electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^27.0.0"
}
}
执行 npm start 即可打开窗口看到内容了，windows环境下应该长这样
至此，我们已经初步学习了 electron 并使用它搭建了我们的第一个应用
