1、安装nodejs
2、用npm全局安装electron(可以不全局安装,后面在项目中安装)
3、创建一个目录my_app,下面创建3个文件:package.json、main.js、index.html
4、编缉index.html内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
5、编缉main.js内容:
const {app, BrowserWindow,globalShortcut,ipcMain} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600,resizable:false})
//hide menubar
win.setAutoHideMenuBar(true)
// and load the index.html of the app.
win.loadURL('file://'+__dirname+'/index.html')
// Open the DevTools.
//win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
6、编缉package.json内容:
{
"name": "demo_app",
"version": "0.1.0",
"main": "main.js",
}
7、运行
在demo_app目录下,执行electron .
如果没有全局安装electron,可以在目录下执行npm install --save-dev electron. 然后在执行在demo_app/node_modules/.bin/目录下执行electron ../../
--save-dev会在package.json中加入一行:
"devDependencies": {
"electron": "^1.4.15"
}
8、打包
使用electron-package进行打包,生成目录demo_app_release。
electron-packager ./demo_app --platform=win32 --out ../demo_app_release --version 1.4.13 --overwrite --icon=./images/app.ico
9、脚本与依赖
修改package.json:
{
"name": "demo_app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager ./ demo_app --platform=win32 --out ../demo_app_release --version 1.4.13 --overwrite --icon=./images/app.ico"
},
"author": "gelare",
"devDependencies": {
"electron": "^1.4.15"
},
"dependencies": {
"log4js": "^1.1.0"
}
}
在demo_app目录下
执行npm install会安装依赖,包括electron与log4js。
执行npm start会运行程序。
执行npm run-script package进行打包。
10、快捷键
添加ctrl+q,退出程序,在createWindow函数最后加上:
globalShortcut.unregisterAll();
globalShortcut.register('ctrl+q',function(){
app.quit();
});
注册快捷键向主页面发送事件:
globalShortcut.register('alt+c',()=>{
win.webContents.send('global-shortcut','change');
});
接收与处理事件:
修改index.html,引入脚本:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script src="index.js"></script>
</body>
</html>
增加index.js:
const {
ipcRenderer,
desktopCapturer,
} = require('electron');
ipcRenderer.on('global-shortcut',(event,arg) => {
switch(arg) {
case 'change':
var body = document.querySelector('body');
body.style.backgroundColor = "lightblue";
break;
}
})
11、菜单