electron菜单或托盘点击如何打开新的窗口

简介: electron菜单或托盘点击如何打开新的窗口

一、先看效果图


f5d03c095a464c4bbafb19939a840665_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif


二、主进程创建窗口


let mainWindow
const isDevelopment = process.env.NODE_ENV !== "production";
const path = require("path");
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`  
function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 690,
    minWidth: 900,
    minHeight: 400,
    frame: false,
    useContentSize: true,
    resizable: true,
    skipTaskbar: false,
    transparent: false,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      webSecurity: false,
      useContentSize: true,
      navigateOnDragDrop: true,
      devTools: true,
    },
  });
 mainWindow.loadURL(winURL)


三、新创口的创建可分为父子窗口和单独窗口


1、父子窗口


通过使用 parent 选项,你可以创建子窗口:


const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()


child 窗口将总是显示在 top 窗口的顶部


2、托盘菜单窗口


1)首现要创建托盘菜单窗口路由页面


Setting.vue


<template>
   <div class='main'>
      <el-row>
        <el-col :span="12">
          <div class="head_log">
            <span class='title'>设置</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="nav">
              <button @click="handlebtn('min')"><i class='el-icon-minus'></i></button>
              <button @click="handlebtn('close')" class="close"><i class='el-icon-close'></i></button>
          </div>
        </el-col>
      </el-row>
  </div>
</template>
<script>
let { ipcRenderer, remote, shell } = require("electron");
  export default {
    name:'setting',
    props:{},
    data () {
      return {
      };
    },
    watch: {},
    components: {},
    computed: {},
    beforeMount() {},
    mounted() {},
    methods: {
      handlebtn(type){//关闭
        ipcRenderer.send('window-setting',type)
      }
    },
  }
</script>
<style lang="scss" scoped>
.main{
    height:40px;
    .el-row{
      height:40px;
       -webkit-app-region:drag;
      .el-col-12{
        height: 40px;
        .head_log{
          height: 40px;
          padding-left: 20px;
          text-align: left;
          line-height: 40px;
          float: left;
          color:#999999;
          font-size: 14px;
        }
        .nav{
            position: absolute;
            right: 0;
            button{
                background: none;
                outline: none;
                border: none;
                font-size: 18px;
                cursor: pointer;
                padding: 9px 12px;
                -webkit-app-region: no-drag;
            }
            button:hover{
              color:white;
              background: #cccccc;
            }
            .close:hover{
              color:white;
              background: red;
            }
        }
      }
    }
}
</style>


2)路由注册弹窗页面


router/index.js


import Vue from 'vue'
import Router from 'vue-router'
import Home from "@/Pages/Home";
import Setting from '@/Pages/setting'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/setting",
      name: "Setting",
      component: Setting,
    },
  ],
});


3)托盘菜单点击,创建打开新窗口


let { app, Menu, Tray, ipcMain, BrowserWindow,dialog } = require('electron')
const winURL =process.env.NODE_ENV === "development"
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`; 
let setting = null;
const menu = Menu.buildFromTemplate([
  {
    label: "设置",
    click: function() {
      openchild()
    }, // 打开相应页面
  },
  {
    label: "帮助",
    click: function() {
    },
  },
  {
    label: "关于",
    click: function() {
      let pjson = require("../../package.json");
      const options = {
        type: "info",
        title: `关于`,
        message: `关于${pjson.name}\n当前版本 ${pjson.version}`,
        buttons: [],
      };
      dialog.showMessageBox(options);
    },
  },
  {
    label: "退出",
    click: function() {
      app.quit();
    },
  },
]);
function openchild(){  --创建新窗口
  //mainWindow.setMenu(null);
  setting = new BrowserWindow({
    width: 700,
    height: 500,
    frame: false,
    useContentSize: false,
    resizable: false,
    skipTaskbar: true,
    transparent: false,
    webPreferences: {
      nodeIntegration: true,
    },
    backgroundColor: "#F5F5F5",
  });
  setting.loadURL(winURL + "#/setting");              --打开新窗口的路径地址
}


相关文章
electron解决创建新窗口html文件不能引入ipcRenderer通信
electron解决创建新窗口html文件不能引入ipcRenderer通信
electron设置window系统托盘
electron设置window系统托盘
168 0
|
Windows
Electron窗口白屏解决
Electron白屏问题主要出现在两方面: 1、electron未加载完毕html,electron自身产生的白色背景; 2、electron加载html,html处于加载渲染过程中产生的短暂白屏;
2050 0
Electron + Vite + TS + Vue3打开新窗口实战
前言 我们在使用 Electron 编写桌面应用时,打开新窗口可以说是一个非常常见的场景了。很多刚接触 Electron 的小伙伴面对这样一个问题可能都会显得比较棘手,比如打开新窗口如何知道渲染哪一个页面?打开的新窗口如何与其它窗口产生联系,比如父子窗口?...等等一系列问题。 今天我们就将 Electron 打开新窗口的常见做法分享给大家,而且是基于最新的 TS 封装。
1740 0
Electron + Vite + TS + Vue3打开新窗口实战
|
UED
解决Electron窗口白屏问题的预创建方案
在使用Electron创建窗口时,有时会遇到窗口显示白屏的问题。这篇文章将介绍一种解决方案,即预创建窗口,并提供了针对窗口关闭和应用退出的管理方法,以确保 Electron 应用的顺畅运行和用户体验
707 0
|
前端开发 API
Electron 渲染进程之间互相通信 创建窗口时触发
Electron 渲染进程之间互相通信 创建窗口时触发
|
API C#
electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒
公司项目有一款带即时聊天、群组功能的APP,因为要给客服人员使用,需要开发PC版本。之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实现了一个PC版本。
3122 0
|
JavaScript 前端开发
『快速入门electron』之实现窗口拖拽
## 看完本文你可学会 - 对于进程通信有基本的一个了解 - 学会自定义的顶部栏如何实现拖拽功能
electron-vue升级electron到最新的版本后启动不起来,窗口一闪而过。
electron-vue 升级electron到最新的版本后启动不起来,窗口一闪而过。 排查后原因: electron-vue中的集成了很多库 单方面升级了 electron版本,导致了其他库的版本的不匹配 解决: 升级配套库的版本
348 0