Electron打包应用的简单使用，开机自启动，自定义最大化最小化，JS与主进程通讯

官方文档：https://www.electronjs.org/docs

w3c文档：https://www.w3cschool.cn/electronmanual/wcx31ql6.html

 

  package.json

electron-builder 打包出来的是加密的安装exe和和免安装版文件夹，可直接启动文件夹中exe

electron-packager 打包出来的是免安装版未加密的文件夹，原网页内容在resources/app下，未加密，可直接修改里面的内容

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "MyApp",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "dist1": "electron-builder --win --x64",
    "dist2": "electron-builder --win --ia32",
    "dist": "electron-builder",
    "packager": "electron-packager ./ MyApp--win --x64 --out ./OutApp electron-version 10.1.2 --overwrite --icon=./app/img/icon/icon.ico"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chromedriver": "^85.0.1"
  },
  "devDependencies": {
    "electron": "^10.1.2",
    "electron-packager": "^15.2.0"
  },
  "build": {
    "productName": "MyApp",
    "appId": "ink.MyApp",
    "copyright": "MyApp",
    "directories": {
      "output": "build"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "MyApp.ico",
      "uninstallerIcon": "MyApp.ico",
      "installerHeaderIcon": "MyApp.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "MyApp"
    },
    "win": {
      "icon": "MyApp.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
    }
  }
}

 

main.js

 

const {
	app,
	BrowserWindow,
	globalShortcut
} = require('electron')


//开机自启动
app.setLoginItemSettings({
  openAtLogin: true,
})




var win;

function createWindow() {
	// 创建浏览器窗口
	win = new BrowserWindow({
//全屏

		fullscreen: true,
//隐藏菜单栏
		autoHideMenuBar: true,
		frame: false,
		webPreferences: {
			nodeIntegration: true

		}
	})
	win.setMenu(null)

	win.loadFile('Template/index.html')

	// 打开开发者工具
	//win.webContents.openDevTools()
	
	

}





// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
//app.whenReady().then(createWindow)



app.on('ready', () => {
	    console.log('ready');
		createWindow();
		
//按ESC键最小化
		
	 globalShortcut.register('ESC',(e)=>{
		 
		  console.log('esc ckick');
		win.minimize();
	 })
})

 

 

//自定义最大化最小化，发送UDP广播

const {
	app,
	BrowserWindow,
	ipcMain
} = require('electron')

const powerSaveBlocker = require('electron').powerSaveBlocker;
var id = powerSaveBlocker.start('prevent-display-sleep');
console.log(powerSaveBlocker.isStarted(id));

//最近一次最小化的时间
var lastMinimizeTime = 0;

var win;

function createWindow() {
	// 创建浏览器窗口
	win = new BrowserWindow({
		width: 1160,
		height: 1000,
		minWidth: 1160,
		minHeight: 1000,
		autoHideMenuBar: true,
		frame: false,
		webPreferences: {
			nodeIntegration: true

		}
	})
	win.setMenu(null)

	// 并且为你的应用加载index.html
	win.loadFile('RemoteDesktop/index.html')

	// 打开开发者工具
	//win.webContents.openDevTools()
	
	
	win.on('maximize', function () {
		//在窗口最大化的时候触发.
	 win.webContents.send('main-window-max');
	})
	win.on('unmaximize', function () {
		//在窗口退出最大化的时候触发.
	  win.webContents.send('main-window-unmax');
	})
	win.on('minimize', function () {
		//在窗口最小化的时候触发.
		lastMinimizeTime = new Date().getTime();
	
	})
	
	win.on('restore', function () {
		//在窗口从最小化恢复的时候触发.
	  
	  if( (new Date().getTime()-lastMinimizeTime)>(3*60*1000)){
		  //最小化大于3分钟
		  win.webContents.send('restore');
	  }
	})
	
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
	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 (BrowserWindow.getAllWindows().length === 0) {
		createWindow()
	}
})







// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。


//窗口最小化
ipcMain.on('window-min', function() {
	win.minimize();
})
//窗口最大化
ipcMain.on('window-max', function() {
	if (win.isMaximized()) {
		win.restore();
	} else {
		win.maximize();
	}
})
ipcMain.on('window-close', function() {
	win.close();
})


ipcMain.on('awaken', function(event,str) {
	
	
	const dgram=require('dgram');
	/* 创建一个scoket类    
	通过scoket我们就可以对网络数据进行读取和输出 
	udp:无连接协议，不需要连接到服务器，然后再发数据 
	*/
	// const socket=new dgram.Socket
	const clientSocket=dgram.createSocket('udp4');//udp4 =>ipv4
	clientSocket.send(str,9999,ip)
	//clientSocket传送数据

	

})








在页面的JS中：





const {
	ipcRenderer
} = require('electron')


document.getElementById('maxbt').addEventListener('click', () => {
	ipcRenderer.send('window-max');

})
document.getElementById('minbt').addEventListener('click', () => {
	ipcRenderer.send('window-min');

})
document.getElementById('closebt').addEventListener('click', () => {
	ipcRenderer.send('window-close');

})

ipcRenderer.on('main-window-max', (event) => {

	document.getElementById('maxbt').src = "./img/max.png"

});
ipcRenderer.on('main-window-unmax', (event) => {

	document.getElementById('maxbt').src = "./img/min.png"
});

ipcRenderer.on('restore', (event) => {

//restore


});

function sendStr(str) {
	ipcRenderer.send('awaken', str);


}