内容目录
有需求给学生考试,然后想到能封装一个桌面应用,顺带全屏不让切屏幕就好了。
有需求就干,先安装electron
cnpm -g install electron
如果有代理的话可以用npm但是我代理出现了点问题所以现在用的是cnpm
然后创建项目
package.json { "name": "app", "version": "0.1.0", "main": "main.js", }
创建main.js
const electron = require('electron'); // 控制应用生命周期的模块。 const {app} = electron; // 创建原生浏览器窗口的模块。 const {BrowserWindow ,globalShortcut} = electron; // 保持一个对于 window 对象的全局引用,如果你不这样做, // 当 JavaScript 对象被垃圾回收, window 会被自动地关闭 let mainWindow; // 获取menu 使他关闭 不然会有顶部的菜单 const Menu = electron.Menu function createWindow() { // 创建浏览器窗口。 Menu.setApplicationMenu(null) // 这里写 fullscreen: true 就是全屏 mainWindow = new BrowserWindow({fullscreen: true}); // 加载应用的 index.html。 mainWindow.loadURL(这里是url); // 启用开发工具。 // mainWindow.webContents.openDevTools(); // 设置总在最前 mainWindow.setAlwaysOnTop(true) // 当 window 被关闭,这个事件会被触发。 mainWindow.on('closed', () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 mainWindow = null; }); // 注册热键 esc退出 globalShortcut.register('ESC', () => { app.quit(); }) // 监听失去焦点 mainWindow.on('blur',()=>{ console.log("123") // 失去焦点后重新显示窗口 并且会获取焦点 比较简单的处理办法 mainWindow.show() }) } // Electron 会在初始化后并准备 // 创建浏览器窗口时,调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow); // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 在 macOS 上,当点击 dock 图标并且该应用没有打开的窗口时, // 绝大部分应用会重新创建一个窗口。 if (mainWindow === null) { createWindow(); } });
基本用到的都写在上面了,然后就是打包
安装electron-packager
cnpm -g install electron-packager
然后打包
因为这个打包的时候electron应该在项目下面的依赖 所以需要在项目下
cnpm install --save-dev electron
然后执行打包
electron-packager ./ app --platform=win32 --arch=x64
上面的app是项目名字 win32是平台 指windows x64是指64位包