Electron——创建窗口BrowserWindow

本节

上一节主要介绍了进程相关理论，这一节进入代码环节，通过搭建Electron项目，并创建窗口主进程和渲染进程，从零创建electron-quick-start项目。

1. 创建electron-quick-start文件。
2. 切换到electron-quick-start通过npm init 生成package.json文件,创建入口文件main.js
3. 将package.json文件中的入口文件设置成main.js
4. 安装electron npm install electron --save-dev
5. 在package.json中设置electron的启动命令start: electron .
6. 代码时间：

(1) 在electron-quick-start下面创建一个静态文件index.html

（2）创建入口文件main.js，并加载preload.js文件调用node相关API获取版本相关信息展示出来

此处通过main.js中webPreferences属性设置preload方式，preload.js通过监听页面打印出相关的版信息

什么是 preload script?

1. 这里引入官网的话“To bridge Electron’s different process types together, we will need to use a special script called a preload.”，我们需要使用特殊的preload方法设置使electron不同进程连通。
2. 当然，这里我们还可以通过main.js中webPreferences属性设置nodeIntegration方式允许渲染进程访问主进程的node相关API方法
   【注意：针对高版本的electron,不仅需要设置nodeIntegration方式还需要设置contextIsolation:false才可以使渲染进程成功访问node相关API方法】

(3)运行npm run start启动electron项目

如果改动了main.js文件的内容或者index.html相关内容，需要重新启动，是否太过于繁琐？

.此处引入nodemon, 此模块可以监控文件变化自动运行命令，省去了手动运行.
安装：npm install nodemon --save-dev
修改命令: nodemon --watch main.js --exec \"electron .\"

这样执行：npm run start.修改文件后通过ctrl+R刷新自动更新，方便了很多！😀

总结：

本节手动搭建electron-quick-start，并启动了第一个electron项目，试试看吧！