先 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