Electron 预加载远程页面提升用户体验
- 更新:2019-01-23 21:00:19
- 首发:2019-01-23 20:44:32
- 教程
- 9581
使用场景
Electron 内置 Chromium
和 Node.js
,为了提升用户体验,通常 Electron 封装的前端静态文件存储在客户端本地。但总有一些特殊情况,会使用到部分远程页面。
比如微信扫码登录,需要远程访问微信的登录站点,获得扫码结果后跳转到我们自己的服务器,然后通知到主进程
来关闭对应的渲染进程
。目前这个问题有更高效的解决方案,详见博文《无刷新微信扫码登陆解决方案》。
再比如,部分页面还没有实现前后端分离,为了产品尽快上线,也需要嵌入远程URL。
直接在Electron中访问远程地址是有风险的,控制远程地址切回本地页面也是较为繁琐的。
以上需求可以使用webview标签实现。这是Electron为我们提供的一个特殊组件,类似于iframe
但跟iframe
不同,确保了应用的安全性。类似于Android
、ios
的webview
或Crosswalk
,Electron中的webview
也支持和渲染进程相互通讯。
具体实现示例
载入父级页面的时候,将此webview
悄悄放入。这样就实现在后台加载webview
里面链接的内容了。
// 示意代码 (Vue)
<template v-for="(item, index) in list">
<webview :key="index" :id="'webview' + index" :src="'https://' + item" class="hidden"></webview>
</template>
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
}
当用户点击对应按钮的时候,页面可能已经加载完毕,用户体验极佳。
除特别注明外,本站所有文章均为原创。原创文章均已备案且受著作权保护,未经作者书面授权,请勿转载。
打赏
交流区
暂无内容
如遇问题,手动修改上述代码中的版本号为最新版即可。
😄 祝您顺利!
那个设备管理器没有手动添加过时设备了,我直接就重新装了一遍
dcm
我心不死,又重新回来搞这个。
上面的都做好了,windows hello的安装程序闪退(就是闪退做不了),后面还把我sdk客户端里面的Camera Explorer又找不到我的照相机了,我哭死。
能提供一下思路吗,作者大大