Electron初试
简介
- electron使用html，css和JavaScript来构建块跨平台桌面应用程序（Mac，Windows和Linux）的一个开源库。
- electron将Chromium和Node.js合并到同一个运行环境。
- electron只使用了Chromium的渲染库而不是全部组件，这使得升级Chromium更加容易，但缺少了Google Chrome里的一些浏览器相关的特性。
构建开发环境
- electron应用本质上是一个Node.js应用程序，应用的入口是
package.json文件.
- 使用
npm init初始化项目目录
npm init
// 或者
npm init -y
- 在
package.json中编写一个start脚本
{
"name": "helloelectron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
- 安装electron
npm install --save electron
了解进程
主进程
- 运行
package.json中的main脚本的进程是主进程。 - 一个electron应用有且只有一个主进程。
- 主进程可以进行GUI相关的原生API操作。
- 主进程使用
ipcMain模块接收渲染进程和向渲染进程发送消息。
渲染进程
- Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。
- 每个web页面运行在它自己的渲染进程中。
- 使用
BrowserWindow类开启一个渲染进程并将这个实例运行在该进程中，当一个BrowserWindow实例被销毁后，相应的渲染进程也会被终止。 - 渲染进程中不能调用原生资源，但是渲染进程中同样包含Node.js环境，所以可以引入Node.js
模块，在Node.js支持下，可以在页面中和操作系统进行一些底层交互。 - 使用
ipcRenderer模块接收主进程和向发送主进程发送消息。
开始开发
编写main.js
- 如前所述，编写main.js就是编写主进程要执行的脚本。
- 其中包换整个应用的生命周期的管理，各个渲染进程的创建和销毁及生命周期管理，进程间通信等。
- 下面创建一个最简单的electron脚本。
// app可以理解为主进程
// BrowserWindow用于创建渲染进程
const {app, BrowserWindow} = require('electron')
app.on('ready', function createWindow () {
// 可以创建多个渲染进程
let win1 = new BrowserWindow({
width: 1024,
height: 768
})
let win2 = new BrowserWindow({
width: 1024,
height: 768
})
// 渲染进程中的web页面可以加载本地文件
win1.loadFile('index.html')
// 也可以加载远程页面
win2.loadURL('http://www.baidu.com')
// 记得在页面被关闭后清除该变量，防止内存泄漏
win1.on('closed', function () {
win1 = null
})
win2.on('closed', () => {
win2 = null
})
})
// 页面全部关闭后关闭主进程，这里在不同平台可能有不同的处理方式，这里不深入研究
app.on('window-all-closed', () => {
app.quit()
})
- 渲染进程中的页面也可以加载node模块
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>electron应用</title>
</head>
<body>
<script>
const fs = require('fs')
fs.readFile('./demo.txt', function (err, data) {
document.write(data)
})
</script>
</body>
</html>
-
npm start运行应用
分发应用
- 刚刚介绍了
npm start运行应用，那如何将应用分发给他人呢，下面简单介绍Windows平台的方式
复制
node_modules/electron/dist目录下的文件到任意文件夹yourapp复制你的项目文件到
yourapp/resources/app下删除
yourapp/resources/default_app.asar文件运行
yourapp/electron.exe
- 注意
创建好的应用如果在渲染进程中使用了相对目录，由于目录结构的变化会引起读取文件失败，所以推荐使用绝对路径
如，这个项目中的index.html
<script>
const fs = require('fs')
const path = require('path')
fs.readFile(path.resolve(__dirname, 'demo.txt'), function (err, data) {
document.write(data)
})
</script>
【完】
image
作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多
