1.新建文件夹存放客户端
mkdir my-electron-app && cd my-electron-app//客户端存放地址
npm init//初始化
2 .安装Electron
npm install --save-dev electron
3.新建app文件夹
1.无所谓的一步,为了保证目录结构清晰
2.并在这个文件夹下新建index.js文件,将以下代码粘贴进去
// ./app/index.js
//采用javascript严格模式
'use strict';
const {app,Menu,protocol,BrowserWindow, MenuItem } =require('electron');
var mainWindow = null;
protocol.registerSchemesAsPrivileged([
{//跨域等问题解决 打开摄像头等
scheme: 'http',
privileges: {
bypassCSP: true,
secure: true,
supportFetchAPI: true,
corsEnabled: true
}
}
]);
// 当所有窗口都关闭的时候退出应用
app.on('window-all-closed', function () {
if (process.platform != 'darwin') {
app.quit();
}
});
// 初始化并准备创建浏览器窗口
app.on('ready', function () {
//隐藏菜单
Menu.setApplicationMenu(null);
// 创建浏览器窗口.
mainWindow = new BrowserWindow({show:false,webPreferences: {
nativeWindowOpen: true
}});
mainWindow.maximize()
mainWindow.show();
//mainWindow.webContents.openDevTools();
// 载入应用的 index.html
mainWindow.loadURL("http://127.0.0.1:8080");
// 打开开发工具
// mainWindow.openDevTools();
// 定义菜单
const menu = new Menu();
menu.append(new MenuItem({label: '复制', role: 'copy'}));
menu.append(new MenuItem({label: '粘贴', role: 'paste'}));
menu.append(new MenuItem({label: '刷新', role: 'reload'}));
//menu.append(new MenuItem({label: '全选', role: 'selectall'}));
//menu.append(new MenuItem({label: '剪切', role: 'cut'}));
//menu.append(new MenuItem({label: '删除', role: 'delete'}));
// menu.append(new MenuItem({label: '取消', role: 'undo'}));
//menu.append(new MenuItem({label: '重置', role: 'redo'}));
mainWindow.webContents.on('context-menu', (e, params) => {
menu.popup({window: mainWindow, x: params.x, y: params.y});
})
// 窗口关闭时触发
mainWindow.on('closed', function () {
// 想要取消窗口对象的引用,如果你的应用支持多窗口,
// 通常你需要将所有的窗口对象存储到一个数组中,
// 在这个时候你应该删除相应的元素
mainWindow = null;
});
});
3.将上面的 mainWindow.loadURL(“http://127.0.0.1:8080”);替换成你服务器的地址
4.对package.json改造
根据你的package.json改造成和我差不多的,改main(如果上面没有新建app文件夹不用改)和scripts
{
"name": "lsy",
"version": "1.0.0",
"description": "",
"main": "app/index.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . lsy --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules"
},
"author": "lsy",
"license": "ISC",
"devDependencies": {
"electron": "^18.1.0"
}
}
5.添加客户端图标
在项目文件夹中添加以computer命名的图标
6.打包
npm run package
7.打开客户端
找到这个exe文件就能运行