阳光恰好是Electron今天的出发Thanks,cometohappy.首先，让我问你几个问题。什么是电子？电子是做什么用的？写个todo看看怎么玩？如何实现桌面程序，概念意义，底层技术是什么？第一步是如何安装。首先，我们的选择可以节省开发依赖。npminstallelectron--save-dev也可以全局安装。npminstallelectron-g这里是文档翻译。如果有趣的话，Electron允许您使用纯JavaScript调用丰富的Native（操作系统）API来创建桌面应用程序。您可以将其视为专注于桌面应用程序而非Web服务器的Node.js变体。这并不意味着Electron是带有(GUI)库绑定的JavaScript。相反，Electron使用网页作为其GUI，因此您可以将其视为由JavaScript控制的精简版Chromium浏览器。awesome的第二步是理解基本概念。Electron分为主进程和渲染进程。主进程运行package.json的主脚本，称为主进程。在主进程中运行的脚本将通过创建网页来显示GUI。（这让我想起了做python和java时gui主线程的感觉。。。）Electron的网页运行在一个成为渲染进程的进程中。并获得页面和操作系统之间的一些低级交互主进程渲染进程区别主进程使用BrowserWindow实例创建页面，每个BrowserWindow实例在自己的渲染进程中运行页面。当一个BrowserWindow实例被销毁时，相应的渲染进程也将被终止。渲染进程相互独立，由主进程管理。渲染进程只需要关心自己的页面。无法在网页内执行GUI操作。需要对应的渲染进程与主进程进行通信。通信方式1、使用HTML5API，如storageAPI、localstorage、sessionstorage或IndexedDB2，IPC通信（ipcRenderer和ipcMain）3、RPC通信（远程模块）下面介绍一个todolist的实现，从编码开始。它控制类似于package.json的文件。主线程由main定义的入口文件创建。以下是不完整的代码。大约。如果需要完整代码，可以查看github地址。todolist项目目录大概是todo--addWindow.html--main.js--package.json--window.html入口文件就是我们的main.js，它是一个应用程序中的中央调度器。//模块可以像使用nodejs一样导入//这就是所谓的主进程，它看起来像一个nodejs脚本constelectron=require('electron');consturl=require('url');constpath=require('path');const{app,BrowserWindow,Menu,ipcMain}=electron;//设置环境process.env.NODE_ENV='production';letmainWindow;letaddWindow;//监听app准备就绪app.on('ready',function(){//1.创建一个新窗口mainWindow=newBrowserWindow({});//加载html到窗口mainWindow.loadURL(url.format({pathname:path.join(__dirname,'window.html'),protocol:'file:',//protocolslashes:true}));//file:/dirname/mainWindow.html//6.大窗口关闭整个程序，关闭mainWindow.on('close',function(){app.quit();})//2.设置菜单constmainMenu=Menu.buildFromTemplate(mainMenuTemplate);Menu.setApplicationMenu(mainMenu);})//处理创建添加窗口函数createAddWindow(){//5.新窗口addWindow=newBrowserWindow({width:300,height:200,title:'添加TODO列表项'});//lo将html广告添加到窗口中//垃圾回收addWindow.on('close',function(){addWindow=null;})}//7.抓取子窗口ipcitem:add//IPC通信ipcMain.on('item:add',function(e,item){console.log('item');mainWindow.webContents.send('item:add',项目);addWindow.close();});constmainMenuTemplate=[{label:'File',submenu:[//3.设置子菜单{label:'AddItem',click(){//4.新窗口createAddWindow();}},{label:'ClearItems',click(){mainWindow.webContents.send('item:clear');}},{label:'Quit',accelerator:process.platform=='darwin'?'Commond+Q':'Ctrl+Q',//os版本区分快捷键click(){app.quit();}}]}];//如果是mac,添加空对象到menuif(process.platform=='darwin'){mainMenuTemplate.unshift({});}//区分开发环境if(process.env.NODE_ENV!=='production'){//添加devtoolsmainMenuTemplate.push({label:'Developertools',submenu:[{role:'reload'},{label:'ToggleDevTools',accelerator:process.platform=='darwin'?'Commond+I':'Ctrl+I',//os版本区分快捷键，click(item,focusedWindow){//区分点击窗口focusedWindow.toggleDevTools();}}]});}主要流程是设置ipc通讯端口监听渲染过程对应事件addWindow.html
