使用Electron创建和管理表单本系列文章的应用示例已发布在GitHub上：electron-api-demos-Zh_CN。您可以克隆或下载并运行查看。欢迎来到星空。Electron中的BrowserWindow模块允许您创建新的浏览器窗口或管理现有的浏览器窗口。每个浏览器窗口都是一个单独的进程，称为渲染器进程。该进程与控制应用程序生命周期的主进程一样，可以完全访问Node.jsAPI。查看完整的API文档。新建窗口支持：Win、macOS、Linux|Process:Main通过BrowserWindow模块在应用程序中创建一个新窗口。这个主进程模块可以与渲染器进程和远程模块一起使用，如本例所示。创建新窗口时有很多参数。其中一些在示例中使用，请查看API文档以获取完整列表。渲染器进程constBrowserWindow=require('electron').remote.BrowserWindowconstpath=require('path')constnewWindowBtn=document.getElementById('new-window')newWindowBtn.addEventListener('click',function(event){constmodalPath=path.join('file://',__dirname,'../../sections/windows/modal.html')letwin=newBrowserWindow({width:400,height:320})win.on('close',function(){win=null})win.loadURL(modalPath)win.show()})使用不可见浏览器窗口运行后台任务的高级技巧。您可以将新的浏览器窗口设置为不显示（即不可见），以便渲染器进程作为一个新的JavaScript线程在应用程序的后台运行。您可以通过在定义新window.varwin时将show属性设置为false来实现=newBrowserWindow({width:400,height:225,show:false})管理窗口状态支持：Win,macOS,Linux|Process:Main本例中我们新建一个窗口，监听move和resize事件。点击sample按钮，改变新窗口的大小和位置，然后查看上面输出的大小和位置信息。控制窗口状态的方法有很多，比如大小、位置和焦点状态，监听窗口变化事件。完成请查看API文档以获取列表。渲染器进程constBrowserWindow=require('electron').remote.BrowserWindowconstpath=require('path')constmanageWindowBtn=document.getElementById('manage-window')letwinmanageWindowBtn.addEventListener('click',function(event){constmodalPath=path.join('file://',__dirname,'../../sections/windows/manage-modal.html')win=newBrowserWindow({宽度：400，高度：275})win.on('resize',updateReply)win.on('move',updateReply)win.on('close',function(){win=null})win.loadURL(modalPath)win.show()functionupdateReply(){constmanageWindowReply=document.getElementById('manage-window-reply')constmessage=`Size:${win.getSize()}-Position:${win.getPosition()}`manageWindowReply.innerText=米essage}})窗口事件：获得和失去焦点支持：Win、macOS、Linux|Process:Main在这个例子中，我们创建了一个新窗体并监听它的blur事件。单击示例按钮创建一个新的模态窗口，然后单击父窗口切换焦点。您可以通过单击示例获取焦点按钮使示例窗口再次聚焦。渲染器进程constBrowserWindow=require('electron').remote.BrowserWindowconstpath=require('path')constmanageWindowBtn=document.getElementById('listen-to-window')constfocusModalBtn=document.getElementById('focus-on-modal-window')letwinmanageWindowBtn.addEventListener('click',function(){constmodalPath=path.join('file://',__dirname,'../../sections/windows/modal-toggle-visibility.html')win=newBrowserWindow({width:600,height:400})win.on('focus',hideFocusBtn)win.on('blur',showFocusBtn)win.on('close',function(){hideFocusBtn()win=null})win.loadURL(modalPath)win.show()functionshowFocusBtn(btn){if(!win)returnfocusModalBtn.classList.add('smooth-appear')focusModalBtn.classList.remove('消失')focusModalBtn.addEventListener('点击',function(){win.focus()})}functionhideFocusBtn(){focusModalBtn.classList.add('disappear')focusModalBtn.classList.remove('smooth-appear')}})创建无框窗口支持：Win,macOS,Linux|Process:无框窗口主要是没有“chrome”的窗口，如工具栏、标题栏、状态栏、边框等，可以在创建表单时将frame设置为false来创建无框窗口frameless-window.renderer-processconstBrowserWindow=require('electron').remote.BrowserWindowconstnewWindowBtn=document.getElementById('frameless-window')constpath=require('path')newWindowBtn.addEventListener('click',function(event){constmodalPath=path.join('file://',__dirname,'../../sections/windows/modal.html')letwin=newBrowserWindow({frame:false})win.on('close',function(){win=null})win.loadURL(modalPath)win.show()})表单也可以有透明背景。通过将transparent参数设置为true，还可以让你的无框窗口透明：varwin=newBrowserWindow({transparent:true,frame:false})更多内容请参考无框窗口文档。如果本文对您有帮助，感谢您在GitHub下方点赞或Star：electron-api-demos-Zh_CN支持，谢谢。
