先切换electron镜像防止下载中报错
npm config set registry https://registry.npmmirror.com/
npm config set electron_mirror https://npmmirror.com/mirrors/electron/
下载相关插件
//安装electron 运行依赖 这是一个集成工具
npm install -g node-gyp
npm install --global --production windows-build-tools
//安装完成后设置环境变量
npm config set python python2.7
npm config set msvs_version 2017
//全局安装electron
npm install -g electron
//安装编译工具
npm i -g electron-builder //二选一(推荐这个)
npm i -g electron-packager
创建配置文件
//ele.js 文件 放在根目录
const {app, BrowserWindow, Menu ,ipcMain } = require('electron');
const path = require('path');
const url = require('url');
// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let mainWindow;
ipcMain.on('closeWindow',function(){
app.exit(0);
})
function createWindow () {
//隐藏关闭放大缩小最外层菜单栏目
Menu.setApplicationMenu(null);
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
title: '网络继续教育考试系统',
alwaysOnTop:true,//是否总是现在在最前面
fullscreen:true,//是否全屏
webPreferences:{
nodeIntegration: true, // 是否集成 Nodejs
webSecurity: false,
textAreasAreResizable :false,
contextIsolation: false
},
// width: 1320,
// height: 744,
icon: __dirname + './static/edu.ico', //这个是引入的icon
});
// 然后加载应用的 index.html。
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './unpackage/dist/build/h5/index.html'),
// protocol: 'file:',
// slashes: true
}))
// mainWindow.webContents.openDevTools()
//引用外部文件
// mainWindow.loadURL(`http://www.baidu.com`);
// 加载应用的 index.html
// mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开开发者工具。
//mainWindow.webContents.openDevTools();
// 打开开发工具
// mainWindow.openDevTools();
// 当 window 被关闭,这个事件会被触发。
mainWindow.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
mainWindow = null
})
}
// 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()
}
})
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入
//package.json
{
"name": "education",
"version": "1.0.1",
"description": "网络继续教育考试系统",
"main": "ele.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dist": "electron-builder --win --ia32",
"package": "electron-packager . 网络继续教育考试系统 --win --out distP --arch=ia32 --electron-version 1.4.14 --overwrite --ignore=node_modules --icon=./static/edu.ico"
},
"build": {
"productName": "education",
"appId": "com.Ambition.com",
"copyright": "Ambition",
"directories": {
"output": "dist"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./static/edu.ico",
"uninstallerIcon": "./static/edu.ico",
"installerHeaderIcon": "./static/edu.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "shortcutName"
},
"win": {
"icon": "./static/edu.ico",
"target": [{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}]
}
},
"dependencies": {
"electron-updater": "^4.3.9"
},
"devDependencies": {
"electron": "15.1.2",
"electron-builder": "^22.13.1",
"electron-devtools-installer": "^3.2.0"
},
"electronDownload": {
"mirror": "https://registry.npmmirror.com/electron/"
},
"author": "DW",
"license": "ISC"
}
在vue中使用electron 实现自定义退出按钮
//main.js
Vue.prototype.eleEnv = false//默认是浏览器环境
if (Vue.prototype.eleEnv) {
let ipc = window.require('electron').ipcRenderer
Vue.prototype.ipc = ipc
}
//页面中使用
// 使用
exit: function() {
if (this.eleEnv) {
this.ipc.send('closeWindow')
}
},
npx electron . //启动