一、主页面:

<template>
  <div class="header">
   	<span class="el-icon-minus" @click="minimizeWin"></span>
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
    <span class="el-icon-close" @click="closeWin"></span>
    <el-button @click.stop="openWind">打开新窗口</el-button>
   </div>
</template>
<script>
import { ipcRenderer} from 'electron';
export default {
  methods: {
     minimizeWin(){
       ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
    },
    maximizeWin(){
      ipcRenderer.send('window-max')
    },
    closeWin(){
      ipcRenderer.send('window-close')
    },
    openWind(){
        const { href } = this.$router.resolve({
          path: `/answerSituation`,
          query: {
            id: row.id,
            paperName: this.paperName,
            name: row.name,
            examScore: row.examScore,
            answersTime: row.answersTime
          }
        })
        window.open(href, '_blank')
    }
  }
}
</script>
<style lang="scss">
	.header{
		span{
			font-size:20px;
			margin-right:20px;
			color:red;
		}
	}
</style>

二、新窗口页面:

<template>
  <div class="header">
   	<span class="el-icon-minus" @click="minimizeWin"></span>
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
    <span class="el-icon-close" @click="closeWin"></span>
   </div>
</template>
<script>
import { remote } from 'electron';
export default {
  methods: {
    minimizeWin(){
      remote.getCurrentWindow().minimize(); // 窗口最小化
    },
    maximizeWin(){
      const win=remote.getCurrentWindow();
      if(win.isMaximized()){ // 判断 窗口是否已最大化 
        win.restore();// 恢复原窗口大小
      }else{
         win.maximize();  //最大化窗口
      }
    },
    closeWin(){
      window.close(); // 关闭窗口,也结束了所有进程
    }
  }
}
</script>
<style lang="scss">
	.header{
		span{
			font-size:20px;
			margin-right:20px;
			color:red;
		}
	}
</style>

三、遇到的问题

之前的项目,引用electron的remote可以直接调用 electron.remote 来去使用,而近期使用electron却频繁报错???踩坑后我快速去查看了下官方文档,是不是electron进行了更新?果然不出所料,在electron 10中,修改了enableRemoteModule默认为false,我们需要手动将其修改为true。

 此前版本中我们使用electron中的remote模块时,不需在主进程的窗口中加入 enableRemoteModule:true 参数才能够调用remote模块,而在 electron 10 中,我们需要加入该参数才能调用该模块。

//引入electron
let electron = require('electron')
//引入remote模块
let remote = electron.remote
//打印remote模块
console.log(remote)

在未加入参数前,会引起报错。

而在主进程中我们需要向 webPreferences 配置参数 enableRemoteModule:true 来打开remote模块,使得渲染进程中可以调用主进程的方法,我们需要对mianWindow来配置

mainWindow = new BrowserWindow({
    width:600,
    height:800,
    /* 启用Node继承 */
    webPreferences:{
      nodeIntegration:true,
      enableRemoteModule:true
    }
  })

问题解决,踩坑完毕。

Logo

前往低代码交流专区

更多推荐