网站导航
> 文章列表 > electron_笔记

electron_笔记

网友: 文章列表 2024-03-22 00:52:06

electron_笔记

创建你的第一个应用:

package.json:

{"name": "my-electron-app","version": "1.0.0","description": "my demo","main": "main.js","scripts": {"dev": "electron .  --inspect=5858","start": "electron-forge start","package": "electron-forge package","make": "electron-forge make","win": "electron-builder --win --x64"},"author": "icestone","license": "MIT","devDependencies": {"@electron-forge/cli": "^6.1.1","electron": "23.1.3","electron-builder": "^23.6.0"},"win": {"icon": "icons/icon.ico","target": [{"target": "nsis","arch": ["x64","ia32"]}]}
}

main.js

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 900,webPreferences: {preload: path.join(__dirname, './preload.js'),},})require('./src/js/menu'),ipcMain.handle('ping', () => 'pong');win.loadFile('index.html');
}// 下面两种监听都可以
/*app.whenReady().then(() => {createWindow()
})*/
app.on('ready', () => {createWindow()
})//  监听关闭时调用
app.on('window-all-closed', () => {console.log('close window')if (process.platform !== 'darwin') app.quit()
})

index.html:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Hello World!</title><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.
</p>
</body>
</html>

run:

electron_笔记

监听一个窗口的关闭:

    win.on('close',function () {console.log('window is close!')})

它的完整代码应该是:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 900,webPreferences: {preload: path.join(__dirname, './preload.js'),},})ipcMain.handle('ping', () => 'pong');win.loadFile('index.html');win.on('close',function () {console.log('window is close!')})
}// 下面两种监听都可以
/*app.whenReady().then(() => {createWindow()
})*/
app.on('ready', () => {createWindow()
})//  监听关闭时调用
app.on('window-all-closed', () => {console.log('close window')if (process.platform !== 'darwin') app.quit()
})

electron的生命周期

生命周期事件:

  • ready

    • app初始化完成时调用一次

  • dom-ready

    • 一个窗口中的文本加载完成,此时可以执行dom操作

  • did-finsh-load

    • 导航完成时触发

  • window-all-closed

    • 所有窗口都被关闭时触发

  • before-quit

    • 在关闭窗口之前触发

  • will-quit

    • 在窗口关闭并且应用退出时触发

  • quit

    • 当所有窗口被关闭时触发

  • closed

    • 当所有窗口关闭时触发,此时应删除窗口引用

例如下面的main.js演示:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 900,webPreferences: {preload: path.join(__dirname, './preload.js'),},})ipcMain.handle('ping', () => 'pong');win.loadFile('index.html');win.webContents.on('did-finish-load', () => {console.log('did-finish-load');})win.webContents.on('dom-ready', () => {console.log('dom-ready');})win.on('close', function () {console.log('close')})
}// 下面两种监听都可以
/*app.whenReady().then(() => {createWindow()
})*/
app.on('ready', () => {console.log('ready')createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {console.log('all close window')if (process.platform !== 'darwin') app.quit()
});
app.on('before-quit', function () {console.log('before-quit')
});
app.on('will-quit', function () {console.log('will-quit');
});
app.on('quit', function () {console.log('quit');
});

run:

electron_笔记

窗口尺寸设置

使用nodemon

package.json中的script:

  "scripts": {"dev": "electron .  --inspect=5858","start": "electron .","nodemon": "nodemon --main.js --exec npm run dev"},

这样就可以使用nodemon监听main.js的改动了

相关属性

每次打开窗口默认会在屏幕的中央进行显示,如果想要更改,可以在mian.js中使用x,y来更改:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');const createWindow = () => {const win = new BrowserWindow({x: 200,y: 200,width: 1000,height: 900,webPreferences: {preload: path.join(__dirname, './preload.js'),},})ipcMain.handle('ping', () => 'pong');win.loadFile('index.html');win.webContents.on('did-finish-load', () => {console.log('did-finish-load');})win.webContents.on('dom-ready', () => {console.log('dom-ready');})win.on('close', function () {console.log('close')})
}// 下面两种监听都可以
/*app.whenReady().then(() => {createWindow()
})*/
app.on('ready', () => {console.log('ready')createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {console.log('all close window')if (process.platform !== 'darwin') app.quit()
});
app.on('before-quit', function () {console.log('before-quit')
});
app.on('will-quit', function () {console.log('will-quit');
});
app.on('quit', function () {console.log('quit');
});

然后他就更改了:

electron_笔记

但是此时,可能会先出现窗口,白屏一瞬间之后再加载内容,那么此时就可以使用:show: false设置一下

const win = new BrowserWindow({show: false,x: 200,y: 200,width: 1000,height: 900,webPreferences: {preload: path.join(__dirname, './preload.js'),},})win.on("ready-to-show", function () {win.loadFile('index.html');})

这里监听了ready-to-show,在这个阶段才调用加载index.html

设置最大,最小尺寸

const win = new BrowserWindow({show: false,x: 200,y: 200,width: 1000,height: 900,maxHeight: 1000,maxWidth: 1100,minHeight: 500,minWidth: 1000})

固定尺寸

使用resizable:false:

const win = new BrowserWindow({show: false,x: 200,y: 200,width: 1000,height: 900,maxHeight: 1000,maxWidth: 1100,minHeight: 500,minWidth: 1000,resizable:false})

main设置界面内容

设置title

const win = new BrowserWindow({// show: false,x: 200,y: 200,width: 1000,height: 900,// 设置最大尺寸maxHeight: 1000,maxWidth: 1100,// 设置最小尺寸minHeight: 500,minWidth: 1000,// 禁止缩放窗口// resizable:falsetitle:'在main.js中设置的title'})
  • 注意,此时在index.html的title应该为空
设置icon
const win = new BrowserWindow({// show: false,x: 200,y: 200,width: 1000,height: 900,// 设置最大尺寸maxHeight: 1000,maxWidth: 1100,// 设置最小尺寸minHeight: 500,minWidth: 1000,// 禁止缩放窗口// resizable:falsetitle:'在main.js中设置的title',icon:'./lg.ico'})

如图:

electron_笔记

不显示默认的窗口和菜单

frame:false,默认为true

运行:

electron_笔记

那么此时窗口无法进行拖动

透明窗体

transparent: true

运行:

electron_笔记

隐藏menu
const win = new BrowserWindow({// show: false,x: 200,y: 200,width: 1000,height: 900,// 设置最大尺寸maxHeight: 1000,maxWidth: 1100,// 设置最小尺寸minHeight: 500,minWidth: 1000,// 禁止缩放窗口// resizable:falsetitle: '在main.js中设置的title',icon: './lg.ico',// 不显示默认窗口和菜单// frame:false// 透明窗体// transparent: true// 隐藏menuautoHideMenuBar: true})

​

网络标签：

相关问题