1. 什么是Electron:
Electron是使用HTML、JavaScript和CSS构建的跨平台桌面应用程序。
2. 特点及优势:
- web技术：基于Chromium、Node.js
- 跨平台：Electron兼容Mac、Windows和Linux
- 开源：众多贡献者组成活跃社区共同维护的开源项目
3. 需要掌握的知识
- HTML、JavaScript、CSS的基础知识
- nodejs的基础知识
4. 环境要求
- node版本 > 8.0
- 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
第一个程序
点击查看代码
const {app,BrowserWindow}=require("electron")
//ready：当electron完全加载，准备好创建BrowserWindow的时候
app.on('ready',()=>{
const win=new BrowserWindow({
width:800,
height:600,
webPreferences:{
//意思是在man.js中可以使用nodejs的api
nodeIntegration:true
}
})
win.loadFile("index.html")
const secondWin=new BrowserWindow({
width: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>
运行效果：
