electron 学习笔记

1、快速搭建一个electron 项目结构

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

 

2、关于<webview> 标签 的使用

<webview> 标签 能够把一个第三方页面嵌入到你的应用中，在一个最简单的 webview 中，它包含了 web page 的文件路径和一个控制 webview 容器展现效果的css样式:

<webview id="foo" src="https://www.github.com/" style="display:inline-block; width:640px; height:480px"></webview>

 

如何获取 <webview></webview> 标签嵌入第三方网页的DOM元素

一、在 <webview> 标签 内使用 preload 属性指定声明该标签的js文件

 <webview src="https://wx2.qq.com/?&lang=zh_CN" autosize="on" minwidth="576" min-height="800" id="foo" preload="./inject.js"></webview>

二、定义<webview>  标签声明的js文件内容，是一个大的对象

inject.js文件:

webViewFunction = {
  getDom:function(){
    var a = document.getElementById('chatRoomMember.html')
    console.log(a)
  }
}

 

三、在渲染进程js文件中调用, 调用的方式必须为对象形式

onload = function(){
  var webview = document.getElementById('foo');    // 找到页面上的webview对象

  webview.addEventListener("dom-ready", function(){
    // 打开webview 的调试窗口
    webview.openDevTools()
    webview.executeJavaScript('webViewFunction.getDom()')   // 调用webview里的方法
});
}

 

如何调用 <webview>  标签的各个方法：必须在webview加载完以后调用

获取到页面上的<webview>  标签对象，在<webview>  标签加载完成以后进行调用

  var webview = document.getElementById('foo');    // 找到页面上的webview对象

  webview.addEventListener("dom-ready", function(){
    // 打开webview 的调试窗口
    webview.openDevTools()

    console.log(webview.getURL())   // 得到webview 的URl
  });

 

关于 <webview>.loadURL(url[, options]) 方法：从新载入一个新的url

 

 

如何绑定<webview>  标签的各个DOM事件：

获取到页面上的<webview>  标签对象，使用 addEventListener 进行绑定事件

onload = function(){
  var webview = document.getElementById('foo');    // 找到页面上的webview对象

  webview.addEventListener("dom-ready", function(){  // 绑定加载完后事件
    webview.openDevTools()
  });

  webview.addEventListener("did-stop-loading", function(){   // 绑定加载结束时的事件
    console.log('载入结束')
  });
  webview.addEventListener("did-start-loading", function(){  // 绑定开始载入时事件
    console.log('开始载入')
  })

}

 

 

 

 

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

ipcMain 模块： 在主进程引入，用于接收渲染进程发射的事件和进行回复  

　　　　　　　结构： ipcMain.on ( 接收事件名， callback (事件对象，接收参数) )

 

const {ipcMain} = require('electron')

ipcMain.on('send',function(event, data){   // 使用 ipcMain 模块接收渲染进程发射的事件
  console.log(data)
  event.sender.send('reply', '接收到事件后进行回复')   // 发射回复事件
})

 

ipcRenderer 模块： 在渲染进程引入，用于发射事件给主进程和接收主进程返回的回复事件

　　　　　　　　　结构：ipcRenderer.send ( 事件名称，发射的数据)

　　　　　　　　　　　　ipcRenderer.on ( 回复事件名称，回复的数据)

 

const {ipcRenderer} = require('electron')

ipcRenderer.send('send','发送数据')   　　　　　　// 使用 ipcRenderer 模块，发送事件给主进程
ipcRenderer.on('reply', (event, data) => {   // 接收主进程的回复事件
  console.log('主进程回复过来的数据'+data) 
})

 

 

 4、两个渲染进程之间的通信方法

在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API，比较好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB。

还能够用 Electron 内的 IPC 机制实现。将数据存在主进程的某个全局变量中，而后在多个渲染进程中使用 remote 模块来访问它

// 在主进程中
global.sharedObject = {
  someProperty: 'default value'
};

 

// 在第一个页面中
require('remote').getGlobal('sharedObject').someProperty = 'new value';

// 在第二个页面中
console.log(require('remote').getGlobal('sharedObject').someProperty);

 

 

 

5、在主进程main.js文件中可以使用的模块

 app 模块： 　　　　　　   控制整个应用的生命周期设计

autoUpdater 模块： 　　   自动更新应用

BrowserWindow 模块：     建立一个浏览器窗口

contentTracing 模块： 收集由底层的Chromium content 模块 产生的搜索数据

dialog 模块： 　　　　　　提供一个弹出框或者文件选择框   

globalShortcut 模块：       注册全局的自定义快捷键

ipcMain 模块：  　　　　　提供主进程和渲染进程之间的通信方法，接收渲染进程发射过来的事件和数据并进行回复

menu 模块： 　　　　　　建立鼠标右键显示菜单，跟 menuItem模块 配合使用，能够经过 remote 模块给渲染进程调用.

powerSaveBlocker 模块： 阻止应用系统进入睡眠模式，容许应用保持系统和屏幕继续工做

session 模块： 　　　　　建立一个新的 Session 对象. 可为应用建立多个Cookie文件夹存储不一样的数据信息，而且不会相互影响，各自独立

webContents模块 ：　　   是一个 事件发出者，负责渲染并控制网页，也是 BrowserWindow 对象的属性.  可设置打开调试窗口等

 

6、在渲染进程中可以使用的模块

desktopCapturer 模块： 获取可用资源，这个资源可经过 getUserMedia 捕得到到.

ipcRenderer 模块： 　　提供渲染进程个主进程之间的通信方法，能够从渲染进程向主进程发送同步或异步消息. 也能够收到主进程的相应.

 remote 模块： 　　　　 使渲染进程能够调用主进程的模块

webFrame 模块： 　　  自定义如何渲染当前网页 

 

7、两个进程间均可以使用的模块

clipboard 模块： 　　  提供方法来供复制和粘贴操做

crashReporter 模块 ： 开启发送应用崩溃报告，自动提交崩溃报告给服务器

nativeImage 模块： 　　图片对象，从剪切板中读取图片，它返回的是 nativeImage

screen 模块 ： 　　  　屏幕的 size，显示，鼠标位置等的信息. 便可根据用户显示器大小等信息进行渲染页面

shell 模块 ： 　　　　   提供了集成其余桌面客户端的关联功能，好比调用用户默认浏览器打开一个新窗口等

 

 

 

相关文档连接参考：https://www.w3cschool.cn/electronmanual/electronmanual-electron-faq.html

 

　　　　　　　　　https://electronjs.org/docs