【Electron】用前端技术开发桌面应用（一）

最新推荐文章于 2024-07-09 16:56:48 发布

小胖伦的夕阳粉

最新推荐文章于 2024-07-09 16:56:48 发布

阅读量4.6k

点赞数 2

分类专栏： electron 文章标签：前端 electron

本文链接：https://blog.csdn.net/zuo0407/article/details/119924172

版权

electron 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

由于最近工作需求，紧急学习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() })
最后一个窗口被关闭时退出应用。此事件默认的行为是控制退出程序，但监听此事件可以控制什么条件下是否退出程序。

小胖伦的夕阳粉

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【Electron】用前端技术开发桌面应用（一）

由于最近工作需求，紧急学习electron相关的技术知识，关于node.js的相关问题，后续会继续更新。【electron】简介及作用：electron的基本组成：Chromium + Node.js + Native APIChromium：Google 的Chrome浏览器背后的引擎，为electron提供了强大的UI能力，不用考虑兼容性的问题，比如可以不用写很多CSS兼容代码；Node.js：可以使用npm的包快速开发，并且使electron有底层开发的能力，比如文件的读写等；Native
复制链接

扫一扫

专栏目录