Electron小白入门自学笔记（一）

码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14297176.html

码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14297176.html
一、从Hello Electron开始
二、制作设置菜单 Menu
三、主进程（Main Process）和渲染进程（Render Process）
- 主进程
- 渲染进程
四、在渲染进程中创建一个子窗口
五、进程间通信
六、提示框 dialog 模块
七、打包（electron-packager）
续集： Electron入门Demo之桌面应用计算器笔记（二)

一、从Hello Electron开始

创建一个空的文件夹，并创建入口 main.js 文件，index.html内容文件，
安装electron
- npm init -y：初始化配置文件 package.json
- npm i electron
main.js 文件
- 引入模块，创建应用
- 创建窗口
- 加载内容
- 打开调试工具（可选）
- 关闭窗口及应用监听
执行文件
- 直接执行：electron main.js
- 默认执行：electron .
- package.json 添加执行脚本： "start": "electorn main.js", 执行：npm run start
- 执行上述命令报错解决：先可尝试全局安装，在执行命令，如若仍然报错，可能需要配置脚本执行权限
windows下运行*.ps1脚本（powershell的脚本）的时候，需要设置执行权限，PowerShell默认的执行策略就是Restricted，禁止任何脚本的执行。
- 首先管理员身份运行 windows powershell ，输入Get-ExecutionPolicy ，用于获得当前的执行策略。
- Set-ExecutionPolicy 命令设置/更改执行策略，选择RemoteSigned这个执行策略，这个策略既安全又可以执行本地编写的脚本

// main.js  引入模块
// app模块:控制应用的生命周期
// BrowserWindow模块: 创建浏览器窗口
const { app ,BrowserWindow} = require('electron');

//  path模块: node 的内置模块，用于拼接路径
const path = require('path');

// 1.初始化应用之后，会触发监听ready 事件
app.on('ready',ny_createWindow)

let win;
// 创建窗口
function ny_createWindow(){
  // 1.1创建窗口
  win = new BrowserWindow({
    330,
    height:355,
    resizable:false, // 是否可改变宽高，默认true
    movable:false,   // 是否可拖拽，默认true
    webPreferences: {
      nodeIntegration: true, // 是否集成 Nodejs
      enableRemoteModule: true, // 是否允许渲染进程 调用主进程模块
    }
    // 1.为了在渲染进程中使用require()，还需要启用 nodeIntegration 。
    // 2.从v9版本开始，remote除非将 enableRemoteModule 设置为true，否则不允许在渲染进程中使用。
  });

  // 1.2 加载内容
  // win.loadURL('http://www.baidu.com')   // 远程

  // __dirname: 当前js文件所在的文件夹路径,绝对路径
  win.loadURL(path.join(__dirname, './index.html')) // 本地 相对路径

  // mac 系统：需要拼接 file 协议
  // path.join('file://',__dirname,'./index.html')

  // 1.3 调试工具
  win.webContents.openDevTools(); // webContents: 控制和渲染页面的

  // 1.4 关闭窗口， 关闭窗口前想做的事
  win.on('close',function(){
    win = null;  // 关闭窗口
    app.quit();  // 关闭应用
  })

创建menu.js ,引入模板，创建菜单模板
构建菜单(实例化一个菜单对象)
设置菜单对象到应用中
用到的方法：buildFromTemplate , setApplicationMenu
选项：
- type：('normal' | 'separator' | 'submenu' | 'checkbox' | 'radio')
- label：标题
- accelerator：快捷键，区分 mac 及 win
- submenu：子菜单
- click：点击事件
main.js中引用： require('./menu');

// menu.js  引入模板
const { Menu } = require('electron')

// 1.设置一个模板
let template = [
  {
    label:'文件',
    submenu:[
      {
        label:'新建文件',
        accelerator:'ctrl+N',
        click:function(){
          console.log('new file')
        }
      },
      {
        type:'separator'
      },
      {
        label:'新建窗口',
        accelerator:(function(){
          if(process.platform =='darwin'){  //mac 基于darwin
            return 'alt+command+M'
          }else{ //win
            return 'alt+ctrl+M'
          }
        })(),
        click:function(){
          console.log('new window')
        }
      },
      {
        type:'separator'
      },
      {
        label:'自动保存',
        accelerator:'ctrl+S',
        type:'checkbox',
        checked:true,
        click:function(){
          console.log('saved')
        }
      },
    ]
  },
  {
    label:'编辑'
  },
]

// 2. 构建菜单(实例化一个菜单对象) 
const menu = Menu.buildFromTemplate(template);

//3. 设置菜单对象到应用中
Menu.setApplicationMenu(menu);

三、主进程（Main Process）和渲染进程（Render Process）

electron核心可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统进行操作的。而electron相当于node环境，可以在项目里使用所有的node api 。

简单理解：
给web项目套上一个node环境的壳。

主进程

在Electron中，入口是一个js文件，运行这个入口文件的进程称作主进程。

（通常会是package.json里的main脚本，一般是main.js）

在主进程使用BrowserWindow模块可以创建并管理web页面，也就是应用的GUI(图形界面)

const { BrowserWindow } = require('electron');
const path = require('path');

// 主进程创建web页面
let win = new BrowserWindow({...});

// 加载本地文件
// win.loadURL(path.join('file://',__dirname, './index.html'))  // mac
win.loadURL(path.join(__dirname, './index.html'))

渲染进程

在主进程创建的每一个web页面也都运行着自己的进程，页面引入的js文件就属于渲染进程。

渲染进程各自管理自己的页面，可以想象是浏览器的一个个的tab。

四、在渲染进程中创建一个子窗口

创建渲染进程对应render.js文件
渲染进程引入BrowserWindow模块，需要借助于remote模块，
- 渲染进程不能直接使用 BrowserWindow ，因为该模块默认是主进程允许使用的
- 借助 remote ,从中引入主进程中的模块,需要在主进程窗口中配置 enableRemoteModule,允许渲染进程调用主进程模块

并在index.html中引入render.js,两种引入方法及区别

<!-- 1.引入render.js -->
<script src="./render-process/render.js"></script>
 
<!-- 2.electron 基于node -->
<script>
    require('./render-process/render.js');
</script>
  
<--   
 区别:
 	src： 是全局变量
 	require： 引入的文件的最外层的变量，不是全局变量，注：为了在渲染进程中使用require()，还需在主进程窗口配置中启用 nodeIntegration 。
 	//main.js
     win = new BrowserWindow({
        330,
        height:355,
        resizable:false, // 是否可改变宽高，默认true
        movable:false,   // 是否可拖拽，默认true
        webPreferences: {
              nodeIntegration: true, // 是否集成 Nodejs
              enableRemoteModule: true, // 是否允许渲染进程 调用主进程模块
          }
     })    
  使用：
     1.元素绑定onclick事件 ==== src引入
     2.require  ==== 给元素绑定一个ID ,在render.js获取元素并绑定事件
-->

五、进程间通信

在electron下，主进程与渲染进程相互通信要通过ipc(Inter-Process Communication),进程间通讯模块来完成，

主进程与渲染进程调用的ipc模块是不一样的：

主进程调用ipcMain
渲染进程调用ipcRenderer

A. 渲染进程给主进程发送指令

ipcRenderer模块：渲染进程引入，用于发送事件给主进程，和监听主进程返回的回复事件
- const { ipcRenderer } = require('electron');
- 发送事件：ipcRenderer.send('事件名称',传递的数据);
- 监听事件：ipcRenderer.on('监听事件名称',接收的数据);
ipcMain模块：主进程引入，用于接收渲染进程发送的事件并进行回复
- const { ipcMain } = require('electron');
- 监听事件：ipcMain.on('监听事件名称',接收的数据);

index.html：

<h1>Hello Electron!</h1>
<button onclick="ny_click()">click me</button>

<!-- 引入render.js 渲染进程-->
<script src="./render-process/render.js"></script>

render.js：

function ny_click(){
  console.log('Render:','Echoyya')
  ipcRenderer.send('myName','Echoyya');
}

main.js：

ipcMain.on('myName',function(event,msg){
  console.log('Main:',msg);
})

运行结果：主进程输出结果会打印在终端，而渲染进程输出结果会打印在调试工具中

B. 主进程给渲染进程发送指令

了解了 渲染进程 -> 主进程 后，反之就很好理解和掌握了，大同小异，简单总结一下：

main.js 发送指令两种方式：

ipcMain.on('myName',function(event,msg){
  // 1. 通过event 
  //event.sender.send('msg-b','程序媛');
  
  // 2. 通过webContents (推荐)
  win.webContents.send('msg-b','程序媛'); 
})

render.js 渲染进程接收指定

ipcRenderer.on('msg-b',function (event, msg) {
	console.log('Render:',msg)
});

运行结果：

C. 渲染进程给渲染进程发送指令

思路：渲染进程 -> 主进程 -> 渲染进程

a.js： ipcRenderer.send('dataToMain','渲染进程 -> 主进程 -> 渲染进程')

main.js：

ipcMain.on('dataToMain',function(event,data){
	win.webContents.send('dataToRender',data);
})

b.js：

 ipcRenderer.on('dataToRender', function (event, data) {
	console.log(data)
 })

D. 不同渲染进程之间数据共享

可以很简单的使用H5的api来完成，如localStorage，sessionStorage，但今天要说的是另一种
在主进程中将一个对象储存为全局变量，然后通过remote模块操作
- 创建a.js , b.js,并在index.html中引入

index.html：

<button id="btn1">改变数据</button>
<button id="btn2">获取数据</button>
	
<script>
	require('./render-process/a.js');
	require('./render-process/b.js');
</script>

main.js：

// 全局变量
global.shareObject = {
  name:'上海'
}

a.js：

const remote = require('electron').remote;

let btn1 = document.getElementById('btn1');

btn1.onclick = function(){
  
  remote.getGlobal('shareObject').name = '北京';
  
  console.log('has changed');

}

b.js：

const remote = require('electron').remote;

let btn2 = document.getElementById('btn2');

btn2.onclick = function(){

  let msg = remote.getGlobal('shareObject').name

  console.log(msg)

}

六、提示框 dialog 模块

首先dialog模块是主进程可使用模块
调用语法：dialog.showMessageBox({ ... })，版本升级后不支持原来的回调方法，改为返回promise对象
常用配置对象参数：
- type：类型(error/info)
- title：标题
- message：提示信息
- icon：本地图标（需使用nativeImage模块，且主进程与渲染进程均可用该模块）
- buttons：按钮（数组类型）

const { dialog ,nativeImage} = require('electron');
const path = require('path');
 
// 1.信息对话框
dialog.showMessageBox({
  title:'温馨提示',
  message:'XXXXX XXXXX XXXXX XXXXX XXXXX',
  buttons:['Yes','No'],
  icon:nativeImage.createFromPath(path.join(__dirname,'../src/img/icon1.png'))
}).then(function(index){
  if(index.response == 0){ // 点击了Yes按钮
    console.log('I want you !');
  }else{ // 点击了No按钮
    console.log('no no no');
  }
});

// 2.错误提示框
dialog.showErrorBox('1213','访问错误')

七、打包（electron-packager）

安装打包工具：npm i electron-packager

打包必要元素及格式输入：electron-packager <应用目录> <应用名称> <打包平台> --out=<输出目录> <架构> <应用版本> <忽略文件> <图标> --overwrite

执行上述命令，可在输出目录中，打包成功一个exe 可执行文件，此命令区分mac及win，设备原因，此处仅演示win系统打包，mac系统的同学，需自行查找相关资料！！！

package.json：

"scripts": {
	"start": "electorn main.js", 
	"pack":"electron-packager ./  test --platform=win32 --out=./dist --arch=x64 --app-version=1.0.0 --ignore=node_modules --icon=./src/img/hrbb.ico --overwrite "
},

续集： Electron入门Demo之桌面应用计算器笔记（二)

作者：Echoyya

出处：https://www.cnblogs.com/echoyya/

链接：前端相关电子书籍，长期有效

著作权归作者和博客园共有，商业转载请联系作者获得授权，非商业转载请注明出处。