记录一次electron踩坑

代码哈士奇 等级 390 0 0

Vue2.x版本 https://github.com/dmhsq/electron-vue-dmhsq 或者 https://github.com/dmhsq/electron-vue/tree/main/template Vue3.x版本 https://github.com/dmhsq/electron-vue3-dmhsq 教程地址

解决如下

自己摸索的 可能有问题 大佬勿喷

1.解决fs.existsSync is not a function

vue引入electron的ipcRenderer等其它模块会出现这种情况 解决方案 自定义事件 使用渲染进程捕捉

在你的页面代码(比如vue文件)中加入

let cus = new CustomEvent("test_event",{detail:{你的数据}});
window.dispatchEvent(cus);

解释: cus定义了一个window事件 detail传递数据 test_event:自定义事件名 window.dispatchEvent(cus);触发自定义事件

在渲染进程 记录一次electron踩坑 添加以下代码负责监听

const { ipcRenderer } = require("electron");
window.addEventListener('test_event',(e)=>{
  console.log('开始了哦')
  console.log(e.detail)//这里就是你发送的数据
  ipcRenderer.send("test",e.detail);
})

渲染进程使用ipcRenderer向主进程发送数据 说明test为向主进程发送的事件名

以下为主进程接收代码

ipcMain.on("test", () => {
  ...做处理
});




2.解决electron发送请求时http://变file:// (也能解决代理)

发送请求时触发一个事件 比如

export const find = params => {
  let cus = new CustomEvent("axioes");
  window.dispatchEvent(cus);
  return axios.get("/api/find", { params: params });
};

在渲染进程中

window.addEventListener('axioes',()=>{
  ipcRenderer.send('axioso')
})

在主进程中(需要引入session模块)

const {
  app,
  BrowserWindow,
  Notification,
  Menu,
  MenuItem,
  ipcMain,
  net,
  session
} = require("electron");
ipcMain.addListener("axioso", () => {
  resq();
});
function resq() {
  const filter = {
    urls: ["*://api/*", "file://api/*"]
  };
  session.defaultSession.webRequest.onBeforeRequest(
    filter,
    (details, callback) => {
      console.log(122131231);
      console.log(details);
      // details.url = "http://www.baidu.com"
      let srt = details.url;
      details.url = "http://localhost:8080" + srt.substr(10);
      callback({ redirectURL: details.url });
      console.log(details);
    }
  );
}

说明:

const filter = {
    urls: ["*://api/*", "file://api/*"]
  };

定义匹配api字符串的请求的拦截规则

说明:

 session.defaultSession.webRequest.onBeforeRequest(
    filter,
    (details, callback) => {
      console.log(122131231);
      console.log(details);
      // details.url = "http://www.baidu.com"
      let srt = details.url;
      details.url = "http://localhost:8080" + srt.substr(10);
      callback({ redirectURL: details.url });
      console.log(details);
    }
  );

在发送请求之前 改写请求地址 原本我的请求地址是http://localhost:8086/edusys/admin/find 使用代理为 /api/find 我的vue项目端口为8080 所以需要将"/api/find"变为"http://localhost:8080/api/find" 所以我的nginx配置如下

   server {
            listen       8080;
            server_name  localhost;

            location / {
                root   html;
                index  index.html index.htm;
            }

            location /api {
               proxy_pass   http://localhost:8086/edusys/admin;
            }

        }

3.实现登陆以及切换用户

两种方案

方案一 主进程使用菜单切换

记录一次electron踩坑主进程监听菜单事件 记录一次electron踩坑 主进程处理代码

function changeUser() {
  const nm = new Menu();//创建空菜单
  Menu.setApplicationMenu(nm);//菜单设置为空
  createWindows();//创建登陆窗口
  wins.close();//关闭原先的大窗口这里的win是createWindowMain()创建窗口时返回的win
}
function createWindowMain() {
  const win = new BrowserWindow({
    width: 1500,
    height: 1000,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile(__dirname + "/dist/index.html");
  // win.webContents.openDevTools();
  reloadTheWin(win);
  return win;
}
function createWindows() {
  const win = new BrowserWindow({
    width: 400,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile(__dirname + "./login.html");
  // reloadTheWins(win);
}

方案二 Vue开发的页面触发切换

记录一次electron踩坑

这是切换按钮所在的菜单的代码(头部导航的部分代码) 页面点击切换用户触发自定义事件

<el-dropdown>
    <span style="color: black">
        教务处<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>退出</el-dropdown-item>
    <el-dropdown-item @click.native="changeUser">切换用户</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
<script>
export default {
  name: "MyHeader",
  methods:{
    changeUser(){
      console.log("改变用户")
      let cuss = new CustomEvent("changeUsers");//自定义事件
      window.dispatchEvent(cuss);//触发自定义事件
    }
  }
};
</script>

渲染进程处理代码

window.addEventListener("changeUsers", () => {//监听changeUsers事件
  ipcRenderer.send("changeUsr");//向主进程发送通知
})

主进程处理代码

ipcMain.on('changeUsr',()=>{
  changeUser();
});
function changeUser() {
  const nm = new Menu();//创建空菜单
  Menu.setApplicationMenu(nm);//菜单设置为空
  createWindows();//创建登陆窗口
  wins.close();//关闭原先的大窗口这里的win是createWindowMain()创建窗口时返回的win
}
function createWindowMain() {
  const win = new BrowserWindow({
    width: 1500,
    height: 1000,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile(__dirname + "/dist/index.html");
  // win.webContents.openDevTools();
  reloadTheWin(win);
  return win;
}
function createWindows() {
  const win = new BrowserWindow({
    width: 400,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile(__dirname + "./login.html");
  // reloadTheWins(win);
}







  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!

未经本人允许,禁止转载

记录一次electron踩坑


后续会推出

前端:vue入门 vue开发小程序 等 后端: java入门 springboot入门等 服务器:mysql入门 服务器简单指令 云服务器运行项目 python:推荐不温卜火 一定要看哦 一些插件的使用等

大学之道亦在自身,努力学习,热血青春 如果对编程感兴趣可以加入我们的qq群一起交流:974178910 记录一次electron踩坑

有问题可以下方留言,看到了会回复哦

收藏
评论区

相关推荐

极客手中的利器:Electron
作为一个前端开发人员,你可能已经听说过Electron(https://www.electronjs.org/)了, 你知道VS Code是基于这个技术开发的。 不但VS Code,目前一些大热的软件:飞书、Slack、skype的桌面版都是基于这个技术开发的。 即使如此,这也并不足以引起你的重视, 毕竟桌面软件式微,移动端和Web开发才是大方向
Swift开发-OC与Swift混编以及纯Swift编码所遇到的问题(二)
上篇在介绍了Swift与OC混编开发所需要准备的一些必要条件 SwiftObjectiveC混编注意事项(https://www.jianshu.com/p/52ab6a316cbe),今天只说一下我在实际项目中所踩过的坑,希望你们以后绕过这些坑吧。 1、 使用cocopods管理Swift文件所遇到的问题: 我们在开发的过程中,各种优秀的框架
Android framework入门及搭建环境
由于需要修改系统的属性,所以需要编译源码,接下来我说一下本人学习formwork踩过的坑; 1,在window10系统安装了虚拟机,虚拟机安装是Ubuntu 16.0.04 下载地址:http://releases.ubuntu.com/16.04/ image.png 在这过程中可能会遇到 屏幕太小的问题,在Ubuntu下打开命令行 ctrlaltt
记录一次electron踩坑
Vue2.x版本 https://github.com/dmhsq/electronvuedmhsq(https://github.com/dmhsq/electronvuedmhsq) 或者 https://github.com/dmhsq/electronvue/tree/main/template(https://github.com
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
【Electron】第一个用 Electron 开发的桌面应用程序
2020 年注定是不平凡的一年,全国人民饱受疫情的困扰。好在目前已经抗疫已经取得关键性的成功。自己也好很久没有更新自己的博客。中年危机下,博主也在寻找自己的方向。坚信方向比努力更重要。这不,最近突然想开发一款至力于服务 PHP 开发者的工具。这款工具呢也是目前我经常会用到的一些功能。比如,JSON 美化、MD5 加密、正则、URL 重写、HOSTS 管理、经
h5 - 总结及踩坑记录
这是近期的一个 h5 项目,由于某些原因,预览地址不能放出来。不过这不是重点,没有 demo 不就可以好好看文章了吗 哈哈哈~文中提到的 pixi 是 pixiJs,精灵是 pixiJs 中的概念。阅读本文假设你已经知道了这些东西,不过这在本篇文章中并没有太多关于这个库的内容觉得这篇文章有帮助到自己,就让它去收藏夹吃灰;觉得没用或觉得写的不好的,可以留下
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
Hadoop集群搭建避坑指南
环境 CentOS 6 hadoop2.7.2 jdk8u144linuxx64 新建虚拟机 三台主机分别命名为 master、slave01、slave02 第一个坑 为虚拟机新建用户的时候,三台用户都应该设置成一样的,不然后期会出问题,这里我将用户名统一设置为lixuan 踩坑之后补救措施 改下面4个地方的配置文件 将最后一行的旧用户名换成新用
(win环境)使用Electron打造一个桌面应用翻译小工具
初始化项目npm init 修改package.json "name": "trans", "version": "1.0.0", "main": "main.js", "license": "MIT", "scripts": "start": "electron .", "build":"electronpackager . ove
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
这些常见的坑,90%的程序猿都踩过,来看看里面有没有你的脚印?
在学习python的过程中,相信大家都有踩过不少的坑,有些坑可能踩了不止一次,感觉就像是在坑与坑之间反复横跳。那么如何避免这些坑呢?看完这篇文章,你就知道了。我们来谈谈我们学习python的过程中,最常见的七大坑:1. 缩进,符号和空格不正确写代码时大家会使用缩进、对齐、空格等,这些是为了提高代码的可读性在python语言中,缩进是十分重要的比如在创建一个新
从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随
dubbo 2.7应用级服务发现踩坑小记
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 背景本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应用级服务发现的相关介绍可以参考之前的文章,这里不再赘述。读者反馈他们在基于dubbo 2.7应用级服务发现开发dubbo网关,根据文章《dubbo应用级服务发现初
踩坑了!熬夜整理小米Android面试题
一、Java初中级面试题1.容器(HashMap、HashSet、LinkedList,HashSet等)2.内存模型3.JVM、Davilk、ART 三者的原理和区别4.垃圾回收机制5.类加载方案6.说说你对Java 反射的理解7.说说你对动态代理的理解8.什么是线程池,如何使用?为什么要使用线程池?9.在多线程运行过程中,解决安全性问题?10.设计模式(