electron迅速上手必看介绍

最新推荐文章于 2024-07-16 02:39:58 发布

Shopee_Rex

最新推荐文章于 2024-07-16 02:39:58 发布

阅读量523

点赞数

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

本文链接：https://blog.csdn.net/gdutRex/article/details/108533910

版权

前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

electron

2 篇文章 0 订阅

订阅专栏

Electron

底层使用的是C++，JS运行框架基于谷歌的 V8 引擎和 Node.js 的开发框架，允许用 JavaScript 开发跨平台（Windows、Mac OS X 和 Linux）桌面应用。

Electron 就是 GitHub 推出的

技术文档

优点

热更新，轻量安装
跨端开发
入门门槛低
启动和运行不依赖于网络；
桌面应用可以即时启动，不需要等待资源从网络上下载完再启动；
桌面应用可以访问计算机的操作系统和硬件资源

传统web应用缺点

依赖于网络应用
大量数据加载会影响网页加载速度
前端不易处理大文件
web安全策略，不可以直接访问本机硬件
某些浏览器不兼容的

出现的原因

网速的提升，以及使用互联网的成本越来越低，使得相比其他通信渠道，互联网的使用人口基数正在大规模增加；
Web 浏览器受益于不断加剧的竞争， IE 之外的浏览器不断出现，这些浏览器拥有的新特性，继而让 Web 应用也可以利用这些新特性做出一些新的东西出来；
相比像 C 和 C++ 这样的底层语言，简单易学的 HTML、CSS 和 JavaScript 降低了开发者制作 Web 应用的准入门槛；
开源软件的崛起意味着分发和获取软件的成本大大降低，这就使得开发者哪怕只有有限的经验和经历，只要拥有对应的开发技能都可以构建他们自己的 Web 应用。

electron概念

主进程与渲染进程

在这里插入图片描述

主进程

通常是名为main.js 的文件，是每个 Electron 应用的入口文件。它控制着整个 App 的生命周期，从打开到关闭。它也管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等。主进程负责创建 APP 的每个渲染进程。

生命周期

其他钩子函数
常用的主进程模块
1.dialog:系统的弹框
2.BrowserWindow:窗口
3.BrowserView：视图
4.ipcMain：主进程到渲染进程的通讯
5.menu:菜单栏配置
6.menuItem:菜单栏的选项

渲染进程

渲染进程我们可以类比于浏览器的每一个标签页。
与我们正常编译网页不一样的是，允许我们使用nodejs模块的，可以直接调用nodejs。

常用模块
1.desktopCapture:桌面视频音频捕获器
2.ipcRender：与主进程通讯的异步模块
3.remote：调用主进程的入口
4.webFrame：自定义渲染当前网页：缩放比例；设置语言；获取内存信息

安装

npm install electron -g
// 安装完成之后查看版本
electron -v
// 卸载
npm uninstall electron
// 升级
npm update electron -g

hellow world

我们新建一个文件夹，初始化package.json

npm init -y

package.json文件:

{
  "name": "first",
  "version": "1.0.0",
  "description": "",
  "main": "first.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我们修改这个入口文件，我一般使用main.js来替换

{
  "name": "first",
  "version": "1.0.0",
  "description": "",
  "main": "main.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

main.js文件

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
  }
app.on('ready', createWindow)

app 对象包含一些方法，如 on 方法用于将事件绑定到事件函数中。

事件分为2种：

原生事件
Web 事件

BrowserWindow是一个主窗口类。

同时，同一个目录下创建index.html 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
<h1>这是第一个Electron应用</h1>
</body>
</html>

运行

electron .

在这里插入图片描述

使用app添加事件

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
  }
app.on('ready', createWindow)
app.on('window-all-closed',()=>{
  console.log('窗口被关闭');
})

在这里插入图片描述

我们发现虽然触发了关闭事件，但是命令行没有完全退出，我们需要触发命令行退出。

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
  }
app.on('ready', createWindow)
app.on('window-all-closed',()=>{
  console.log('窗口被关闭');
   //非 Mac OS X 平台，直接调用 app.quit() 方法退出程序
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

打开detools

const {app, BrowserWindow} = require('electron')
 function createWindow () {   
    // 创建浏览器窗口
    win = new BrowserWindow({width: 800, height: 600})
    // 然后加载应用的 index.html
    win.loadFile('index.html')
     // 打开控制台
    win.webContents.openDevTools()
  }
app.on('ready', createWindow)
app.on('window-all-closed',()=>{
  console.log('窗口被关闭');
   //非 Mac OS X 平台，直接调用 app.quit() 方法退出程序
  if (process.platform !== 'darwin') {
    app.quit();
  }
})