用得到的electron開發總結

蝸蝸發表於2020-01-08

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個執行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。

新增啟動動畫

由於Electron第一次啟動比較慢,需要一些啟動動畫提高下使用者體驗。在主程式新增以下程式碼

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow

function createWindow(callback) {
    mainWindow = new BrowserWindow({
        width: 1400,
        height: 900,
        show: false
    })

    mainWindow.once('ready-to-show', () => {
      if (callback){
        callback();
      }
        mainWindow.show()
    })
    mainWindow.loadURL(`file://${__dirname}/build/index.html`);
}
app.on('ready', () => {
    const useH = parseInt(0.865 * electron.screen.getPrimaryDisplay().workAreaSize.height);
    const useW = parseInt(0.625 * electron.screen.getPrimaryDisplay().workAreaSize.width);

    let logoWindow = new BrowserWindow({
        width: useW,
        height: useH,
        transparent: true,
        frame: false,
        center: true,
        show: false
    });
    logoWindow.loadURL(`file://${__dirname}/build/logo/logo.html`);
    logoWindow.once('ready-to-show', () => {
        logoWindow.show();
    });
    const closeLogoWindow = () => {
        logoWindow.close();
    };
    createWindow(closeLogoWindow);
})
複製程式碼

實現自動更新

使用 electron-builder 結合 electron-updater 實現自動更新。

配置package.json檔案

"build": {
    "publish": [
      {
        "provider": "generic",
        "url": "http://ossactivity.tongyishidai.com/"
      }
    ]
}
複製程式碼

主程式新增自動更新檢測和事件監聽：

import { autoUpdater } from "electron-updater"
import { ipcMain } from "electron"

function updateHandle() {
  let message = {
    error: '檢查更新出錯',
    checking: '正在檢查更新……',
    updateAva: '檢測到新版本，正在下載……',
    updateNotAva: '現在使用的就是最新版本，不用更新',
  };

  autoUpdater.setFeedURL('http://ossactivity.tongyishidai.com/');
  autoUpdater.on('error', function (error) {
    console.log(error)
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // 更新下載進度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments);
      console.log("開始更新");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('isUpdateNow')
  });

  ipcMain.on("checkForUpdate",()=> {
      //執行自動更新檢查
      autoUpdater.checkForUpdates();
  })
}

// 通過main程式傳送事件給renderer程式，提示更新資訊
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}
複製程式碼

注意：

  • 在新增自動更新檢測和事件監聽之後，在主程式createWindow中需要呼叫一下updateHandle()。
  • 這個autoUpdater不是electron中的autoUpdater，是electron-updater的autoUpdater。(這裡曾報錯曾糾結一整天)

在檢視（View）層中觸發自動更新，並新增自動更新事件的監聽。

觸發自動更新：

  ipcRenderer.send("checkForUpdate");
複製程式碼

監聽自動更新事件：

    ipcRenderer.on("message", (event, text) => {
      console.log(text)
    });
    ipcRenderer.on("downloadProgress", (event, progressObj)=> {
      console.log(progressObj.percent)
      this.setState({
        downloadPercent: parseInt(progressObj.percent) || 0
      })
    });
    ipcRenderer.on("isUpdateNow", () => {
        ipcRenderer.send("isUpdateNow");
    });
複製程式碼

為避免多次切換頁面造成監聽的濫用，切換頁面前必須移除監聽事件：

ipcRenderer.removeAll(["message", "downloadProgress", "isUpdateNow"]);
複製程式碼

參考地址 segmentfault.com/a/119000001…

使用 electron-builder 打包exe安裝包

package.json檔案配置如下

{
"build": {
    "productName": "CubeScratch",
    "appId": "org.develar.CubeScratch",
    "publish": [
      {
        "provider": "generic",
        "url": "http://ossactivity.tongyishidai.com/"
      }
    ],
    "win": {
      "icon": "icon.ico",
      "artifactName": "${productName}_Setup_${version}.${ext}",
      "target": [
        "nsis"
      ]
    },
    "mac": {
      "icon": "icon.icns"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "icon.ico",
      "uninstallerIcon": "icon.ico",
      "installerHeaderIcon": "icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "CubeScratch"
    },
    "directories": {
      "buildResources": "resources",
      "output": "release"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    }
  }
}

複製程式碼

參考地址 juejin.im/post/5bc53a…

windows平臺 serialport 串列埠編譯

如果需要serialport作為Electron專案的依賴項，則必須針對專案使用的Electron版本對其進行編譯。

對於大多數最常見的用例（標準處理器平臺上的Linux，Mac，Windows），我們使用prebuild來編譯和釋出庫的二進位制檔案。 使用nodejs進行編譯node-gyp需要使用Python 2.x，因此請確保已安裝它，並且在所有作業系統的路徑中。Python 3.x無法正常工作。

安裝windows構建工具和配置想省時省力請選擇以下方案：

npm install --global --production windows-build-tools
複製程式碼

上邊命令決定串列埠編譯是否成功。安裝過程非常緩慢,安裝完成就等於串列埠編譯成功了99%。

手動安裝工具和配置請看https://github.com/nodejs/node-gyp/

接下來用 electron-rebuild 包重建模組以適配 Electron。這個包可以自動識別當前 Electron 版本，為你的應用自動完成下載 headers、重新編譯原生模組等步驟。

"scripts": {
    "rebuild": "electron-rebuild"
}
複製程式碼

執行以下命令完成串列埠編譯

npm run rebuild
複製程式碼

注意：

  • 編譯過的串列埠不同系統不可通用，需在各平臺重新編譯
  • windows系統最好是正版，或淨化版。否正很有可能安裝失敗。

相關文章