(1)electron基础知识

chen77
302 阅读5分钟

一、Electron简介

electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用的开源框架。它将Chromium和Node.js引擎组合在一起，使得你可以使用Web技术构建原生应用。Electron支持Windows、macOS和Linux等多个平台。

底层实现

由于应用场景是在系统平台上开发应用，所以我们开发时需要有能调用原生系统api的能力。为了能让前端语言能跟底层可以交互，Electron集成了Nodejs+Chromium 。Nodejs主要负责应用程序主线程逻辑控制、底层交互等功能，Chromium主要负责渲染线程窗口的业务逻辑。可以简单理解为：electron主进程是使用的node环境 ，渲染进程则通过vue等前端框架去构建用户界面

img

作者：SugarTurboS 链接：juejin.cn/post/684490… 来源：稀土掘金

二、写一个最简单版本的Electron

新建一个项目，然后初始化npm，生成package.json 文件

mkdir helloword
cd helloword
npm init

修改package.json文件，增加npm run start命令

{
  "name": "helloword",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

通过npm安装Electron

npm i electron --save-dev 或 npm i electron -D

在根目录创建main.js和index.html

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)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

运行

npm run start

三、Electron应用程序结构

Electron应用程序分成三个基础模块：

  1. 主进程
  2. 进程间通信
  3. 渲染进程

image

在浏览器中，基于安全策略考虑，web页面通常是在一个沙盒环境中运行的，不被允许去接触原生的资源。然而在Electron中允许页面（渲染进程）调用Node.js的API，所以页面可以与操作系统底层进行交互。

我们知道每个进程都是一个独立运行单位，相互不能直接通信。在Electron中提供两种方法在主进程与渲染进程之间进行通信。

  • 使用ipcRenderer和ipcMain模块发送消息
  • 使用remote模块进行 RPC 方式的通信

主进程

主进程就像是应用程序的管家，负责管理整个应用程序的生命周期，所有的渲染进程的创建。

渲染进程

渲染进程窗口实例通过electron提供的 BrowserWindow对象创建，每一个实例都是一个独立的进程，它只关心它所在运行的web页面。实例被销毁后，相应的渲染进程也会被销毁。且主进程被销毁后，渲染进程全部也会被销毁。在 electron 浏览器的默认策略下，每一个tab都是独立的进程，electron 也正是利用了这一策略。

四、基于 electron+vite+vue 开发

1.脚手架创建项目

# 创建Vue项目
 npm init vue 
# 安装依赖
npm install
# 一定要安装成开发依赖
npm install electron electron-builder -D 
# 安装超时 请使用某宝镜像 或者XX上网
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/

2.根目录下添加文件夹electron作为主进程

image.png

3.添加一些辅助依赖

# 添加concurrently，可以同时启动多个进程
npm i concurrently -D
#添加nodemon 热更新
npm i nodemon -D

4.修改package.json

{
  "name": "my_first_electron",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "main": "electron/index.js", //定义electron 主进程脚本 , 或者定义成index.cjs符合commonJs规范
  "scripts": {
    "dev": "concurrently \"vite\" \"nodemon --exec electron . --watch ./ --ext .js,.html,.scss,.vue,.ts,.css\"",
    "build": "vite build",
    "electron:dist": "vue-tsc && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "electron": "^28.1.0",
    "electron-builder": "^24.9.1",
    "vite": "^5.0.10"
  }
}

如果遇到commonJs报错，解决办法：如果要用js，则删除type：module，如果要用cjs，则可以保留type：module

5.定义 electron/index.js 主进程脚本

const { app, BrowserWindow } = require("electron");
const path = require("path");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 600,
    height: 600,
    alwaysOnTop: true,
  });
  win.webContents.openDevTools();
  win.loadURL("http://localhost:5173"); //开发环境
  // win.loadFile(path.resolve(__dirname, "index.html"));  //线上环境配置loadfile
};

app.whenReady().then(() => {
  createWindow();
  app.on("window-all-closed", () => {
    if (process.platform != "darwin") app.quit;
  });

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow();
    }
  });
});

6.npm run dev运行

image.png

7.解决Electron Security Warning (Insecure Content-Security-Policy)报错

因为 Electron 项目可以执行javascript代码，也可以访问用户电脑的文件系统，所以访问任何不受信任的内容都可能带来安全隐患。

当没有配置安装策略时，Electron会报出警告，你可以在渲染进程的开发者工具中查看到。

CSP

内容安全策略(CSP) 是应对跨站脚本攻击和数据注入攻击的又一层保护措施。 我们建议任何载入到Electron的站点都要开启。

定义方式

访问内容均来自项目资源

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />

允许访问 *.x'x'x.com 源内容

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com; script-src '*.xxx.com'" />

模板文件

我们在模板文件中定义安全策略，以告之Electron我们已经对安全策略进行了定义，上面的警告就不会出现了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'  http://*  https://*;">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

五、成熟的脚手架electron-vite

日常开发可以使用 electron-vite (opens new window)或 electron-vite-vue (opens new window)、 electron-react-boilerplate (opens new window)等脚手架快速创建项目，脚手架已经为我们完成了基本的配置，并支持使用 Vue与React等技术开发Electron项目。

下面使用 electron-vite脚手架创建项目

pnpm create @quick-start/electron

然后按照提示操作即可!

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

然后进行项目目录 electron-vite-vue 安装依赖包

pnpm install

然后运行项目

pnpm run dev

image.png

avatar
文章
阅读
粉丝