electron 窗口BrowserWindow

  const mainWindow = new BrowserWindow({width: 800,height: 600,frame:false,   弹出的窗口有无边框,默认为有show:false,    是否显示窗口,否后,通过对象.show()打开backgroundColor:"#ADD6FF"   设置背景色,16进制rgba格式webPreferences: {  网页功能设置preload: path.join(__dirname, 'preload.js'),     脚本路径nodeIntegration:true,     配置webviewTag:true           配置},})让窗口加载内容窗口对象.loadFile('路径');窗口对象.loadURL('url');等到窗口内容加载完后再显示1、设置show:false2、设置监听窗口对象.once("ready-to-show",()=>{窗口对象.show();})子窗口不指定坐标和大小,默认和父窗口一样大且覆盖在上面父窗口关闭,子窗口也关闭var 子窗口对象=new BrowserWindow({x:弹出窗口x坐标y:弹出窗口y坐标parent:父窗口对象})子窗口对象.show()模态子窗口弹出改窗口后,不能点击父窗口在子窗口的基础上,在创建时添加属性modal:true

文档
渲染进程加载页面

代码示例:

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,//弹出的窗口有无边框,默认为有// frame:false,show:false,backgroundColor:'#586148',webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration:true,webviewTag:true},})// and load the index.html of the app.mainWindow.loadFile('index.html')mainWindow.webContents.on("did-finish-load",()=>{})mainWindow.webContents.on('dom-ready',()=>{})mainWindow.once('ready-to-show',function(){mainWindow.show();child.show();})var child=new BrowserWindow({x:0,y:0,//父消失,子也消失parent:mainWindow,modal:true})// Open the DevTools.// mainWindow.webContents.openDevTools()
}// 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.whenReady().then(createWindow)
app.on('ready',()=>{createWindow();});// Quit when all windows are closed.
app.on('window-all-closed', function () {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') app.quit()
})app.on('activate', function () {// 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()
})// 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.

electron 窗口BrowserWindow相关推荐

【Electron Playground】Electron 窗口问题汇总
此文转载自:https://my.oschina.net/u/4876846/blog/4809393 LiteOS Studio图形化调测能力,物联网打工人必备!>>> 作者:Ku ...
Linux圆角窗口,在deepin 20中出现electron窗口圆角处有不透明黑色的处理
在deepin 20系统中electron设置好圆角后,仍然在窗口的左右上下四个圆角处有不透明的黑色,如下图所示.正常情况下应该是白色,无任何黑色的出现,这样很影响美观. 相关信息 main.js: ...
electron窗口自适应_Go 限流器系列(3)自适应限流
漏斗桶/令牌桶确实能够保护系统不被拖垮, 但不管漏斗桶还是令牌桶, 其防护思路都是设定一个指标, 当超过该指标后就阻止或减少流量的继续进入,当系统负载降低到某一水平后则恢复流量的进入.但其通常都是被动 ...
【Electron-vue】创建桌面应用（12）- 修改electron窗口图标和桌面图标
1.前言直到今天Electron-vue项目终于到打包联调的的最后阶段了,在本地调试没有问题的情况下,需要进行最后一步的模拟真实环境下的调试了. 默认打包将会使用默认的图标,所以打包之后的项目需要做 ...
【Electron Playground 系列】窗口篇
作者:Kurosaki 本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题. 官方文档虽然比较全面,但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有 ...
Electron 实战桌面计算器应用
前言 Electron 是一个搭建跨平台桌面应用的框架,仅仅使用 JavaScript.HTML 以及 CSS,即可快速而容易地搭建一个原生应用.这对于想要涉及其他领域的开发者来说是一个非常大的福利. ...
electron 安装import_Electron: 从零开始写一个记事本app
Electron介绍简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Ele ...
electron 打包后 __static_electron开发客户端注意事项（兼开源个人知识管理工具“想学吗”）...
窗口间通信的问题 electron窗口通信比nwjs要麻烦的多 electron分主进程和渲染进程,渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息 subWi ...
使用electron和vue，以ipc通信的方式构建客户端版本的掘金首页
1. 使用electron-vue新建基于vue的electron环境,更多配置请访问源项目 npm i -g vue-cli vue init simulatedgreg/electron-vue ...

electron 窗口BrowserWindow

electron 窗口BrowserWindow相关推荐

最新文章

热门文章