持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
1.介绍
(1) 什么是electron？
由GitHub开发，用html、css、javascript构建跨平台桌面应用程序的一个开源库。
(2) 实现原理
通过将chromium和node.js合并到同一个运行环境中，并将其打包成Mac、Windows、Linux系统下的应用来实现的。
(3) 官网
(4) electron工作机制
使用electron开发的桌面应用，底层基于chromium，类似于简易版的、定制版的Chrome浏览器，当然这个浏览器中的页面不能通过输入网址打开，而是由开发者写好的。
a. electron应用程序分为主进程和渲染进程
-
主进程负责控制应用程序的生命周期、创建和管理应用程序窗口，有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。
-
渲染进程负责完成渲染界面、接收用户输入、响应用户的交互等工作。
b. 主进程和渲染进程特点
主进程特点：
- 可以使用和系统对接的Electron API，如创建菜单，上传文件 等等；
- 创建渲染进程；
- 全面支持Node.js；
- 只有一个，作为整个程序的入口；
渲染进程特点：
- 可以有多个，每个对应一个窗口；
- 每个都是一个单独的进程；
- 全面支持Node.js 和 DOM API；
- 可以使用一部分Electron 提供的 API；
c. 主进程和渲染进程关系
-一个electron应用只有一个主进程，但可以有多个渲染进程
1.5 特点
- 上手简单：会前端知识即可做桌面应用；
- 跨平台：打包成Mac、Windows、Linux不同系统的应用；
- 自动更新
2.开始hello world
(1) 克隆示例项目的仓库
git clone github.com/electron/el…
(2) 进入项目 cd electron-quick-start
(3) 安装项目
升级为淘宝镜像(安装进度不动时)：npm config set ELECTRON_MIRROR npm.taobao.org/mirrors/ele…
npm install //安装依赖
(4) 运行
npm start
切记：一定要安装Node环境，版本最好在V8.0.0以上
3.调试
进程分为渲染进程和主进程
(1) 渲染进程
用户所看到的web界面就是渲染进程描绘出来的。包括html、css、js
调试：view--->Toggle developer tools / Ctrl+Shift+I （和浏览器调试工具使用一致）
(2) 主进程
调试方式分为两种：浏览器调试和开发工具调试
a. 浏览器调试
-
命令行开关
electron --inspect 5858(无法显示main.js)
electron --inspect-brk 5858(显示main.js)
-
配置package.json
scripts的start内容中的electron .追加--inspect-brk 5858(electron . -inspect-brk 5858)
-
重新启动应用
npm start
-
打开浏览器访问
chrome://inspect
-
点击configure配置连接的端口
localhost:5858
-
再次重启应用
npm start
-
点击inspect对主程序断点调试
b. 开发工具调试
如vs code，点击左侧debug工具--->点击设置--->修改launch.json文件
修改内容学习资源--->附件aunch.json
