Electron 封装网页/打包应用 for Linux x64 ubuntu and Jetson arm64

先 clone Electron 的官方示例 https://github.com/electron/electron-quick-start

我们这里只先在首页上直接载入一个网址，然后全屏，屏蔽F5 F11 cmd+r 快捷键。Electron 官方文档中使用的打包工具是 https://www.electronforge.io/。

在 main.js 中 mainWindow 创建完成后进行窗口最大化全屏载入网页，browser-window-focus browser-window-blur 事件中屏蔽快捷键

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')

  // 窗口最大化
  mainWindow.maximize();
  // 全屏
  // mainWindow.setFullScreen(true);
  // 载入端口网页
  mainWindow.loadURL('http://localhost:8001')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// 屏蔽网页刷新快捷键
app.on('browser-window-focus', function () {
  globalShortcut.register("CommandOrControl+R", () => {
      console.log("CommandOrControl+R is pressed: Shortcut Disabled");
  });
  globalShortcut.register("F5", () => {
      console.log("F5 is pressed: Shortcut Disabled");
  });
  // globalShortcut.register("F11", () => {
  //   console.log("F11 is pressed: Shortcut Disabled");
  // });
});
app.on('browser-window-blur', function () {
  globalShortcut.unregister('CommandOrControl+R');
  globalShortcut.unregister('F5');
  // globalShortcut.unregister('F11');
})

打包需要注意 package.json 中的配置，务必配置 author 字段，导入 electron-forge 会自动写入配置，但也需要修改

npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"

config forge packageConfig 中会配置名称图标，每次打包是否覆盖，makers 中会配置不同平台，这里需要删掉 rpm 平台，因为如果不删除，在 jetson arm64 上也会识别成也是linux 会同时打包 deb rpm，就会报错。

"config": {
    "forge": {
      "packagerConfig": {
        "name": "electron_quick_start",
        "icon": "./src/icon.png",
        "overwrite": true
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_quick_start",
            "icon": "./src/icon.png",
            "overwrite": true
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {
            "name": "electron_quick_start",
            "icon": "./src/icon.png",
            "overwrite": true
          }
        }
      ]
    }
  }

最后直接运行 npm run package npm run make 将会自动识别当前机器的平台一级架构，即可在 out/make 中看到不同平台不同架构的打包成品。

参考 https://github.com/lsdlab/electron-quick-start