文章描述了在开发过程中遇到的一个bug,即在WebContentsAPI中,当用户在登录后点击菜单跳转至其他页面时,loading动画未能及时关闭。通过添加多个生命周期事件,如did-stop-loading,解决了这个问题。同时,文章还提到了`removeBrowserView`和`destroy`方法的区别。
摘要由CSDN通过智能技术生成
Event: 'did-finish-load'
导航完成时触发,即选项卡的旋转器将停止旋转,并指派
onload
事件后。
Event: 'did-stop-loading'
当tab中的旋转指针(spinner)结束旋转时,就会触发该事件。
复现步骤:
-
使用账号登录客户端系统。
-
点击菜单栏菜单,跳转其他系统页面正常,在此页面点击打开任意链接,一直停留在加载动画页面
原因分析:
页面打开时,loading加载动画及时关闭(did-finish-load),在本页面跳转时,loading动画没有及时关闭(did-finish-load生命周期没有执行到)
根据此情况又增加了几个生命周期,代码执行情况如下:
this.browserViewList[`${arg.applicationKey}`].webContents.on(
'did-start-loading',
() => {
_this.browserViewList[`${arg.applicationKey}`].webContents.send(
'loading-show'
log.info('did-start-loading')
//did-stop-loading
this.browserViewList[`${arg.applicationKey}`].webContents.on(
'did-stop-loading',
_this.browserViewList[`${arg.applicationKey}`].webContents.send(
'loading-hide'
//dom-ready
this.browserViewList[`${arg.applicationKey}`].webContents.on(
'dom-ready',
() => log.info('dom-ready')
//did-frame-finish-load
this.browserViewList[`${arg.applicationKey}`].webContents.on(
'did-frame-finish-load',
() => log.info('did-frame-finish-load')
//did-finish-load监听加载完成---隐藏loading====>此事件新打开页面会执行,在打开页面链接跳转时不会执行
this.browserViewList[`${arg.applicationKey}`].webContents.on(
'did-finish-load',
() => log.info('did-finish-load')
跳转1.0系统打开页面执行的生命周期
在1.0系统跳转链接执行生命周期
解决方案:
修改动画关闭的生命周期为did-stop-loading
webContents 是EventEmitter对象
webContents
是一个EventEmitter. 负责渲染和控制网页, 是 BrowserWindow 对象的一个属性
removeBrowserView和destroy的区别
BrowserWindow.prototype.removeBrowserView()
不会破坏浏览器视图,它只会将其从 window 中删除,这意味着它不再可见或附加到窗口,但仍然处于活动状态。- view.webContents.destroy()完全删除 BrowserView
1. 原理:创建一个加载窗口用以加载loading.html加载页面动画,然后创建主项目窗口,当主窗口启动时(或者首页请求成功数据之后),关闭加载窗口显示主项目窗口。
1.1再src/main/index.js主线程中:
import { app, BrowserWindow, Menu, ipcMain } from 'electron'
if (process.env.NODE_ENV !== 'development') {
global.__static = requir...
tabs\文件夹,其中包含在选项卡中打开的示例页面
windows\文件夹,其中包含作为新窗口打开的示例页面
在应用程序首次启动时显示的windows\main\窗口,并显示一个包含所有选项卡链接的菜单
windows\tabs\包含从主菜单打开的所有选项windows\tabs\窗口
main.js应用程序的主要过程。 负责打开窗户并处理窗户之间的通讯
应用程序首次启动时,将打开一个新窗口( window\main\index.html )。 主窗口有一个包含三个链接的菜单。 这些链接可以引用此应用程序内的其他页面(请参阅链接1和链接2)或外部链接(请参阅链接3)。
当从菜单中选择一个链接时,该窗口会请求主进程打开一个带有标题和URL参数的
使用NSUserDefaults 或者 自己实例化一个单例
在AppDelegate.m里面添加- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
if (![[NSUserDefaults standardUserDefa
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差。
针对上诉问题,产生的原因是在渲染进程加载vue的时候,特别慢,为了
推荐:
electron-
tabs——一个简单易用的
Electron应用标签页库
项目地址:https://gitcode.com/gh_mirrors/el/
electron-
tabs
在寻找一款适用于
Electron应用的强大且易于定制的标签页解决方案吗?那么,让我们一起探索
electron-
tabs,这个出色的开源项目。尽管它已被宣布为弃用,但其强大功能和灵活性使其仍值得在现有的项目中一试。
#import <UIKit/UIKit.h>
@interface SSLoading : UIView
- (instancetype)initWithFrame:(CGRect)frame;
- (void)showLoading:(UIColor *)backgroundColor alpha:(CGFloat)alpha;
-(void)disMiss;
@e...
Electron-Tabs 使用教程
项目地址:https://gitcode.com/gh_mirrors/el/electron-tabs
Electron-Tabs 是一个用于构建具有多标签页界面的 Electron 应用程序的库。它允许你在 Electron 应用中轻松地添加可切换的标签页功能。
1. 项目目录结构及介绍
在 brrd/electron-tabs 项目中,典型的目录结构如下...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
在
JavaScript 文件中添加以下代码:
const {BrowserWindow} = require('
electron')
const path = require('path')
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
win.loadURL(`file://${path.join(__dirname, 'index.html')}`)
这将在
Electron 中
加载 Bootstrap,并将其应用于 HTML 文件。