electron加载html加载不起来,Electron 预加载远程页面提升用户体验

使用场景

Electron 内置 Chromium 和 Node.js，为了提升用户体验，通常 Electron 封装的前端静态文件存储在客户端本地。但总有一些特殊情况，会使用到部分远程页面。

比如微信扫码登录，需要远程访问微信的登录站点，获得扫码结果后跳转到我们自己的服务器，然后通知到主进程来关闭对应的渲染进程。目前这个问题有更高效的解决方案，详见博文《无刷新微信扫码登陆解决方案》。

再比如，部分页面还没有实现前后端分离，为了产品尽快上线，也需要嵌入远程URL。

直接在Electron中访问远程地址是有风险的，控制远程地址切回本地页面也是较为繁琐的。

以上需求可以使用webview标签实现。这是Electron为我们提供的一个特殊组件，类似于iframe但跟iframe不同，确保了应用的安全性。类似于Android、ios的webview或Crosswalk，Electron中的webview也支持和渲染进程相互通讯。

具体实现示例

载入父级页面的时候，将此webview悄悄放入。这样就实现在后台加载webview里面链接的内容了。

// 示意代码 (Vue)

webview.hidden {

width: 0px;

height: 0px;

flex: 0 1;

}

webview.show {

display: flex !important;

position: fixed;

top: 0;

left: 0;

z-index: 99999999999;

right: 0;

bottom: 0;

}

webview.backhome {

position: fixed;

top: 0;

left: 0;

width: 300px;

height: 160px;

z-index: 999999999999;

}

对应的显示和隐藏事件：

// 示意代码

buttomClick (id) {

this.nowWebviewId = id

document.getElementById(id).classList.remove('hidden');

document.getElementById(id).classList.add('show');

}

backToHome (id) {

document.getElementById(id).classList.remove('show');

document.getElementById(id).classList.add('hidden');

this.nowWebviewId = null

}

当用户点击对应按钮的时候，页面可能已经加载完毕，用户体验极佳。