（1 / 3）Electron知识学习 · 基础篇

老张的哲学

发布于 2023-01-09 18:01:20

9840

发布于 2023-01-09 18:01:20

Electron是一个跨平台的桌面客户端框架，使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，文档:https://www.electronjs.org/zh/docs/latest，当前使用最新稳定版本:20.1.4

特性

我们可以从中了解到他实现的方式以及他的应用场景我认为他们最大特点就是: 主进程和渲染进程就行隔离(沙箱模式) 当时用户操作和渲染的事情都是交给渲染进程当需要操作系统API,例如:创建新窗体,获取电脑的相关信息等就交给主进程也就是说当主进程和渲染进程需要交互时就会涉及到进程之间的通讯我后面会演示到

Web技术

Electron 基于 Chromium 和 Node.js 让你可以使用 HTML, CSS 和 JavaScript 构建应用

开源

Electron是一个由OpenJS基金会和一个活跃的贡献者社区管理的开源项目

跨平台

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序

功能

下面列举一些我们常用到的功能自动更新通过框架可以实现程序自动更新原生的菜单和通知我们使用的窗体程序一些原生控件都可以实现崩溃报告崩溃报告记录以便分析问题调试和性能分析在开发时可对其进行调试和性能分析 Windows 安装程序可以打包成可执行文件,用户的使用体验良好

生命周期

Electron分为主进程和渲染进程左边是主进程右边是渲染进程

安装Nodejs

Electron桌面端程序依赖于Nodejs 这里我们需要先安装Nodejs 下载地址:https://nodejs.org/zh-cn/ 我们下载一个长期维护版本即可

安装完成后我们查看是否安装成功执行npm -v和node -v

npm -v
node -v

安装VSCode

Visual Studio Code简称vscode 用来开发前端项目的开发工具当然也可以开发java和dotnet后端代码下载地址:https://code.visualstudio.com/#alt-downloads

下载管理员版本

避免出现各种问题,这里推荐下载下面管路员版本(system)版本根据自己的电脑的操作系统对应就行下载你的操作系统是64位就下载64位版本

创建启动项目

首先我们创建自己的项目目录并初始化基本配置执行下面的命令

mkdir my-electron-app && cd my-electron-app
npm init

填写项目的信息

填写包名称接着会让你输入包的名称默认是当前根目录文件夹名称然后回车填写版本号接着输入版本号默认是1.0.0 然后回车填写描述接着输入描述(description) 这里我们就需要填写了应用程序打包时需要这个描述(description) 然后回车命名主入口接着就命名入口的js 默认是index.js 这里我们为了方便检视就改成main.js 然后回车填写测试命令接着出现一个test command 不用理会,我们回车填写git仓库地址没有就不填写填写关键词填写项目的一些关键词例如:XXX系统填写作者(author) 这里我们就填写公司名称填写license 然后回车确认信息回车后会让你确认信息无误后就输入yes 然后回车

项目基本信息创建完成后

我们可以用vscode来接管开发等工作

首先定位到项目根目录并打开终端

打开package.json这里可以看到我们刚才的项目信息

这里的操作基本上前端框架操作基本上没什么区别

接下来就是加载Electron开发依赖

引入Electron开发依赖

对当前项目引入Electron的开发依赖执行安装指令

npm install --save-dev electron

接着就需要在package.json添加执行Electron的指令添加start命令能让您在开发模式下打开您的应用

"start": "electron ."

此时我们可以运行start指令看看出现报错很明显我们现在还没配置程序主入口

创建并启动窗体程序

Electron开发依赖环境安装后接着我们就需要开始编写一个桌面端程序的示例

添加一个页面

首先添加一个我们需要展示的页面我们在根目录添加一个index.html的页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

添加程序主入口

首先我们需要在项目根目录添加main.js文件然后添加如下内容

//获取依赖
//app:模块，它控制应用程序的事件生命周期
//BrowserWindow:模块，它创建和管理应用程序 窗口
const { app, BrowserWindow } = require('electron')

//创建窗体并指定第一个要显示的页面index.html
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}
//窗体调用显示
app.whenReady().then(() => {
  createWindow()
})

运行程序

接下来我们执行运行指令可以看得出来我们的程序启动起来了

npm start

获取当前版本信息

如果我们需要获取到当前的Electron,NodeJs,Chromium等版本号这时我们就需要调用相关接口下面我来演示一下首先我们我们需要添加一个预加载脚本我们在根目录添加一个preload.js文件并添加如下内容 window和 document全局渲染器 process.versions是Node.js环境 preload.js

//对window添加一个监听
window.addEventListener('DOMContentLoaded', () => {
    //添加一个方法
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
    //对应显示版本号
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

接着改造一下main.js 把preload.js加载到Electron中 __dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹) path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串 main.js

//获取依赖
//app:模块，它控制应用程序的事件生命周期
//BrowserWindow:模块，它创建和管理应用程序 窗口
const { app, BrowserWindow } = require('electron')

//加载path依赖
const path = require('path')

//创建窗体并指定第一个要显示的页面index.html
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        //前置加载
        preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
//窗体调用显示
app.whenReady().then(() => {
  createWindow()
})