1.关于ElectronElectron由Github开发，使用HTML、CSS和JavaScript构建一个用于跨平台桌面应用程序的开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中进行前端训练，并将其打包为Mac、Windows和Linux系统下的应用程序来实现这一点。为了保持Electron小（文件大小）和可持续发展（防止依赖库和API的扩散），Electron限制了核心项目的使用数量。例如，Electron只使用Chromium的渲染库而不是它的所有组件。这使得升级Chromium更容易，但也意味着Electron缺少GoogleChrome中的一些与浏览器相关的功能。添加到Electron的新功能应该主要是原生API。如果可能的话，一个函数应该尽可能是一个Node.js模块。2.开发环境您可以使用原生的Node.js开发环境来开发Electron应用程序。为了创建Electron桌面程序的开发环境，您只需要安装Node.js、npm、一个方便的代码编辑器，并对操作系统的命令行客户端有基本的了解。下面以比较常见的windows开发环境（win7以上）为例：首先，安装最新版本的node.js。建议安装最新的长期支持版本。在安装过程中的配置界面，勾选node.jsruntime、npmpackagemanager、addtopath三个选项。以下命令可用于确认已安装节点和npm。3.创建一个简单的Electron应用程序Electron允许您使用纯JavaScript调用丰富的原生（操作系统）API来创建桌面应用程序。您可以将其视为Node.js的变体。js专注于桌面应用程序而不是Web服务器端。这并不意味着Electron是某些图形用户界面(GUI)库的JavaScript版本。相反，Electron使用网页作为其GUI，因此您可以将其视为由JavaScript控制的精简版Chromium浏览器。从开发的角度来看，Electron应用程序本质上是一个Node.js应用程序。与Node.js模块一样，应用程序的入口点是package.json文件。基本的Electron应用程序通常具有以下目录结构：your-app/├──package.json├──main.js└──index.html为新的Electron应用程序文件夹创建一个新的空文件。打开命令行工具，然后从该文件夹运行npminitnpm将帮助您创建一个基本的package.json文件。main字段表示的脚本是应用程序的启动脚本，会在主进程中执行。以下片段是一个示例package.json：{"name":"demo","version":"1.0.0","description":"test","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"","license":"ISC"}注：如果main字段没有出现在package.json，然后Electron将尝试加载index.js文件（就像Node.js本身一样）。如果你实际上是在开发一个简单的Node应用程序，那么你需要添加一个启动脚本来指示node执行当前包。将这个Node应用程序转换为Electron应用程序也非常简单。我们只是把noderuntime换成了electronruntime。{"name":"demo","version":"1.0.0","description":"test","main":"index.js","scripts":{"start":"electron."},"author":"","license":"ISC"}4.开发一个简单的electronElectron应用程序是使用JavaScript开发的，其工作原理和方法与Node.js开发相同。electron模块包含了Electron提供的所有API和函数，导入方式与普通Node.js模块相同。electron模块提供的功能通过命名空间公开。例如：electron.app负责管理Electron应用的生命周期，electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪时打开一个窗口。你应该在main.js中创建你的窗口并处理你的程序可能遇到的任何系统事件。接下来，我们将对上面的例子进行改进，增加如下功能：打开开发者工具，处理窗口关闭事件，当macOS用户点击dock上的图标时重建窗口。添加后，main.js将如下所示：const{app,BrowserWindow}=require('electron')functioncreateWindow(){//创建浏览器窗口constwin=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:true}})//并为您的应用程序加载索引.htmlwin.loadFile('index.html')//打开开发者工具win.webContents.openDevTools()}//此方法将在以下情况下调用Electron已完成//初始化并准备创建浏览器窗口。//某些API只能在触发ready事件后使用。app.whenReady().then(createWindow)//当所有窗口关闭时退出。app.on('window-all-closed',()=>{//在macOS上，除非用户使用Cmd+Q确认//否则大多数应用程序及其菜单栏将保持活动状态。if(process.platform!=='darwin'){app.quit()}})app.on('activate',()=>{//在macOS上，当停靠栏图标被点击且没有其他窗口被点击时open//通常在您的应用程序中重新创建一个窗口。if(BrowserWindow.getAllWindows().length===0){createWindow()}})//在此文件中，您可以包含应用程序特定主进程的其余部分//代码。也可以拆分成几个文件，然后用require导入。5.启动应用创建并初始化main.js、index.html、package.json后，就可以在当前项目的根目录下执行npmstart命令，启动刚刚编写的Electron程序。
