electron菜单或托盘点击如何打开新的窗口-阿里云开发者社区

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

2023-01-20 443

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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");              --打开新窗口的路径地址
}