「桌面端」Electron 你不知道的 BrowserView

最新推荐文章于 2024-09-14 16:55:51 发布

Cipher_Y

最新推荐文章于 2024-09-14 16:55:51 发布

阅读量968

点赞数

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/Cipher_Y/article/details/131956548

版权

本文详细介绍了在 Electron 中使用 BrowserView 进行桌面应用开发的实践，包括容器封装、预加载管理、加载状态处理（Loading 和 Error 页面实现）、URL 作为跳转唯一索引等关键点，旨在解决性能和用户体验问题。

摘要由CSDN通过智能技术生成

概要

大终端开发，不仅啥都能做，还啥坑都能踩。

在桌面端这个系列上文讲到：Electron BrowserView 实现多标签页效果，只是做了简单的 Demo 可行性验证，距离产品要求和技术沉淀还差了一大截。

通过本文，你将获得：

不会获得：

（这个会放在跨端通信终结者｜看我是如何保证多端消息一致性的的补充篇中讲）

不干讲，先看看最终实现的效果：

如果用以前WebView的实现方式还是比较简单的，但官方是明确不支持这样做了Electron Web 嵌入。

那选择上还有iframe和BrowserView了，说实话，iframe实现上会简单很多，但没办法做到预加载，那整体效果上会变得差强人意。更重要的一点，由于历史遗留问题，项目中存在一套旧的通信机制，2套的机制不兼容（跨端篇再细讲），所以没办法用iframe。

言归正传，讲讲BrowserView是怎么实现的。

页签实现的逻辑跟前文大差不差，所以这里略过。

封装容器做了哪些事？

我们希望无论是用BrowserWindow还是BrowserView渲染，都是一致的参数封装。

Typescript复制代码    /**
     * 唯一 ID
     */
    public readonly id: number;
    /**
     * 加载地址
     */
    private url?: string;
    
    ...

那除了一致的 UI、一致的 prelod 外，我们还希望有一致的逻辑处理

关注