什么是Electron？
官网地址
Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。
特点及优势
- web技术：基于
Chromium、Node.js - 开源：众多贡献者组成活跃社区共同维护的开源项目
- 跨平台：
Electron兼容Mac、Windows和Linux
需要掌握的知识
HTML，JS，CSS的基础知识Node.js的最基本知识
环境要求
- node版本 > 8.00
- git
快速启动
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start
效果如下：
主进程-Main Process
- 可以使用和系统对接的ElectronAPI-创建菜单，上传文件等等
- 创建渲染进程-RendererProcess
- 全面支持Nodejs
- 只有一个，作为整个程序的入口点
渲染进程-RendererProcess
- 可以有多个，每个对应一个窗口
- 每个都是一个单独的进程
- 全面支持Nodejs和DOMAPI
- 可以使用一部分Electron提供的API
第一个程序
main.js内容如下：
const {app,BrowserWindow}=require("electron")
//ready：当electron完全加载，准备好创建BrowserWindow的时候
app.on('ready',()=>{
const win=new BrowserWindow({
800,
height:600,
webPreferences:{
//意思是在man.js中可以使用nodejs的api
nodeIntegration:true
}
})
win.loadFile("index.html")
const secondWin=new BrowserWindow({
400,
height:300,
webPreferences:{
//意思是在man.js中可以使用nodejs的api
nodeIntegration:true
},
//加入该属性后，只要关闭win，即主窗口，第二个窗口也会关闭
parent:win
})
secondWin.loadFile("second.html")
})
index.html内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
second.html内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>second html</h1>
</body>
</html>
运行效果：
