Electron学习(一)之第一个程序
什么是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({
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>
运行效果:
优秀不够,你是否无可替代
软件测试交流QQ群:721256703,期待你的加入!!
欢迎关注我的微信公众号:软件测试君
![](https://www.cnblogs.com/images/cnblogs_com/longronglang/1061549/o_QQ%E6%88%AA%E5%9B%BE20190728134401.jpg)