由于最近工作需求,紧急学习electron相关的技术知识,关于node.js的相关问题,后续会继续更新。
【electron】简介及作用:
electron的基本组成:Chromium + Node.js + Native API
Chromium:Google 的Chrome浏览器背后的引擎,为electron提供了强大的UI能力,不用考虑兼容性的问题,比如可以不用写很多CSS兼容代码;
Node.js:可以使用npm的包快速开发,并且使electron有底层开发的能力,比如文件的读写等;
Native API:使electron有跨平台和桌面端原生的能力
使用场景:
1、公司没有专门的桌面应用开发者,需要前端做桌面应用,比如现在苦逼的我;
2、一个项目要开发桌面端和web端,比如根据不同的权限,客户使用的端不一样;
3、要做一个效率工具,提高开发效率
具体应用举例:
VSCode(前端常用工具),Atom(github文本编辑器),slack(国外应用,得翻墙用)
【安装electron】
先安装node.js 进入官网下载node.js,LST版本是长期稳定的版本,公司开发使用;最新版本可自己练习时使用 node.js安装官网
npm install electron --save-dev (开发环境安装)
查看是否安装成功:
npx electron -v (node版本5.0以上的版本才有npx)
创建一个hello world的electron
新建H5页面:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
Hello World!
</body>
</html>
创建主进程文件:main.js
const electron = require('electron') // 引入electron
const app = electron.app // 引用app
const BrowserWindow = electron.BrowserWindow // 窗口引用
const mainWindow = null // 声明要打开的主窗口
// app.on监控事件
app.on('ready', ()=> {
mainWindow = new BrowserWindow({height: 800,width: 800})
mainWindow.loadFile('index.html') // 要加载的html的页面(本例的index.html文件与mian.js文件为同级目录)
// win.loadURL('https://github.com')
mainWindow.on('closed', ()=>{ mainWindow = null})
})
使用npm init --yes 自动生成package.json文件:
最后使用命令:electron . 运行,就可以看到hello world 的窗口。
【electron的运行流程】
1、读取package中设置的入口文件:这里设置的时是mian.js(一个electron有且只有一个主进程,一个主进程可以有多个渲染进程)
2、main.js主进程中创建渲染进程
3、读取需要渲染的应用页面的布局和样式
4、使用IPC在主进程执行任务并获取信息
【app 控制应用程序的事件生命周期】
详细介绍app控制应用程序的事件生命周期:
先引入app
const electron = require('electron')
const app = electron.app
app.on('ready', () => {})
当 Electron 完成初始化时,发出一次。也可以通过调用 app.isReady() 来检查该事件是否已被触发,以及通过 app.whenReady() 得到一个当Electron已初始化后fulfill 的 Promise。
‘before-quit’
:在程序关闭窗口前发信号
‘activate’
:当应用被激活时触发
app.on('window-all-closed', () => { app.quit() })
最后一个窗口被关闭时退出应用。此事件默认的行为是控制退出程序,但监听此事件可以控制什么条件下是否退出程序。