了解Electron看这一篇就够啦！

前端航海日志
316 阅读6分钟

大家好这里是前端航海日志！ 前段时间因公司需求，我接触到了Electron框架，刚好做了个实践总结分享给大家，如有不对的地方，请大家指正！如果最后对你有帮助的话，欢迎点赞，评论。新人作者创作不易，感谢大家！！！

简介：

官方简介：Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS 和 Linux——不需要本地开发 经验。

官方文档链接：www.electronjs.org/zh/

个人理解：Electron 是一个前端框架，可用于构建跨平台的桌面应用程序（我们使用前端技术写个 Web 应用，然后套上 Electron，就变成了桌面应用程序。）

优点：
  1. 跨平台兼容性强：Electron可在多个操作系统上运行，包括Windows、macOS和Linux等主流操作系统。这种跨平台兼容性极大地降低了开发成本，并且允许您的应用程序覆盖更广泛的用户。
  2. 良好的开发体验：使用Web技术开发桌面应用程序可以让开发人员更加熟悉和高效地进行开发。它不需要学习新的编程语言或开发工具，而是使用Web技术中已经熟悉的工具和开发流程来构建应用程序。此外，Electron还提供了丰富的API和工具，使开发者可以轻松地集成第三方库和插件。
  3. 易于部署和更新：Electron应用程序的打包和部署非常简单。您只需要将应用程序打包成一个可执行文件或安装程序即可。在更新应用程序时，可以通过向应用程序中添加新的代码包或通过自动更新机制实现快速更新。
缺点：
  1. 大小较大：Electron应用程序较大，因为它需要包含Chromium等浏览器组件和Node.js运行时环境。这意味着它需要占用更多的磁盘空间和内存，对于一些资源有限的设备，这可能会成为问题。
  2. 性能问题：Electron应用程序可能会因为其庞大的体积而导致性能问题。特别是对于复杂的应用程序或大型数据集，可能会导致应用程序运行缓慢。
  3. 安全问题：Electron使用Web技术来构建桌面应用程序，这意味着应用程序可能会受到Web应用程序中出现的一些安全问题的影响。例如，XSS攻击和其他Web攻击可能会导致应用程序中的安全漏洞。此外，使用Electron开发的应用程序需要额外的安全措施来确保用户数据和应用程序的安全。
工作机制：

electron应用程序区分主进程和渲染进程：

主进程：负责控制应用程序的生命周期、创建和管理应用程序窗口，有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。

渲染进程：负责完成渲染界面、接收用户输入、响应用户的交互等工作。

（一个Electron应用只有一个主进程，但可以有多个渲染进程。）

创建electron项目：

（demo实现网页收藏功能）

1、创建

npm create vite@latest electron-demo

2、安装electron

npm install electron --S（将包安装为开发依赖项。）

3、根目录创建配置文件main.js (程序入口文件)

const { app, BrowserWindow } = require('electron');
const path = require('path');
const WinState = require('electron-win-state').default;
​
  // 获取网站的截图
const getSource = require('./controller/getSource');
const { get } = require('http');
  //alert
const alert = require('./controller/alert');
​
const createWindow = () => {
  const winState = new WinState({
    defaultWidth: 1000,
    defaultHeight: 800
  });
  const win = new BrowserWindow({
    //自定义窗口的状态
    ...winState.winOptions,
    webPreferences: {
      // 预加载的js
      preload: path.resolve(__dirname, './preload/index.js'),
    },
​
    show: false,
  });
​
  win.loadURL('http://localhost:5173/');
​
  win.webContents.openDevTools();
​
  winState.manage(win);
​
  win.on('ready-to-show', () => {
    win.show();
});
​
}
​
app.whenReady().then(() => {
  createWindow();
​
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0)createWindow();
  })
});
​
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin')app.quit();
})

4、修改 package.json （按需配置）

{
  "name": "electron-demo",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
  },
  "dependencies": {
    "electron": "^30.0.1",
    "electron-win-state": "^1.1.22",
    "loadsh": "^0.0.4",
    "lodash": "^4.17.21",
    "normalize.css": "^8.0.1",
    "pinia": "^2.1.7",
    "store2": "^2.14.3",
    "stylus": "^0.63.0",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "nodemon": "^3.1.0",
    "vite": "^5.2.0"
  }
}

5、运行项目

// 先启动vue项目
npm run dev
// 然后启动electron
npm start

6、preload文件夹

preload文件夹通常用于在Electron应用程序中实现预加载脚本的功能。在Electron中，渲染进程（即前端页面）和主进程（即后端逻辑）是分开的，preload文件夹则是位于这两个进程之间的一座桥梁。
​
preload文件夹通常包含一些JavaScript脚本文件，这些脚本文件将在渲染进程启动时自动执行。这些脚本文件可以被用来修改渲染进程的行为和功能，例如增加新的API、拦截和修改网络请求、修改DOM等等。
​
preload文件夹的使用有以下一些注意点：
​
preload脚本可以通过nodeIntegration来访问Node.js的API，但要注意安全性问题，避免被恶意脚本利用。
preload脚本应该只包含与应用程序直接相关的逻辑，避免将不必要的代码注入渲染进程。
preload脚本可以通过webContents.send()方法向渲染进程发送消息，但要注意消息的安全性和合法性，避免被恶意脚本利用。
preload脚本应该被严格控制，只允许可信的脚本文件访问应用程序的敏感数据和操作。
在Electron中，preload文件夹的默认位置是在应用程序根目录下的“app”文件夹内，但可以通过设置webPreferences.preload选项来指定不同的preload文件夹路径。
​
// 代码示例
const { contextBridge,ipcRenderer} = require('electron')
​
const sendUrl = async (url) => {
  let result = await ipcRenderer.invoke('on-url-event', url)
  return result
}
​
const alert= (msg) => {
  ipcRenderer.invoke('on-alert-event', msg)
}
​
contextBridge.exposeInMainWorld('myApi', {
  sendUrl,
  alert
})

7、避免main.js文件冗余，可以创建controller文件夹来写要实现的相关方法

// 获取屏幕截图方法代码示例
const { ipcMain, BrowserWindow } = require('electron')
​
const getSource = (url) => {
  return new Promise((resolve, reject) => {
      const win = new BrowserWindow({
        width: 500,
        height: 500,
        show: false,
        webPreferences: {
          offscreen: true,
        }
    })
      win.loadURL(url)
  
      win.webContents.on('did-finish-load', async () => {
        const title = win.getTitle()
        
        try{
          const image = await win.webContents.capturePage()
          const screenshot = image.toDataURL()
    
          resolve({
              title,
              screenshot,
              url,
            })
      
        }catch(err){
          reject(err)
        }
        })
  })
}
​
ipcMain.handle('on-url-event', async (e, url) => {
  const result = await getSource(url)
  return result
})

8、打包（electron-builder）

安装：npm install electron-builder -D
package.json 配置修改
打包：npm run build
xxxxxx 1.0.0.exe是安装文件
打开exe文件并按步骤安装

感谢大家的支持！如果这篇文章帮到你，别忘了点赞 ❤、收藏⭐，让我们在前端的航海路上继续扬帆起航！

avatar
文章
阅读
粉丝