做网站如果被忽悠了咋办,进度环wordpress,地推拉新接单网,网站建设协议 合同文章目录 相关笔记笔记说明 五、界面1、获取 webContents 实例#xff08;1#xff09;通过窗口对象的 webContent 属性获取 webContent 实例#xff1a;#xff08;2#xff09;获取当前激活窗口的 webContents 实例#xff1a;#xff08;3#xff09;在渲染进程中获… 文章目录 相关笔记笔记说明 五、界面1、获取 webContents 实例1通过窗口对象的 webContent 属性获取 webContent 实例2获取当前激活窗口的 webContents 实例3在渲染进程中获取当前窗口的 webContents 实例4通过 id 获取 webContents 实例5遍历应用内的 webContents 对象 2、页面加载事件及触发顺序3、页面跳转事件4、页面缩放5、页面容器6、脚本注入(1) 通过 preload 参数注入脚本(2) 通过 executeJavaScript 注入脚本(3) 通过 insertCSS 注入样式 7、使用 Javascript 控制动画 相关笔记
Electron学习笔记一Electron学习笔记二Electron学习笔记三Electron学习笔记四Electron学习笔记五Electron学习笔记六使用 electron-vite-vue 构建 electron vue3 项目并打包
笔记说明
文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍针对原理部分并无相关记录。笔记记录于 2023年9月。
五、界面
1、获取 webContents 实例
1通过窗口对象的 webContent 属性获取 webContent 实例
let webContent win.webContents;2获取当前激活窗口的 webContents 实例
const { webContents } require(electron);
let webContent webContents.getFocusedWebContents();3在渲染进程中获取当前窗口的 webContents 实例
const { remote } require(electron);
let webContent remote.getCurrentWebContents();4通过 id 获取 webContents 实例
创建窗口时 Electron 会为相应的 webContents 设置一个整型的 id
const { webContents } require(electron);
let webContent webContents.fromId(yourId);5遍历应用内的 webContents 对象
const { webContents } require(electron);
let webContentArr webContents.getAllWebContents();for (let webContent of webContentArr) {if (webContent.getURL().includes(baidu)) {console.log(do what you want);}
}2、页面加载事件及触发顺序
通过 webContents 对象监听以下事件
顺序 事件 说明1did-start-loading页面加载过程中的第一个事件。如果该事件在浏览器中发生那么意味着此时浏览器tab页的旋转图标开始旋转如果页面发生跳转也会触发该事件2page-title-updated页面标题更新事件事件处理函数的第二个参数为当前的页面标题3dom-ready页面中的dom加载完成时触发4did-frame-finish-load框架加载完成时触发。页面中可能会有多个 iframe ,所以该事件可能会被触发多次当前页面为 mainFrame5did-finish-load当前页面加载完成时触发。注意此事件在 did-frame-finish-load 之后触发6page-favicon-updated页面 icon 图标更新时触发7did-stop-loading所有内容加载完成时触发。如果该事件在浏览器中发生那么意味着此时浏览器tab页的旋转图标停止旋转 3、页面跳转事件
通过 webContents 对象监听以下事件 事件 说明will-redirect当服务端返回了一个301或者302跳转后浏览器正准备跳转时触发该事件。Electron可以通过 event.preventDefault() 取消此事件禁止跳转继续执行did-redirect-navigation当服务端返回了一个301或者302跳转后浏览器开始跳转时触发该事件。Electron不能取消此事件。此事件一般发生在 will-redirect 之后did-start-navigation用户点击了某个跳转链接或者JavaScript设置了 window.location.href 属性页面(包含页面内任何一个 frame 子页面)发生页面跳转之时会触发该事件。此事件一般发生在 will-navigate 之后will-navigate用户点击了某个跳转链接或者JavaScript设置了 window.location.href 属性页面发生跳转之前触发该事件。然而当调用 webContents.loadURL 和 webContents.back 时并不会触发该事件。此外当更新 window.location.hash 或者用户点击了一个锚点链接时也并不会触发该事件did-navigate-in-page当更新 window.location.hash 或者用户点击了一个锚点链接时触发该事件did-frame-navigate主页面主页面 main frame 也是一个 frame 和子页面跳转完成时触发。当更新 window.location.hash 或者用户点击了一个锚点链接时不会触发该事件did-navigate主页面跳转完成时触发该事件子页面不会。当更新 window.location.hash 或者用户点击了一个锚点链接时并不会触发该事件 4、页面缩放
通过 webContents 的 setZoomFactor 方法设置页面的缩放比例
const { remote } require(electron);
let webContents remote.getCurrentWebContents();
webContents.setZoomFactor(0.3)
let factor webContents.getZoomFactor();
console.log(factor); //输出0.3通过 webContents 的 setZoomLevel 方法设置页面的缩放等级
const { remote } require(electron);
let webContents remote.getCurrentWebContents();
webContents.setZoomLevel(-6)
let level webContents.getZoomLevel();
console.log(level); //输出-65、页面容器
BrowserView 用于在页面中嵌入其他页面。它依托 BrowserWindow 存在可以绑定到 BrowserWindow 的一个具体的区域。
let view new BrowserView({webPreferences: { // preload}
});
win.setBrowserView(view);let size win.getSize();
// setBounds绑定到窗口的具体区域
view.setBounds({x: 0,y: 80,width: size[0],height: size[1] - 80
});
// setAutoResize设置自己在宽度和高度上自适应父窗口的宽度和高度的变化
view.setAutoResize({width: true,height: true
});
view.webContents.loadURL(url);隐藏 BrowserView
方法一
// 隐藏
win.removeBrowserView(view);
// 显示
win.addBrowserView(view);方法二
//显示
view.webContents.insertCSS(html{display: block});
//隐藏
view.webContents.insertCSS(html{display: none}); 6、脚本注入
在使用 Vue CLI ⇡ 搭建完项目的基础上
(1) 通过 preload 参数注入脚本
在 public/ 目录下新建一个文件 preload.js 文件内容如下
const fs require(fs);window.onload function () {// 修改图片document.querySelector(#s_lg_img).src https://pic.netbian.com/uploads/allimg/230714/004250-1689266570104f.jpg;// 可以在脚本内使用 Node.js API// fs.appendFileSync(./test.txt,xxx,err {})
}修改 src/background.js 文件
const path require(path);// 修改请求头 User-Agent应用中所有的页面加载请求都会使用此 User-Agent
// app.userAgentFallback Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0;async function createWindow() {const win new BrowserWindow({width: 800,height: 600,webPreferences: {// 加载 preload.js 文件preload: path.join(__static, preload.js),}});win.loadURL(https://www.baidu.com/);// 单独设置请求头 User-Agent// win.webContents.loadURL(https://www.baidu.com/, {// userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox / 68.0// })
}注意考虑到安全问题nodeIntegration 不建议开启
运行程序 (2) 通过 executeJavaScript 注入脚本
说明executeJavaScript 方法适用于注入代码量较少的情况。
修改 src/background.js 文件效果同上
async function createWindow() {const win new BrowserWindow({width: 800,height: 600,webPreferences: {}});win.loadURL(https://www.baidu.com/);win.webContents.executeJavaScript(document.querySelector(#s_lg_img).src https://pic.netbian.com/uploads/allimg/230714/004250-1689266570104f.jpg);
}(3) 通过 insertCSS 注入样式
核心代码如下
win.loadURL(https://www.baidu.com/);// 将目标页面的背景颜色修改为 黑色
win.webContents.insertCSS(html, body { background-color: #000 !important; });7、使用 Javascript 控制动画
在使用 Vue CLI ⇡ 搭建完项目的基础上
此时使用 JavaScript 的动画 API —— Web Animations API 控制动画。
修改 src/App.vue 文件中的 template 内容
templatediv idappimg altVue logo src./assets/logo.png reflogoHelloWorld msgWelcome to Your Vue.js App /!-- 动画相关的操作 --button clickpause暂停/buttonbutton clickplay开启/buttonbutton clickreverse重播/button/div
/template修改 src/App.vue 文件中的 script 内容
script
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld},data() {return {keyframes: [{transform: translate(0px, -120px),opacity: 0}, {transform: translate(0px, 0px),opacity: 1}],{/* 动画相关的属性控制 */}options: {iterations: 1,delay: 0,duration: 800,easing: ease},myAnimation: ,}},mounted() {this.myAnimation this.$refs.logo.animate(this.keyframes,this.options);},methods: {pause() {this.myAnimation.pause();},play() {this.myAnimation.play();},reverse() {this.myAnimation.reverse();},}
}
/script参数说明
此处的 keyframes 相当于定义一个动画规定动画的开始和结束的位置及透明度。
keyframes: [{transform: translate(0px, -120px),opacity: 0
}, {transform: translate(0px, 0px),opacity: 1
}]此处的 options 用于设置动画的相关属性。 iterations -- animation-iteration-count 规定动画被播放的次数 delay -- animation-delay 规定动画何时开始 duration -- animation-duration 动画持续时间 easing --运动曲线
options: {iterations: 1,delay: 0,duration: 800,easing: ease
}
