一文入门跨平台开发框架 Electron

最新推荐文章于 2024-07-22 08:23:27 发布
最新推荐文章于 2024-07-22 08:23:27 发布
阅读量1.2k 收藏 7
点赞数 2
分类专栏： Electron 文章标签： nodejs electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/langshanglibie/article/details/118357727
版权

一文入门跨平台开发框架 Electron

一、经典程序 Hello World

在这里插入图片描述

二、使用 Electron 的软件

  1. Atom
  2. VS code
  3. Slack
  4. 飞书
  5. 美团大象
  6. 携程 TripPal、IM+
  7. 百度度管家
  8. 百度企业网盘
  9. 百度翻译
  10. 迅雷X
  11. 微信开发者工具
  12. 最新版有道云笔记

三、Electron 简介

  • Electron 是由 Github 开发
  • 基于 Chromium和 Node.js
  • 使用 JavaScript ，HTML 和 CSS 等 Web 技术
  • 跨平台开发框架（Mac，Window 和 Linux）

四、Electron 运行原理

在这里插入图片描述

Chromium

  • Chromium 相当于 Chrome 的工程版或称实验版，开源
  • Chromium 为 Electron 提供强大的 UI 能力，可以在不考虑兼容性的情况下开发界面

Node.js

  • Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时
  • Node.js 可以让 JavaScript 脱离浏览器运行
  • 具有访问操作系统的能力
  • 提供一些常用的模块（OS、fs、Net、Crypto 等）

Native APIs

Electron 内置了原生应用程序接口

  • 系统对话框
  • 菜单
  • 快捷键
  • 托盘图标
  • 剪切板
  • 系统通知
  • 使用系统默认应用打开文件
  • 接受拖拽到窗口中的文件
  • 最近打开的文件

五、开发环境搭建

安装 Node.js

官网下载安装包进行安装：https://nodejs.org/zh-cn/
在这里插入图片描述

安装 Electron

1. 安装命令（npm 是 Node.js 的包管理工具）

npm install -g electron

大概率会因为国外镜像无法访问的缘故，导致安装失败（即使是 fan qiang），可以使用淘宝npm镜像来安装。

2. 首先安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 然后使用 cnpm 安装 Electron （使用方法和 npm 相同）

cnpm install -g electron

出现下面内容即为成功：

All packages installed (86 packages installed from npm registry, used 20s(network 2s), speed 934.63kB/s, json 81(225.78kB), tarball 1.21MB)

4. 确定 Electron 是否安装成功

可通过下面命令验证是否安装成功：
electron -v
在这里插入图片描述

六、第一个 Electron 项目 Hello World

1. 创建空项目

mkdir hello-world-demo
cd hello-world-demo
npm init

生成的 package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2. 添加 index.html 文件

<html>
    <head>
    <title>窗口标题</title>
    <body>
        <div style=padding:60px;font-size:38px;font-weight:bold;text-align:center;">
            Hello World
        </div>
    </body>
</html>

3. 添加 main.js 文件

var electron = require('electron')            // 导入 Electron 模块
var app = electron.app                        // app 代表着整个应用程序，通过它可以获取应用程序生命周期中的各个事件
var BrowserWindow = electron.BrowserWindow    // 浏览器窗口
var window = null

app.on('ready', function(){
    window = new BrowserWindow({
        // 为页面配置 Node.js 环境，并赋予页面中JavsScrip访问 Node.js 环境的能力。
        // 如果加载的是第三方互联网页面，不应该开启这个选项。
        // 否则恶意脚本具有访问 Node.js 的能力，可能对用户造成伤害。
        webPreferences: {nodeIntegretion: true}
    })
    
    window.loadFile('index.html')
    window.on('closed', function(){
        window = null
    })
})

app.on('window-all-closed', function(){
    app.quit()
})

4. 运行

执行命令 electron.

在这里插入图片描述

七、Electron API 演示工具

非常好的学习 Electron API 的官网 demo

1. 下载代码

git clone https://github.com/electron/electron-api-demos.git

2. 安装依赖

npm insall

3. 运行

npm start

Electron API DEMOS

在这里插入图片描述

Create and Manage Windows

在这里插入图片描述

八、基本文件结构

在这里插入图片描述

  • package.json - 整个工程的配置文件，软件名称、版本号、依赖库、主进程JS文件名称等

  • main.js - 主进程的启动脚本，一些从这里开始……

  • index.html - 渲染进程的页面文件

  • node_modules - 存放依赖库的文件夹

    使用 npm install 会将所有依赖库下载到这个文件夹

九、主进程和渲染进程

在这里插入图片描述

1. 主进程

  • 一个 Electron 应用有且只有一个主进程
  • 运行 package.json 的 main 脚本的进程被称为主进程

职责:

  • 创建渲染进程（可多个）
  • 控制了应用生命周期（启动、退出 APP 以及对 APP 做一些事件监听）
  • 调用系统底层功能、调用原生资源

可调用的API:

  • Node.js API
  • Electron 提供的主进程 API（包括一些系统功能和 Electron 附加功能）

2. 渲染进程

  • 渲染进程使用 Chromium 来展示 web 页面
  • 主进程使用 BrowserWindow 实例创建页面
  • 一个 BrowserWindow 实例就代表一个渲染进程
  • 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止
  • 渲染进程 = 浏览器窗口 + Node.js

职责:

  • 用 HTML 和 CSS 渲染界面
  • 用 JavaScript 做一些界面交互

可调用的API:

  • DOM API
  • Node.js API
  • Electron 提供的渲染进程 API

十、进程间通信

1. 渲染进程 -> 主进程

渲染进程发送消息

ipcRenderer.send(channel[, arg1][, arg2][, ...])  
ipcRenderer.sendSync(channel[, arg1][, arg2][, ...])  
    channel: String 事件名称  
    arg: (可选)

示例：
ipcRenderer.send('msg_renderder_to_main', '我是来自渲染进程的异步消息');

注意：发送同步消息将会阻塞整个渲染进程，JavaScript是单线程的

主进程监听消息

ipcMain.on(channel, listener)
    channel: String 事件名称
    listener: Function

ipcMain.on('msg_renderder_to_main', (event, data) => {
    console.log(data); // '我是来自渲染进程的异步消息'
});

监听 channel，当接收到新的消息时 listener 会以 listener(event, args…) 的形式被调用。

2. 主进程 -> 渲染进程

主进程发送消息

主动发送
window.webContents.send('msg_main_to_renderder', 'agr1', 'agr2')

根据消息来源发送

ipcMain.on('msg_renderder_to_main', (event, data) => {
    console.log(data); // '我是来自渲染进程的异步消息'
    event.sender.send('msg_main_to_renderder', '主进程收到了渲染进程的异步消息')
});

渲染进程监听

ipcRenderer.on('msg_main_to_renderder', (event, msg) => {
    console.log(msg);
})

3. 渲染进程间通信

  • Electron 没有提供渲染进程之间相互通信的方式

  • 可以在主进程中建立一个消息中转站

    渲染进程首先发送消息到主进程，主进程收到后，根据条件进行分发

十一、Electron API

在这里插入图片描述

十二、崩溃报告

crashReporter

crashReporter.start 创建一个崩溃报告器

const { crashReporter } = require('electron')
crashReporter.start({
  productName: 'YourName',
  companyName: 'YourCompany',
  submitURL: 'https://your-domain.com/url-to-submit',
  uploadToServer: true
})

十三、打包

electron-builder，支持 exe、msi、dmg、app

  1. package.json 添加配置：
"build": {
    "productName": "electron-react", // app中文名称
    "appId": "electron-react",
    
    // 打包后输出的文件夹
    "directories": {
     "output": "dist/"
    }
    
    // windows打包配置
    "win": {
     "target": "nsis",
     "icon": "icon.ico"
    },
    
    // dmg文件打包配置
    "dmg": {
     "artifactName": "electron_react.dmg",
     "contents": [
       {
         "type": "link",
         "path": "/Applications",
         "x": 410,
         "y": 150
       },
       {
         "type": "file",
         "x": 130,
         "y": 150
       }
     ]
    },
    
    // nsis文件打包配置
    "nsis": {
     "oneClick": false,
     "allowToChangeInstallationDirectory": true,
     "shortcutName": "electron-react"
    }
}
  1. 开始打包
    npm run build

十四、前端三大框架

  • React - 用于构建用户界面的 JavaScript 库
  • vue - 渐进式 JavaScript 框架
  • Angular - 现代 Web 开发平台

十五、参考文档

langshanglibie
关注
专栏目录
Electron跨平台桌面应用开发工具-其他
06-12
Electron是GitHub发布的跨平台桌面应用开发工具，支持Web技术开发桌面应用，其本身是基于C++开发的，GUI核心来自于Chrome，而JavaScript引擎使用v8。v10.4.0发行说明修复了LC_ALL环境变量在Electron中更改的问题。...
Electron详解（一）：基本介绍
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
06-06 1万+
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源框架。Electron提供了丰富的本地（操作系统）API，使你能够使用纯JavaScript来创建桌面应用程序。Electron通过集成浏览器内核，使用Web技术来实现不同平台下的渲染，并结合了 Chromium、Node.js 和用于调用系统本地功能的Native API 三大板块。
Electron 小白介绍，你能看懂吗？
编程火箭车（Coding Rocket）专注编程领域
05-21 8310
在最近的学习中，我接触了 Electron 这个前端框架，尽管学习进程断断续续，但我仍想分享一下我对它的了解。
Electron----桌面应用开发框架
最新发布
weixin_41978174的博客
07-22 2094
Electron 是一个开源框架，旨在使用 Web 技术（如 HTML、CSS 和 JavaScript）开发跨平台的桌面应用。它结合了 Chromium 和 Node.js，使开发者能够构建具有原生应用体验的桌面应用程序，同时使用熟悉的 Web 开发工具和技术。它的灵活性、强大的功能和良好的社区支持使得它成为构建现代桌面应用的热门选择。：负责管理应用的生命周期、创建和管理窗口以及处理系统级别的 API 请求。：提供了简化的工具链来创建、开发、打包和发布 Electron 应用。类来创建和管理应用窗口。
跨平台桌面应用的开发框架——Electron
xxxzzzqqq_的博客
03-07 9282
本文介绍了我们对桌面端技术的调研、确定技术选型，以及用 electron 开发过程中，总结的实践经验，如构建、性能优化、质量保障、安全等。希望对读者在开发桌面应用过程中有所帮助，文章难免有不足和错误的地方，欢迎读者在评论区交流。
Electron框架介绍
zhangzhechun的专栏
07-29 3629
需要注意的是，每个Electron应用程序都是一个独立的进程，它们之间是相互隔离的，因此不同的Electron应用程序可以使用不同版本的Chromium来运行其UI和逻辑部分。总之，每个由Electron构建的桌面应用程序在发布时都包含了Node.js运行时环境，这使得它们可以使用Node.js来运行应用程序的后端业务逻辑和系统操作等功能，并且可以脱离Node.js和Electron的依赖直接在用户的计算机上运行。主进程是Electron应用程序的入口点，它负责创建和管理应用程序的窗口和其他功能。
前端框架 Electron 使用总结
qq_50909707的博客
11-19 1万+
效果：可以看到此时并无边框自定义的菜单只需要通过html等写到对应的页面中即可！
一个入门简单、跨平台、企业级桌面软件开发框架
03-11
标题中的“一个入门简单、跨平台、企业级桌面软件开发框架”指的是用于构建桌面应用程序的高级开发工具，这种框架使得开发者能够更容易地创建功能丰富的、跨操作系统（如Windows、macOS和Linux）的应用程序。...
electron-egg: 新一代桌面应用开发框架
qq_32660241的博客
06-20 4129
EE框架已经应用于医疗、学校、政务、股票交易、ERP、娱乐、视频、企业等领域客户端。
对 Electron 架构的理解
zz130428的博客
06-29 1779
Electron 的架构采用了 Chromium 和 Node.js 的组合方式，将 web 技术栈和底层系统功能完美地结合起来，提供了一种灵活、可扩展的桌面应用程序开发方式。对于前端开发人员来说，它提供了一种全新的开发方式和编程思路，为构建高质量的桌面应用程序提供了更多的便利和选择。与传统的桌面应用程序不同，Electron 应用程序使用 HTML、CSS 和 JavaScript 技术栈来实现界面设计和业务逻辑，并且具有良好的跨平台性能和扩展性。
Electron框架：构建跨平台桌面应用的终极解决方案
程序边界
12-17 6791
Electron是一个基于Chromium和Node.js的开源库，用于构建跨平台的桌面应用程序。通过使用Electron，开发者可以使用HTML、CSS和JavaScript等Web技术来编写桌面应用，同时可以利用Node.js的强大功能来实现本地化操作。Electron框架的主要优点是开发效率高、跨平台性能好以及易于维护。《Electron入门与实战》围绕Electron核心的功能展开，讲解了如何使用Electron技术快速开发桌面应用。
【实战】学习 Electron：构建跨平台桌面应用
程序边界
10-18 9439
Electron 最早由 GitHub 开发，它允许开发者使用 Web 技术来构建桌面应用程序。Electron 基于 Node.js 和 Chromium，这两个都是开源项目，因此 Electron 有着丰富的生态系统和文档支持。使用 Electron，开发者可以创建使用 HTML、CSS 和 JavaScript 构建的跨平台桌面应用程序，这些应用程序可以在 Windows、macOS 和 Linux 上运行。
Electron框架使用入门
cnds123的专栏
05-11 3900
Electron框架使用入门 Electron是一个跨平台的桌面应用开发框架，可以让我们用html css js的技术开发跨平台桌面上可以安装的软件。因为Electron使用JavaScript 调用丰富的原生 APIs 来创造桌面应用，所以你必须掌握JavaScript的知识，Electron 使用 web 页面作为它的 GUI，因此需要你还应掌握Html和SS教程。electron背后是node解释器和chromium浏览器内核，因此体积大。 Electron官网 http://www.elect
Electron跨平台开发框架介绍
越陌度阡
04-11 6315
1. Electron框架简介 Electron 是由 Github 开发的一个跨平台的桌面应用开发框架，可以让我们用前端技术开发桌面上面可以安装的软件。 目前用Electron开发的成熟软件有很多，鼎鼎大名的VS Code编辑器就是用Electron开发的。打开Electron的官网，可以看到下面这些软件也是Electron开发的。 Github地址：https://github.com/electron/electron Electron官网：https://www.electronjs.o
几个桌面应用开发框架比较：Electron、Flutter、Tauri、React Native 与 Qt
雨中深巷的油纸伞
12-29 8243
Electron 拥有庞大的社区和广泛的预构建组件，而 React Native 提供强大的组件系统，并允许在移动和桌面平台之间重用代码。然而，它的跨平台支持可能不像其他框架那样无缝，并且可能需要额外的努力才能在所有平台上实现一致的性能和 UI。主要特点：React Native 提供了一种访问本机 API 和功能的方法，但与其他框架相比，它可能需要更多的努力。Electron：以其较高的资源使用率而闻名，Electron 应用程序可能会占用更多内存和 CPU，从而影响较旧或功能较弱的计算机的性能。
Electron框架学习笔记一
热门推荐
haoyuxingchen的博客
04-14 1万+
electron学习笔记
2023 最新 Node.Js 语言实现 Electron.js 桌面应用开发详细教程（进阶篇）
唤醒手腕
08-29 5846
为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染， 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。为了使 Electron 的功能不仅仅限于对网页内容的封装，主进程也添加了自定义的 API 来与用户的作业系统进行交互。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。Electron 应用程序的结构非常相似。
使用Vue和Electron构建一个简单的桌面应用
qq_43326668的博客
05-24 1020
在本篇文章中，我们学习了如何使用Vue和Electron构建一个简单的桌面应用程序。我们还更新了Vue的配置，以便在构建时生成所需的文件。如果你想扩展这个应用程序，你可以添加更多的Vue组件和Electron功能，并将其打包成一个可分发的应用程序。在本篇文章中，我将介绍如何使用Vue和Electron构建一个简单的桌面应用程序。这个代码会创建一个新的Electron窗口，并加载我们Vue项目的index.html文件。接下来，我们需要更新我们的Vue配置，以便在构建时生成Electron所需的文件。
使用Electron开发跨平台JavaScript桌面应用
JavaScript借助Electron框架，为开发者提供了一种便捷的方式去开发跨平台的桌面应用，尽管存在一定的性能和功能限制，但这并不妨碍其在桌面应用领域的广泛应用和创新。对于大多数开发者而言，Electron提供了一条快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值