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

在公司開發的下載器過程當中，遇到的一些坑點

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保持相同

1. 打包配置：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"
             ]
           }
         ]
       }

2. 子進程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... 持續更新