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('开始载入') }) }
三、主进程和渲染进程之间的通讯
const {ipcMain} = require('electron') ipcMain.on('send',function(event, data){ // 使用 ipcMain 模块接收渲染进程发射的事件 console.log(data) event.sender.send('reply', '接收到事件后进行回复') // 发射回复事件 })
const {ipcRenderer} = require('electron') ipcRenderer.send('send','发送数据') // 使用 ipcRenderer 模块,发送事件给主进程 ipcRenderer.on('reply', (event, data) => { // 接收主进程的回复事件 console.log('主进程回复过来的数据'+data) })
四、两个渲染进程之间的通讯方法
在两个网页(渲染进程)间共享数据最简单的方法是使用浏览器中已经实现的 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);
五、在主进程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