Electron--桌面应用开发（基本应用，快速入门）

一、什么是Electron

1. 基本介绍

electron是一个使用前端技术开发跨平台桌面应用程序的框架，帮我们把网页转换成桌面应用。

Electron：你只需把精力放在你的应用核心上即可，我们负责难搞的部分。

2. 优势

1. 专一，专门为桌面应用而生。
2. 可以调用所有的js和node原生的api
3. 开源，文档简洁，社区活跃（这貌似跟我没关系）

二、快速上手

1. 创建项目

新建一个文件夹，打开终端输入，初始化项目，填写名称、作者、版本等各项配置

npm init

2. 安装electron

将electron的node模块下载到本地，如果npm安装失败（跟我一样倒霉），可以换用淘宝镜像cnpm

npm install electron --save

3. 配置json文件

添加一行代码，将main字段的值改为main.js（不改也可以，对应的是等一下创建的入口js文件的名称）

{
  "name": "hello-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 新加的一行，方便运行electron
    "electron": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^19.0.8"
  }
}

4. 编写入口js文件创建窗口

具体代码写在下面，写有注释

// app对象用于控制electron的生命周期事件
// BrowserWindow用于初始化窗口，返回一个窗口对象，与vue对象类似
const { app , BrowserWindow } = require("electron");

//绑定生命周期事件
app.on('ready',() => {
  const mainwin = new BrowserWindow({
  	// 初始化窗口的宽高
    width:500,
    height:500
  })
  // 在主窗口中加载html文件，html中的内容会显示在窗口中
  mainwin.loadFile('./src/index.html');
})

顺便吐槽一下，可爱的vscode是不是更新之后不能快速生成html了，可恶。

三、热加载

每次修改代码之后都需要重新编译，很麻烦，可以安装插件实现热更新。

1. npm安装

npm install --save-dev electron-reloader

2. 引入插件
   在main.js中加入代码

// 热加载
const reloder = require("electron-reloader")
// module模块对象是所有对象
reloder(module);

这个时候修改项目的任何有关联的地方electron应用都会随着更改。

四、进程

• 主进程就是main.js的加载进程，用来创建和展示用户界面
• 其他的进程就是渲染进程，用于展示界面，每个界面运行在各自的渲染进程中
• 主进程只能有一个，渲染进程可以有多个，由chrome实现
• 主进程的调试在终端窗口查看，渲染进程的调试窗口通过ctrl + shift + i打开，跟浏览器的调试窗口不能说是大差不差，只能说是一模一样。
• 渲染进程的调试窗口可以通过代码打开

mainwin.webContents.openDevTools();

五、原生菜单(Menu类)

1. 原生菜单配置

原生菜单的配置项很多，一次学不下来，简单看几个。
首先要引入Menu类。

const { Menu } = require("electron"); 

菜单的配置是一个数组，每个数组元素是一个对象，代表一个菜单项。
每个菜单项可以分别配置label（菜单项名称）、click（点击事件）、submenu（点击后打开的子菜单）

const option = [
    {
      label: '文件',
      submenu: [
        {
          label: '新建窗口',
          click(){
            new BrowserWindow({
              width: 100,
              height: 100
            })
          }
        }
      ]
    },
    {
      label: '关于'
    },
  ];

然后编译菜单模板，设置菜单

// 编译菜单模板
  const menu = Menu.buildFromTemplate(option);
  // 设置菜单
  Menu.setApplicationMenu(menu);

2. 自定义菜单

自定义菜单怎么弄，很简单。
把默认的去掉，然后自己用html写一个，然后开启渲染进程中的node模块和remote模块（remote是主进程的模块）
去除默认菜单的方法：在创建窗口时加入配置

// 关闭自定义菜单
frame: false,
webPreferences: {
	// 开启渲染进程的node模块
	nodeIntegration : true,
	// 开启渲染进程的remote模块
	enableRemoteModule : true
}

在css中加入允许拖拽，并且取消菜单项的拖拽，否则会阻止事件

ul {
	// 打开拖拽
  -webkit-app-region: drag;
}

li {
	// 关闭拖拽
  -webkit-app-region: no-drag;
}

3. 打开浏览器

使用shell对象的方法
使用a标签会在将应用程序本身当作浏览器去访问

import { shell } form 'element';
// 使用默认应用程序打开某网址或本地文件
shell.openExternal('路径');

六、本地文件操作

1. 读取文件

通过remote得到dialog模块
dialog模块内有打开电脑对话框的函数showOpenDialogSync([window,],option)，其中第一个参数可以不填，第二个参数可以配置默认的对话框
这个方法返回读取到的文件路径组成的数组，并不会操作文件，之后调用node内置的fs模块来读取文件。

option的配置很多，列举下边几个，需要更多的时候再查。

配置项	名称
左上角的读取文件	title
读取按钮	buttonlabel
限制文件类型的过滤器	filters

title: '读取文件',
buttonlabel: '读取'
filters: [
	{ name: 'picture' , extension: ['js'] }
]

2. 保存文件

在dialog中有一个showSaveDialogSync([window,],option)可以打开保存文件的窗口，和打开文件很类似

这个函数返回保存的地址。但并不会进行文件操作，需要调用node中对应的fs模块来实现操作。

title: '保存文件',
buttonlabel: '保存'
filters: [
	{ name: 'index' , extension: ['js'] }
]

七、快捷键的定义

可以引入globalShortcut模块来定义快捷键
注意globalShortcut是主进程的模块，在渲染进程中需要通过remote来引入

globalShortcut.register("快捷键组合" , <事件函数>)

八、主进程和渲染进程的通信

1. 在渲染进程中通过ipcRenderer模块发射事件

function maxWindow() {
	ipcRenderer.send('max-window',data);
}

2. 在主进程中引入ipcMain模块定义事件函数

ipcMain.on('max-window',(event,prame) => {
	
})

3. 传参

• 在send的第一个参数后可以在跟一个参数传递
• 接收时事件函数中第一个参数为事件对象，第二个参数为传递的参数

九、打包

1. 安装打包工具

cnpm i electron-packager -D

2. 配置打包指令

"build" : "electron-packager ./ helloworld --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=favicon.ico"

十、结合vue

1. 通过vue脚手架创建项目。
2. 在项目中安装electron

cnpm i electron -S

3. 在项目的package.json中添加electron的配置，编写electron的的main.js
4. 通过mainwin.loadURL加载vue项目