electron開發過程中遇到的一些坑

FingerLiu 發布于2019-08-26 10:36 / 1707人閱讀

摘要：導致下載流程受阻問題中使用到子進程的時候，是把子進程當作一個外部依賴來做的，打包后并不會將子進程的代碼打進到包中，需要額外進行配置。子進程中用的第三方包都需要在中進行配置。

在公司開發的下載器過程中，遇到的一些坑點 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日常維護中的一些要點總結開發的過程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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