electron开发过程中遇到的一些坑

FingerLiu 发布于2019-08-26 10:36 / 1665人阅读

摘要：导致下载流程受阻问题中使用到子进程的时候，是把子进程当作一个外部依赖来做的，打包后并不会将子进程的代码打进到包中，需要额外进行配置。子进程中用的第三方包都需要在中进行配置。

在公司开发的下载器过程中，遇到的一些坑点 1.electron中弹窗的确认取消以及系统自带的叉号之间的关系

场景：在用户退出app时，需要提示用户是否确认退出，此时弹窗出现，如果点击确认就继续退出，执行回调，否则的话，不退出

问题：点击叉号的时候，回调中返回的值是0，由于代码中写的buttons顺序为["确认", "取消"]，点击“确认”的时候对应的response也是0，就导致了点击“确认”和点击叉号的行为一致，这样的话是不正确的，点击叉号应该等同于取消退出。

// 问题代码，点击确认按钮会退出，点击右上角叉号也会退出
dialog.showMessageBox(mainWindow, { buttons: ["确认", "取消"] }, (response) => {      if (reponse === 0) {
    // 执行退出操作
  } 
});
// 修改后代码，点击确认退出，点击右上角叉号不退出
dialog.showMessageBox(mainWindow, { buttons: ["取消", "确认"] }, (response) => {
  if (response === 1) { 
    // 执行确认退出操作
  } 
});

2.打包后子进程中的代码没有执行的问题

场景：在本地开发过程中，使用子进程去下载资源，能够正常的下载，但是打包之后，发现下载不了，子进程中的事件没有执行。导致下载流程受阻

问题：electron中使用到子进程的时候，是把子进程当作一个外部依赖来做的，打包后并不会将子进程的代码打进到包中，需要额外进行配置。
解决方式：对子进程文件进行额外配置

注：本项目脚手架基于electron-vue，配置文件和electron-vue保持相同

打包配置：asarUnpack 这个配置是用来将子进程中用的一些第三方包进行整理，否则子进程找不到这些包，就跑不起来。子进程中用的第三方包都需要在asarUnpack中进行配置。
extraResources 这个配置用来将我们的代码子进程文件所在目录，打包出来放在一个指定的地方，在代码中有需要引用子进程文件的地方，就用这个地址去找对应的js文件，因为开发和打包后的路径是不一样的，具体package.json配置如下

    "mac": {
      "icon": "build/icons/icon.icns",
      "extendInfo": {
        "CFBundleURLSchemes": [
          "link"
        ]
      },
      "asarUnpack": [
        "**/node_modules/electron-log/**/*",
        "**/node_modules/unzipper/**/*",
        "**/node_modules/axios/**/*",
        "**/node_modules/archiver/**/*"
      ],
      "extraResources": [
        {
          "from": "src/main",
          "to": "app.asar.unpacked/download"
        }
      ]
    },
    "win": {
      "icon": "build/icons/icon.ico",
      "asarUnpack": [
        "**/node_modules/electron-log/**/*",
        "**/node_modules/unzipper/**/*",
        "**/node_modules/axios/**/*",
        "**/node_modules/archiver/**/*"
      ],
      "extraResources": [
        {
          "from": "src/main",
          "to": "app.asar.unpacked/download"
        }
      ],
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }

子进程fork路径：electron中开发和打包后子进程的fork路径并不相同，开发时候，可以直接使用当前路径进行引用，但是打包后子进程js文件直接通过相对路径就获取不到了。所以fork子进程的时候路径需要如下配置，process.resoucesPath: electron中定义的资源目录的路径，在打包后子进程js所在的路径。

let isDev = process.env.NODE_ENV !== "production";
let scriptPath = isDev ? path.join(__dirname, "child_download_serial.js") : path.join(process.resourcesPath, "app.asar.unpacked/download/child_download_serial.js");

上面两步做完了，打包完毕后可以在安装后的安装包下看到自己子进程的代码目录，此时说明配置成功，并且子进程和主进程能够正常通信了。

以上方案在windows下和mac下都适用

3.子进程中的log输出不了

场景：想看一下子进程中输出的log，查看子进程的执行情况

问题：子进程的console在控制台中看不到，因为子进程和父进程是分开的，我们只能看到父进程的输出

解决方式：拿到子进程后，在父进程中监听子进程的stdout.on("data")事件，这样在子进程中的所有console.log在父亲进程中都会触发data事件，父进程可以输出子进程的console内容。注意fork的时候需要给一个silent:true的配置，如果为 true，则子进程的 stdin、stdout 和 stderr 将会被输送到父进程，否则它们将会继承自父进程。同理，也可以监听子进程的stderr的data事件，可以捕获到子进程的错误

childDownload = fork(scriptPath, [], { silent: true });
childDownload.stdout.on("data", data => {
  console.log("子进程的console", data.toString());
});

4.electron闪退的问题

场景：在退出软件的时候，由于代码原因报了一个错误，然后软件成功关闭，但是当再次手动打开软件时，出现闪退情况

问题：主进程出错后，没有对错误进行捕获，导致再次打开软件依然有这个错误存在，软件打不开

解决方式：全局进行一个错误捕获，避免某些情况下的错误未捕获导致闪退打不开软件的问题

// 必要的全局错误捕获
process.on("uncaughtException", error => {
  log.error(error.stack || JSON.stringify(error));
  app.exit();
});

5.web端唤醒客户端覆盖问题

场景：错题本下载器安装后，再安装错题本logger工具，此时再web中点击唤醒下载工具，唤醒的是错题本logger工具

问题：再两者打包的时候，对应的appId都是相同的，导致后安装的软件将前安装的软件给顶替了，当再网页中唤醒的时候，就将替换后的软件唤醒了

解决方式：package.json中的appId保证唯一性

6.electron下使用子进程，找不到第三方包的问题

electron下使用子进程，找不到第三方包的问题
原文链接：https://github.com/chaijinson... 持续更新

GPU云服务器云服务器配置阿里云window服务器的一些坑 php开发遇到的难点 vps日常维护中的一些要点总结开发的过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106444.html

【PPic】基于Electron+Vue+iView的图床应用设计

摘要：其实这个应用并不是那么的特别需求，一来本人写越来越少，二来开发工作也是越做越少，再者目前的编辑器几乎都支持直接剪切板上传图片，使图床应用的场景越来越少。其实这个应用并不是那么的特别需求，一来本人写blog越来越少，二来开发工作也是越做越少，再者目前的编辑器几乎都支持直接剪切板上传图片，使图床应用的场景越来越少。不过本人本着不想丢弃技术的内心想法，以及锻炼自己写一个完整项目，还是开启了...

call_me_R 2019-08-21 11:51 评论0 收藏0
electron打包：electron-packager及electron-builder两种方式实

摘要：前言本文主要介绍如何通过及两种方式，将已有的应用打包成格式和可执行文件。导致了在打包的过程中非常慢。由于是初次接触，如读者在文中发现错误，请及时指正。前言 showImg(https://segmentfault.com/img/bV6zNn?w=1319&h=594); 本文主要介绍如何通过electron-packager及electron-builder两种方式，将已有的ele...

KaltZK 2019-08-22 15:38 评论0 收藏0
从零开始使用Electron + jQuery开发桌面应用（三）注意事项

摘要：例发信方收信方三使用打包时注意事项打包文件夹时，文件夹内不要用奇奇怪怪的文件比如等，以及名称带有汉字的文件。之前两章写了electron的基本用法，本来想接着写用jquery去完整的写一个程序来着，但是考虑到一是js实在没啥好写的，再就是我现在写的这个程序并不想开源，所以一直就没写下去。这两天重装系统后重新配置了环境变量，再执行时遇到一些坑，就记录下来，以免以后再进坑。一、elec...

laoLiueizo 2019-08-19 18:25 评论0 收藏0
开发了一款写作软件(OSX,Windows)，附带Electron开发指南

摘要：本来写这个项目时就没打算来自己实现富文本编辑器，本着能用开源就用开源的原则，在项目里测试了一些开源的编辑器，发现或多或少都有些问题，后来一琢磨，反正这个项目的富文本编辑器需求不复杂，就自己实现一个好了。断断续续写了个把月，终于在昨天完成了第一版… 笔落写作一款帮助网络写手更方便地进行小说创作的PC软件，目前支持 OSX/Windows 名字灵感来自于杜甫的一首诗，前两句是：《寄...

OnlyLing 2019-08-22 17:16 评论0 收藏0