【前端】Electron入门开发教程，从介绍Electron到基础引用以及部分深度使用，附带常见的十个报错问题的解决方案和代码优化。

Electron 是一个使用 JavaScript、HTML 和 CSS 等 Web 技术创建跨平台桌面应用程序的框架。它结合了 Chromium 渲染引擎和 Node.js 运行时，允许开发者构建高质量的桌面应用。下面是一个简要的 Electron 开发教程，从基础到深入，并包括一些常见的报错问题及其解决方案。

一、介绍 Electron

Electron 能够使用前端技术栈开发桌面应用，支持 Windows、macOS 和 Linux。其主要特点包括：

使用 HTML、CSS 和 JavaScript 构建用户界面。
内置了对自动更新、原生菜单和通知的支持。
允许开发者使用 Node.js 的 API 和任何 npm 模块。

二、创建基础 Demo

安装 Node.js：确保已安装最新版本的 Node.js。

初始化项目：

复制代码

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

安装 Electron：

复制代码

npm install electron --save-dev

创建主进程文件(main.js)：

复制代码

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

创建 index.html 文件：

复制代码

<!DOCTYPE html>
<html>
  <head>
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

在 package.json 中添加启动脚本：

复制代码

"scripts": {
  "start": "electron ."
}

运行应用：

复制代码

npm start

三、部分深度使用技巧

1. 模块化开发

将应用拆分为多个文件和模块，可以使代码更易于维护和扩展。例如，我们可以将主进程和渲染进程的逻辑分离，并且还可以为不同的功能创建独立的模块。

示例：分离窗口创建逻辑到单独文件

main.js (主进程入口)

复制代码

const { app } = require('electron')
const createWindow = require('./window')

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

window.js

复制代码

const { BrowserWindow } = require('electron')
let win;

function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    })

    win.loadFile('index.html')
}

module.exports = createWindow

2. 集成数据库（如 SQLite）

在 Electron 应用中集成数据库可以帮助存储数据。下面是如何在 Electron 中使用 SQLite 的简单例子。

安装 sqlite3

复制代码

npm install sqlite3

在主进程中使用

复制代码

const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('./mydb.sqlite', sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE, (err) => {
  if (err) {
    console.error(err.message);
  }
  console.log('Connected to the mydb SQlite database.');
});

db.serialize(() => {
  db.run("CREATE TABLE lorem (info TEXT)", (err) => {
    if (err) {
      console.log("Table already exists.");
    } else {
      console.log("Table created!");
    }
  });
});

db.close((err) => {
  if (err) {
    console.error(err.message);
  }
  console.log('Close the database connection.');
});

四、常见报错及解决方案

1. 无法找到模块 'electron'

复制代码

Error: Cannot find module 'electron'

原因：未安装 Electron 或者 node_modules 目录被删除。
解决方案：
- 确保已经安装了 Electron：npm install electron --save-dev
- 检查 package.json 文件中是否有正确的依赖项。

2. 白屏或无法加载页面

复制代码

Not allowed to load local resource

原因：路径配置错误或者安全设置阻止了本地资源的加载。
解决方案：
- 在 main.js 中确保正确设置了文件路径：
  复制代码
```
win.loadFile('path/to/your/index.html')
```
- 如果使用的是 URL，则需要启用 webSecurity 设置为 false（不推荐用于生产环境）。

3. Node.js 集成相关错误

复制代码

Uncaught ReferenceError: require is not defined

原因：默认情况下，Electron 的渲染进程中禁用了 Node.js 集成。

解决方案：

在创建窗口时启用 Node.js 集成：

复制代码

webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
}

4. 关于上下文隔离的问题

复制代码

Unable to access property/method from preload script

原因：当启用了 contextIsolation 但没有正确使用预加载脚本暴露 API 给渲染进程时会发生此问题。

解决方案：

使用预加载脚本来暴露必要的 API：

复制代码

// preload.js
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
    doSomething: () => console.log('Doing something...')
});

在渲染进程中使用暴露的 API：

复制代码

window.myAPI.doSomething();

5. 窗口闪烁或无法正常显示

错误信息：通常没有明确的错误信息，但可能会观察到窗口尺寸不符合预期或内容显示异常。
原因：可能与屏幕分辨率、DPI 设置或窗口初始化参数有关。
解决方案：
- 调整窗口大小和位置参数以适应不同的屏幕设置：
  复制代码
```
win.setSize(800, 600, true); // 最后一个参数表示是否动画化调整大小
```

6. 打包后的应用无法运行

错误信息：各种，取决于具体问题，可能是缺少某些依赖或资源文件。
原因：打包工具配置不当，导致必需的文件或依赖缺失。
解决方案：
- 确保所有静态资源都被正确包含在打包过程中。
- 对于复杂的项目，考虑使用像 electron-builder 这样的工具进行更全面的打包管理。

7. 权限不足导致的失败

复制代码

EACCES: permission denied

原因：尝试访问受保护的系统资源而没有足够的权限。
解决方案：以管理员身份运行应用，或修改文件/目录的权限。

8. 内存泄漏

错误信息：无直接错误提示，但可以看到内存使用量持续增加。
原因：未能正确清理不再使用的对象或事件监听器。
解决方案：确保及时释放不再需要的对象和解除事件监听器绑定。

9. 网络请求被阻止

复制代码

Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

原因：CSP（内容安全策略）设置过于严格。
解决方案：适当放宽 CSP 设置，允许必要的外部请求。

10. 第三方库兼容性问题

错误信息：根据具体情况而异，通常涉及特定库的功能失效。
原因：使用的第三方库版本与 Electron 版本不兼容。
解决方案：检查并更新第三方库至最新版本，或寻找该库的 Electron 兼容替代品。

以上是关于如何在 Electron 应用中进行更深层次开发的一些示例，包括模块化、性能优化以及与第三方服务或库的集成等。。每个部分都可以根据实际需求进一步拓展和定制。