一文入门跨平台开发框架 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 开发平台

十五、参考文档

# electron
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

动物识别系统 python实现+UI

avatar 腾讯云开发者社区
cover

H3C多WAN口负载均衡实验

avatar 腾讯云开发者社区
cover

VSOMEIP — SOME/IP 开源实现

avatar 腾讯云开发者社区