添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
文章描述了在开发过程中遇到的一个bug,即在WebContentsAPI中,当用户在登录后点击菜单跳转至其他页面时,loading动画未能及时关闭。通过添加多个生命周期事件,如did-stop-loading,解决了这个问题。同时,文章还提到了`removeBrowserView`和`destroy`方法的区别。 摘要由CSDN通过智能技术生成
Event: 'did-finish-load'

导航完成时触发,即选项卡的旋转器将停止旋转,并指派 onload 事件后。

Event: 'did-stop-loading'

当tab中的旋转指针(spinner)结束旋转时,就会触发该事件。

复现步骤:

  1. 使用账号登录客户端系统。
  2. 点击菜单栏菜单,跳转其他系统页面正常,在此页面点击打开任意链接,一直停留在加载动画页面

原因分析:

页面打开时,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 文件。