什么是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

效果如下:

Electron学习(一)之第一个程序_html

主进程-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({
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>

运行效果:

Electron学习(一)之第一个程序_node.js_02

优秀不够,你是否无可替代

软件测试交流QQ群:721256703,期待你的加入!!

欢迎关注我的微信公众号:软件测试君