electron 学习笔记

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

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

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

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

 

二、关于<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元素

1、在 <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>

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

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

 

3、在渲染进程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('开始载入')
  })

}

 

 

 

 

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

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) 
})

 

 

 四、两个渲染进程之间的通讯方法

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

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

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

 

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

 

 

 

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

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

autoUpdater 模块:      自动更新应用

BrowserWindow 模块:     创建一个浏览器窗口

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

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

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

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

menu 模块:       创建鼠标右键显示菜单,跟 menuItem模块 配合使用,可以通过 remote 模块给渲染进程调用.

powerSaveBlocker 模块: 阻止应用系统进入睡眠模式,允许应用保持系统和屏幕继续工作

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

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

 

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

desktopCapturer 模块: 获取可用资源,这个资源可通过 getUserMedia 捕获得到.

ipcRenderer 模块:   提供渲染进程个主进程之间的通讯方法,可以从渲染进程向主进程发送同步或异步消息. 也可以收到主进程的相应.

 remote 模块:      使渲染进程可以调用主进程的模块

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

 

七、两个进程间都可以使用的模块

clipboard 模块:     提供方法来供复制和粘贴操作

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

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

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

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

 

 

 

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

 

         https://electronjs.org/docs

posted @ 2017-12-13 10:25  嘉爷  阅读(2872)  评论(0编辑  收藏  举报