electron|electron 学习笔记
一、快速搭建一个electron 项目结构
# 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start# 进入这个仓库 $ cd electron-quick-start# 安装依赖并运行 $ npm install && npm start
二、关于
webview
中,它包含了 web page 的文件路径和一个控制 webview
容器展示效果的css样式:如何获取
1、在
2、定义
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里的方法 }); }
如何调用
获取到页面上的
var webview = document.getElementById('foo'); // 找到页面上的webview对象webview.addEventListener("dom-ready", function(){ // 打开webview 的调试窗口 webview.openDevTools()console.log(webview.getURL())// 获得webview 的URl });
关于
.loadURL(url[, options]) 方法:重新载入一个新的url
如何绑定
获取到页面上的
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,
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
https://electronjs.org/docs
【electron|electron 学习笔记】转载于:https://www.cnblogs.com/zhengweijie/p/8011438.html
推荐阅读
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- 由浅入深理解AOP
- 继续努力,自主学习家庭Day135(20181015)
- python学习之|python学习之 实现QQ自动发送消息
- Android中的AES加密-下
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习