Electron 自学笔记

一,Electron 简单了解

• Electron 是一个跨平台的桌面应用开发框架，用html css js 的技术开发桌面上面可以安装的
  软件。
  Electron 又为前端开发者谋得了一份好的差事”。
  想起在网路里流传很广的一句话“不要和老夫说什么 C++，Java，老夫行走江湖就靠一把 JS，遇到需求撸起袖子就是干”。
• Electron 由Github开发
• Electron 是一个用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库
• Electron 通过将 Chromium和 Node.js合并到同一个运行时环境中，并
  将其打包为 Mac，Windows 和 Linux 系统下的应用来实现这一目的。
• Electron最新版本为 4.0.4 当前时间为(2019-02-08)

1.1、学前准备

环境安装

1. 电脑需要安装Node.JS ，点击node中文网 选择对应的版本 node.js 安装:
   npm 使用国内淘宝镜像安装方法(单次有效):

   npm install [模块名] --registry=https://registry.npm.taobao.org
   

   如果想替换全局的npm 安装源,执行下边命令设置配置文件:

   npm config set registry https://registry.npm.taobao.org
   

   更换仓库地址:

   npm config set prefix  'C:\Program Files\nodejs\global_node_modules'
   

   查看npm 配置信息;

   npm config list
   

2. 电脑需要安装Git :
   Git 官网 下载对应版本安装,或者去各大软件平台搜索安装
3. 需要有 HTML CSS javascript 以及 node.js 基础；
4. 安装 Electron
   命令行执行以下命令 全局 安装:

   npm install -g electron
   

   -g 表示全局安装
   5.开发工具 Visual Studio Code
   建议下载对应版本的Visual Studio Code 进行开发,个人觉得比较好用

1.2、克隆一个仓库,快速启动一个项目

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start

体验一下 electron

1.3、手动搭建一个 electron 项目

方法一:从0开始手动编写

1. 新建一个项目目录 例如：electrondemo01

2. 在 electrondemo01 目录下面新建三个文件: index.html、main.js 、package.json

3. index.html 里面用 css进行布局（以前怎么写现在还是怎么写）

4. 在 main.js 中写如下代码：

   var electron =require('electron');
   //electron 对象的引用
   const app=electron.app;
   //BrowserWindow 类的引用
   const BrowserWindow=electron.BrowserWindow;
   //创建全局mainWindow的引用
   let mainWindow=null;
   //监听应用准备完成的事件
   app.on('ready',function(){
   //创建窗口
   mainWindow=new BrowserWindow({width: 800, height: 600});//定义宽,高
   mainWindow.loadFile('index.html');//加载页面index.html
   
   mainWindow.on('closed', function () {
   mainWindow = null;
   })
   })
   //监听所有窗口关闭的事件
   app.on('window-all-closed', function () {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
   if (process.platform !== 'darwin') {
   app.quit();
   }
   })
   

方法二:使用 electron-forge 搭建一个electron 项目

electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行、打包electron 项目。

#全局安装 electron-gorge
npm install -g electron-forge
# my-new-app 是指要生成的项目文件夹
electron-forge init my-new-app
#切换到 项目文件夹"my-new-app"
cd my-new-app
#启动项目
npm start

1.4、Electron 程序目录结构

Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本 的 Electron 应用一般来说会有如下的目录结构：

your-app/
├── package.json
├── main.js
└── index.html

• 为你的新Electron应用创建一个新的空文件夹。 打开你的命令行工具，然后从该文件夹运行npm init

• npm 会帮助你创建一个基本的 package.json 文件。 其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。 如下片段是一个 package.json 的示例：

  {
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js"
  }
  

• 链接:Electron文档 更多细节参考官方文档

二、正式搭建 Electron 项目步骤

经过以上的准备,就可以开始搭建electron 的项目了,但是对于光有兴趣,又是零基础的新手(比如说我)来说,还是一头雾水.现在写一下我搭建项目的详细步骤.

1. 首先新建项目文件夹,比如,我的项目名称为 electron_01

2. 在项目文件夹下新建两个文件index.html 和 main.js 文件
   说明:index.html文件是程序的页面文件,就是你看到的
   红框的部分,hello word是我自己写在index.heml的
   main.js 文件是程序的主入口文件

3. 现在的目录结构是这样的
   

4. 在项目文件夹下 右键 >在终端中打开执行

   	#运行之后会一步一步的问你,一步一步执行package.json
   	npm init
   

   这个命令运行之后会在项目文件夹下生成package.json文件
   
   package.json中的内容

   {
     "name": "electron_01",
     "version": "1.0.0",
     "description": "my first electron app",
     "main": "mian.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     	},
     "author": "yumos",
     "license": "ISC"
   }
   
   

5. 在项目文件夹下 右键 >在终端中打开 执行以下命令,将我们要用的electron包安装到项目文件夹下的node_modules文件夹下,这样之后在写程序的时候会有语法提示方便我们继续学习

   npm install electron --save
   # 加--save 命令之后,会把依赖信息写入package.json文件中 
   

   现在package.json文件里边的内容是这样的

   {
     "name": "electron_01",
     "version": "1.0.0",
     "description": "my first electron app",
     "main": "mian.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "yumos",
     "license": "ISC",
     "dependencies": {
       "electron": "^4.0.4"
     }
   }
   
   

   "dependencies"里的"electron": "^4.0.4"就是我们安装的electron模块的信息,"dependencies"下写的是我们的项目的依赖项的信息,node_modules文件夹下是我们安装依赖模块的内容,每个项目仅仅有一个node_modules文件夹.

6. 现在我们分别在index.html文件,main.js文件中增加内容

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
      
       //在 index.html 文件中添加对 main.js的引用
       <script src="main.js"></script>
   </head>
   <body>
      //添加我们自己的文本内容,比如
           hello world  
   </body>
   </html>
   

   //引入 electron 模块
   var electron =require('electron');
   //electron 对象的引用
   const app=electron.app;
   //BrowserWindow 类的引用
   const BrowserWindow=electron.BrowserWindow;
   //定义全局变量mainWindow
   let mainWindow=null;
   //监听应用准备完成的事件
   app.on('ready',function(){
   //创建窗口 宽:800,高:600
   mainWindow=new BrowserWindow({width: 800, height: 600});
   //加载 index.html 文件的引用
   mainWindow.loadFile('index.html');
   //关闭窗口
   mainWindow.on('closed', function () {
   mainWindow = null;
   })
   })
   
   

7. 现在我们的项目目录结构是这样的:
   
   当我们不小心删除node_modules文件夹以后,只要有package.json文件(其中的 "dependencies"中记录的依赖模块信息),在项目目录下打开命令窗口运行

   #该命令会根据 packagejson文件,下载所有的依赖模块
   npm install
   

8. 在项目目录右键>在终端中打开,运行以下命令启动我们的项目:

   #注意是 electron + 空格 +点
   electron .
   

   启动以后是这样的

三、主进程和渲染进程之间的通信

3.1，模块简介

• ipcMain
  从主进程到渲染进程的异步通信(主进程$\to$渲染进程)。
  • 发送消息时，事件名称为channel
  • 回复同步信息 event.returnValue = ···
  • 回复异步消息，event.sender.send(···)
• ipcRenderer
• 从渲染器进程到主进程的异步通信(渲染进程$\to$主进程)。

3.1.1、流程示意

$\uparrow$ 这是一般流程（渲染进程A$\to$主进程$\to$渲染进程A），当然，还可以渲染进程A$\to$主进程$\to$渲染进程B或者主进程$\to$渲染进程

3.1.2、ipcMain详解

个人理解：主进程就是指 main.js运行的进程（运行程序后不能直接看到的进程，我们在主进程里通过BrowserWindow打开的那个是渲染进程的页面），ipcMain需要在主进程引入。
ipcMain包含的方法：

监听 channel，当接收到新的消息时 listener 会以 listener(event, args…) 的形式被调用。

• ipcMain.on(channel, listener)
  • channel：String
  • listener：Function
    • event：IpcMainEvent
    • ...args：any[]

监听 channel，当接收到新的消息时 listener 会以 listener(event, args…) 的形式被调用。但是该方法只会调用一次，执行之后就会被移除。

• ipcMain.once(channel, listener)
  • channel：String
  • listener：Function
    • event：IpcMainEvent
    • ...args：any[]

3.1.3、ipcRenderer详解

ipcRenderer包含的方法：

• ipcMain.on(channel,listener)

  • channel - String
  • listener - Function
  • 监听 channel，当接收到新的消息时 调用listener

  ipcMain.on(,listener){
  }
  
  

3.2、完整例子

没写完，还在学习中 2020-07-26