electron 基于 Node.js 和谷歌浏览器内核，可以轻松使用 Javascript 来构建一个跨平台的应用程序，支持 Windows、MacOS、Linux 三个平台。
微软著名的 Vistual Studio Code 就是基于 electron 开发的, 这里再推荐一个基于 electron 开发的全平台远程终端 Termius， 在 Windows 下可以媲美 Xshell 工具。
官方图片
下面开始进入 electron 学习
安装 Node.js
-
访问官网
-
选择合适的平台下载安装
查看 Node.js 是否成功安装
# 查看 node 版本信息
node -v
# 查看 npm 版本信息
npm -v
上面两个看到版本信息，说明已经安装成功了！
创建一个 electron 应用
- 在 workspace 下新建一个目录
mkdir genesis
- 进入目录使用 npm 初始化
cd genesis
npm init
之后按照提示填写,可以全程回车键，注意 entry point 默认指定 index.js
执行完成之后会生成 package.json 配置文件，看一下配置文件的内容
{
"name": "genesis", # 项目名称
"version": "1.0.0", # 版本号
"description": "", # 描述
"main": "main.js", # 入口文件, 默认是 index.js
"scripts": {
"start":"electron .", # 启动脚本，指定 electron 运行时
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
注意 配置文件中需要在 scripts 添加启动脚本，并指定 electron 运行时。
- 安装 electron
npm install --save-dev electron
- main.js
const { app, BrowserWindow } = require('electron')
function createWindws() {
let win = new BrowserWindow({
width:800,
height:600,
webPreferences:{
nodeIntegration:true,
}
})
// 加载 index.html
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// 准备好之后调用创建窗口
app.whenReady().then(createWindws)
// 关闭后退出
app.on('windows-all-colsed',()=>{
// 在 MacOS 上不是真正退出，保持激活
if (process.platform != 'darwin') {
app.quit()
}
})
app.on('activate',()=>{
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length == 0) {
createWindws()
}
})
- index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
- 启动
npm start
好了，到这里就可以看到刚才创建的应用程序了。
参考资料
网友评论