Install
npm install electron --save-dev
"electron": "^6.0.2"
program entry file,index.js
const {
app,BrowserWindow} = require("electron");
app.on("ready",function(){
let win = new BrowserWindow({
//使用app对象来创建一个窗口
width: 800,
height:600
});
win.loadFile('./index.html')//需要显示的内容
})
configurationpack.json
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^22.0.0"
}
}
start up
npm run test
Create custom menus
const {
Menu} = require('electron');
const template =[
{
label:"主菜单1",
submenu:[
{
label:'菜单1.1'},
{
label:'菜单1.2'},
{
label:'菜单1.3'},
{
label:'菜单1.4'}
]
},
{
label:"主菜单2",
submenu:[
{
label:'菜单2.1'},
{
label:'菜单2.2'},
{
label:'菜单2.3'},
{
label:'菜单2.4'}
]
}
]
const myMenu = Menu.buildFromTemplate(template);//创建一个菜单的模板结构
Menu.setApplicationMenu(myMenu)//设置到应用程序
require('./menu.js')
const {
app,BrowserWindow} = require("electron");
let mainWindow = null;
app.on("ready",createWindow)
function createWindow (){
mainWindow = new BrowserWindow({
//使用app对象来创建一个窗口
width: 800,
height:600
});
mainWindow.loadFile('./index.html')//需要显示的内容
Menu click event, generate a new window
const {
Menu,BrowserWindow} = require('electron');
const template =[
{
label:"主菜单1",
submenu:[
{
label:'菜单1.1'},
{
label:'菜单1.2'},
{
label:'菜单1.3'},
{
label:'菜单1.4'}
]
},
{
label:"主菜单2",
submenu:[
{
label:'菜单2.1'},
{
label:'菜单2.2',
click:newWindow //点击打开一个新的窗口函数
},
{
label:'菜单2.3'},
{
label:'菜单2.4'}
]
}
]
const myMenu = Menu.buildFromTemplate(template);//创建一个菜单的模板结构
Menu.setApplicationMenu(myMenu)//设置到应用程序
let otherwin = null //窗口体
//打开一个新的窗口函数
function newWindow(){
otherwin = new BrowserWindow({
//使用app对象来创建一个窗口
width: 400,
height:300,
minWidth:400,
minHeight:300
});
otherwin.loadFile('./other.html')//需要显示的内容
otherwin.on("close",()=>{
//关闭时操作
otherwin = null
})
}
Setting menu shortcut keysctrl+n
{
label:"主菜单2",
submenu:[
{
label:'菜单2.1'},
{
label:'菜单2.2',
accelerator:'ctrl+n',//产生快捷键的事件触发
click:newWindow //点击打开一个新的窗口函数
},
{
label:'菜单2.3'},
{
label:'菜单2.4'}
]
}
]
Warning dismissal and console showing and hiding
- Do not use custom menus
- Open the console directly through the program
require('./menu.js')
const {
app,BrowserWindow} = require("electron");
let mainWindow = null;
app.on("ready",createWindow)
function createWindow (){
mainWindow = new BrowserWindow({
//使用app对象来创建一个窗口
width: 800,
height:600
});
mainWindow.webContents.openDevTools();//直接打开控制台
mainWindow.loadFile('./index.html');//需要显示的内容
mainWindow.on("close",()=>{
//关闭时操作
mainWindow = null
})
}
The configuration of the window body can have
function newWindow(){
otherwin = new BrowserWindow({
//使用app对象来创建一个窗口
width: 400,
height:300,
minWidth:400,
minHeight:300,
maxHeight:800,
maxWidth:600,
x:100,
y:50
});
otherwin.loadFile('./other.html')//需要显示的内容
otherwin.on("close",()=>{
//关闭时操作
otherwin = null
})
}
To eliminate the warning message of the control,
you only need to add the last one in the main entry file.
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' //消除控制台警告
Mutual communication between two parent-child pages
Note: Please do not confuse the method Window.open() with the method Document.open(), which have completely different functions. To make your code unambiguous, use Window.open() instead of Document.open().
opener
-
The opener property is a readable and writable property that returns a reference to the Window object that created the window. - How to understand this sentence, for example
-
The opener is who opened mine. For example, page A uses window.open to pop up the window of page B, then the window where page A is located is the opener of page B, and page A can be accessed through the opener object on page B.
-
Note: When the parent window is required to open the child window, the window.open method must be used to return the value using window.opener.
father:
let btn = document.querySelector('#btn');
btn.onclick = function(){
window.open('other.html')
}
let msgspan = document.querySelector('#msg')
window.addEventListener("message",msg_obj=>{
msgspan.innerText = msg_obj.data
})
Child:
<body>
<h1>other页面</h1>
<button id="btn">发送信息给父窗口</button>
</body>
<script>
let btn = document.querySelector("#btn");
btn.onclick = function(){
window.opener.postMessage("我是来自子窗口的信息。。。。。。。")
}
</script>
Based on this webpage development, you don't need to consider commjs, but don't mix this es6 import method.
The final effect is: Although the page is written, it will produce new effects after being opened by this electron.
Use of the remote module
The open window above means (for the time being) that the size is not controlled. It is the way the browser mode is opened. I can open a window with a controlled size through this electron method. (The communication between this window cannot be realized for the time being)
const BrowserWindow = require("electron").remote.BrowserWindow; //渲染进程里面需要使用这个构造方法。
let mainWindow= null;
let btn = document.querySelector('#btn');
btn.onclick = function(){
mainWindow = new BrowserWindow({
width: 300,
height:300,
})
mainWindow.loadFile('./other.html');//需要显示的内容
mainWindow.on("close",()=>{
//关闭时操作
mainWindow = null
})
}
let msgspan = document.querySelector('#msg')
//就不生效了
window.addEventListener("message",msg_obj=>{
msgspan.innerText = msg_obj.data
})
Some configuration items:
require('./menu.js')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' //消除控制台警告
const {
app,BrowserWindow} = require("electron");
let mainWindow = null;
app.on("ready",createWindow)
function createWindow (){
mainWindow = new BrowserWindow({
//使用app对象来创建一个本地应用的窗口
width: 800,
height:600,
webPreferences:{
nodeIntegration:true,//让引入html中的es6中的js可以使用require
enableRemoteModule:true,//让渲染进程可以使用remote
// contextIsolation:false // 把这一项require加上错误就会消失
}
});
mainWindow.webContents.openDevTools();//直接打开控制台
mainWindow.loadFile('./index.html');//需要显示的内容
mainWindow.on("close",()=>{
//关闭时操作
mainWindow = null
})
}