electron知识整理和问题汇总（持续更新中）

electron

发布日期: 2023-08-05

更新日期: 2024-11-22

文章字数: 1.7k

阅读时长: 7 分

阅读次数:

electron npm 地址

Electron NPM 镜像: https://registry.npmmirror.com/binary.html?path=electron/
Electron Builder 镜像: https://mirrors.huaweicloud.com/electron-builder-binaries/

知识整理

1.进程间通讯

快速通道 electron 进程间通讯

2.app.asar 说明

快速通道关于 electron-vue 里的 app.asar

3.应用信息获取

// 版本号和应用信息
const version = remote.app.getVersion(); //应用程序的版本号。 如果应用程序的 package. json 文件中找不到版本号, 则返回当前包或者可执行文件的版本。
const appName = app.getName(); //当前应用程序的名称，即为该应用程序 package.json 文件的 name 字段。
const appPath = app.getAppPath(); //当前应用程序目录，如D:\product\dist
const userDataPath = app.getPath("userData"); //用户数据目录 您可以通过名称请求以下路径(https://www.electronjs.org/zh/docs/latest/api/app#appgetpathname)

4.剪贴板操作

// Electron剪贴板
const { clipboard } = window.require("electron");
clipboard.writeText("要复制的内容");

// 原生JS复制
function copyToClipboard() {
  const copytext = document.getElementById("copytext");
  copytext.value = "要复制的内容";
  copytext.select();
  document.execCommand("copy");
  this.$message({
    message: "复制成功！",
    type: "success",
  });
}

更多详情查看：clipboard 的用法

5.软件奔溃捕获

// 获取奔溃堆栈文件存放路径
// electron 低版本 path.join(app.getPath("temp"), app.getName() + " Crashes");
// electron 高版本 app.getPath("crashDumps");

// 主进程崩溃监听
mainWin.webContents.on("crashed", async (e, killed) => {
  let result = await dialog.showMessageBox({
    type: "error",
    title: "应用程序崩溃",
    message: "当前程序发生异常，是否要重新加载应用程序?",
    buttons: ["是", "否"],
  });
  if (result.response == 0) {
    mainWin.webContents.reload();
  } else {
    app.quit();
    console.log("系统奔溃，可在此进行日志收集，将奔溃原因写入日志文件");
  }
});

// 或者
app.on("render-process-gone", async (e, w, d) => {
  const _path = path.join(app.getPath("crashDumps"), "crashederror.log");
  if (!fs.existsSync(_path)) {
    fs.writeFileSync(
      _path,
      `[${new Date()}] 系统出错日志
    ·clean-exit - 以零为退出代码退出的进程
    ·abnormal-exit - 以非零退出代码退出的进程
    ·killed - 进程发送一个SIGTERM，否则是被外部杀死的。
    ·crashed - 进程崩溃
    ·oom - 进程内存不足
    ·launch-failed - 进程从未成功启动
    ·integrity-failure - 窗口代码完整性检查失败
    \n`,
      { encoding: "utf-8" }
    );
  }
  if (d.reason == "crashed" || d.reason == "oom") {
    // 进程崩溃 / 进程内存不足
    let result = await dialog.showMessageBox({
      type: "error",
      title: "应用程序崩溃",
      message: "当前程序发生异常，是否要重新加载应用程序?",
      buttons: ["是", "否"],
    });
    const msg = `[${new Date()}] 渲染进程被杀死-${d.reason}`;
    if (result.response == 0) {
      fs.appendFileSync(_path, `${msg}重新加载软件\n`);
      mainWin.webContents.reload();
    } else {
      fs.appendFileSync(_path, `${msg}\n`);
      app.quit();
    }
  } else {
    fs.appendFileSync(_path, `[${new Date()}] 渲染进程被杀死${d.reason}\n`);
  }
});

reason string - 渲染进程消失的原因。可选值：
- clean-exit - 以零为退出代码退出的进程
- abnormal-exit - 以非零退出代码退出的进程
- killed - 进程发送一个 SIGTERM，否则是被外部杀死的。
- crashed - 进程崩溃
- oom - 进程内存不足
- launch-failed - 进程从未成功启动
- integrity-failure - 窗口代码完整性检查失败
exitCode Integer - 进程的退出代码，除非在 reason 是 launch-failed 的情况下， exitCode 将是一个平台特定的启动失败错误代码。

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

// 开启crash捕获/崩溃报告器配置 官方建议写在app.on('ready')前
crashReporter.start({
  productName: "Your-Application-Name",
  companyName: "Your-Company-Name",
  submitURL: "https://www.xxx.com", // 上传到服务器的地址
  uploadToServer: false, // 不上传服务器
  ignoreSystemCrashHandler: false, // 不忽略系统自带的奔溃处理，为 true 时表示忽略，奔溃时不会生成奔溃堆栈文件
});

// 简写
crashReporter.start({ uploadToServer: false });

6.showOpenDialog

<div class="file">
  补充检材文件
  <input
    ref="file"
    type="file"
    accept="audio/wav"
    multiple="multiple"
    @click.stop
    @change.stop="newAddMaterial"
  />
</div>
<script>
  let file1 = this.$refs.file.files;
  let file2 = "";
  dialog
    .showOpenDialog({
      buttonLabel: "确认",
      properties: ["openFile", "multiSelections"],
      filters: [
        {
          name: "audio/video",
          extensions: ["wav", "WAV"],
        },
        { name: "All Files", extensions: ["*"] },
      ],
    })
    .then(({ filePaths }) => {
      console.log(filePaths);
      const form = new FormData();
      const buffers = fs.readFileSync(filePaths[0]);
      const file = new File([buffers], "".split(".")[0], {
        type: "audio/wav",
      });
      console.log(file);
      file2 = file;
    });

  // 此时 file1 和 file2 相同
</script>

fix：表示该提交用于修复错误或问题。
feat：表示该提交用于添加新功能。
docs：表示该提交用于更新文档。
style：表示该提交用于代码格式化或结构调整。
refactor：表示该提交用于代码重构，不添加新功能或修复错误。
perf：表示该提交用于提高性能。
test：表示该提交用于测试代码。

问题汇总

1.electron 打包时报错

使用 electron 打包时候报ExecError: D:\zlwl\el\win-dahui\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE和cannot resolve https://npm.taobao.org/mirrors/electron/13.0.0/electron-v13.0.0-win32-x64.zip: status code 404的错误，如下图：

1.首先处理ExecError: D:\zlwl\el\win-dahui\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE的问题
在项目中的.npmrc 中加上 ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ 如果没有这个文件新建一个即可；

2.然后就是cannot resolve https://npm.taobao.org/mirrors/electron/13.0.0/electron-v13.0.0-win32-x64.zip: status code 404的错误
这个错误其实就是这个地址不知道为啥搞错了应该是 https://npm.taobao.org/mirrors/electron/v13.0.0/electron-v13.0.0-win32-x64.zip 这个地址，手动访问下载后放到 C:\Users\用户名\AppData\Local\electron\Cache\下面；如下图