0

【electron学习笔记】electron之打包程序file路径的刷新页面处理

 1 year ago
source link: https://blog.51cto.com/u_15345191/5367120
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

【electron学习笔记】electron之打包程序file路径的刷新页面处理

原创

博读代码 2022-06-08 14:52:50 博主文章分类:Electron ©著作权

文章标签 开发环境 electron file 文章分类 其他 前端开发 阅读数183

问题从何而来

在做解除摄像头设备占用时,遇到了一个棘手的问题,就是视频窗口页面有太多的 video 标签交错使用。

利用 stream.disposeMediaStream() 这种方法已经无法有效关闭占用摄像头的权限,于是想到通过 “退出视频窗口进行刷新” 的方式来解决摄像头设备被占用的问题。

刷新的几种方法

1.this.$router.go(0)

go 函数的用法需要带参数,例如 go(-1) 表示返回上一页,go(0) 跟第2种方法差不多。

2.location.reload()

重新加载页面。

3.provide/inject

在 App.vue,声明 reload 方法,控制 router-view 的显示或隐藏,从而控制页面的再次加载。

使用 file 模式的访问方式

以上几种方法在 dev 开发环境下,利用 http 路径访问是没有问题的。

但经过打包处理后,访问的路径改为 file 模式,那以上的刷新就会直接再次去访问 index.html 文件,等于回到了首页,并没有停留在之前的页面,所以需要做一些处理来解决这个问题。

1、利用 electron-store 插件来缓存登录数据

【electron学习笔记】electron之打包程序file路径的刷新页面处理_file

将登录状态记录下来,如下:

【electron学习笔记】electron之打包程序file路径的刷新页面处理_开发环境_02

2、返回页面,进行刷新释放摄像头设备

【electron学习笔记】electron之打包程序file路径的刷新页面处理_file_03

3、进入到登录页,脚本自动登录

【electron学习笔记】electron之打包程序file路径的刷新页面处理_electron_04

使用 getUserMedia 调用过的摄像头设备,若出现无法释放的情况,大家可以尝试这种方法。以上就是本期刷新 electron 页面的分享,希望能给大家带来帮助。

下期给大家分享更多实战中的点滴,如果大家对此感兴趣,欢迎各位关注、留言,大家的支持就是我的动力!

  • 收藏
  • 评论
  • 分享
  • 举报

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK