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
渲染进程-RendererProcess
第一个程序
点击查看代码
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>
运行效果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。