Electron 学习入门二

一、简便的项目搭建

通过npm init来创建项目，如下图：

image.png

package name: (demoday2020-02-08--2)      //创建的项目名
version: (1.0.0)                                                //创建的版本号
description:
entry point: (index.js)                                      //创建的入口文件
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\软件\Electron\DemoDay2020-02-08--2\package.json:

//创建的pacjage.json的内容
{
  "name": "demoday2020-02-08--2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• 咱们现在能用到的也就只有我注释出来的几部分，其它的一路默认就好。
  现在系统就将咱们需要的package.json文件给创建好了，咱们自己再手动创建以下index.js和index.html文件就好(文件名一定要跟package.json里面所指一样)。
  我这里只是补充一下上篇文章所遗漏的只是，其实跟手动创建没多大区别。大家可以按爱好使用。

二、Electron中的事件

1. 原生事件

• 就是Electron调用系统的api所调用的事件，如窗口事件、菜单事件

ready：页面加载完成是触发的事件

上篇文章已经讲过了ready的使用了，这里就不在赘述了。

closed：窗口关闭事件

image.png

因为closed是控制单个窗口关闭，所以就要再窗口所在函数里面调用

window-all-closed：所有的窗口关闭后触发的事件

image.png

因为window-all-closed是所有窗口关闭，所以写在全局

activate：窗口激活后触发的事件

image.png

窗口激活功能再windows系统中是没有的，再mac中是能使用的

image.png

之后再点击关闭查看命令行

image.png

会发现，程序执行了关闭的事件。

2. Web事件

• 任何网页开发的事件都是，如按钮的点击事件

我相信大家能了解Electron，那么大家肯定都是有web基础的，所以web事件我就不再这里叙述了。