【Electron+Vue】【三】主脚本+自定义标题栏+自定义最小化、最大化、关闭按钮

目录

简单介绍

主脚本

自定义标题栏

自定义最小化、最大化、关闭按钮

---

简单介绍

在前四篇介绍了electron+vue的难点，到了真正上手的时候会发现有很多的细节才是真正让人头疼的，网上答案千篇一律，并不能起什么效果，现在就具体开发细节问题来做一下整体说明！

主脚本

经过反复研究，很完美了。

'use strict'
// 为了管理您应用程序的生命周期事件，以及创建和控制浏览器窗口，您从electron软件包导入了app 和 BrowserWindow模块 。
import {
  app,
  ipcMain,
  BrowserWindow
} from 'electron'

if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow = BrowserWindow.getFocusedWindow()
const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`

// 定义一个函数，该函数创建一个 新的浏览窗口 启用了节点集成，将index.html文件加载到此窗口中（第 32 行），
// 并打开开发人员工具（第 33 行）。
function createWindow () {
  mainWindow = new BrowserWindow({
    height: 690,
    useContentSize: true,
    width: 1020,
    frame: false, // 去掉窗口边框 // 取消默认的头部；自定义头部
    autoHideMenuBar: true, // 隐藏菜单栏
    simpleFullscreen: true,
    // resizable: false,//可否缩放,会让放大后的窗口不能恢复
    // resizable: process.platform === 'darwin', //可否调整大小
    minimizable: true, // 可否最小化
    maximizable: true, // 可否最大化
    closable: true, // 展示关闭按钮
    fullscreen: false, // MAC下是否可以全屏
    skipTaskbar: false, // 在任务栏中显示窗口
    acceptFirstMouse: true, // 是否允许单击页面来激活窗口
    transparent: false,
    movable: true, // 可否移动
    allowRunningInsecureContent: true, // 允许一个 https 页面运行 http url 里的资源
    // 网页功能设置
    webPreferences: {
      devTools: true, // 是否打开调试模式
      webSecurity: false, // 禁用安全策略
      allowDisplayingInsecureContent: true, // 允许一个使用 https的界面来展示由 http URLs 传过来的资源
      allowRunningInsecureContent: true, // 允许一个 https 页面运行 http url 里的资源
      nodeIntegration: true, // 5.x以上版本，默认无法在渲染进程引入node模块，需要这里设置为true  //是否集成node，默认false
      enableRemoteModule: true // 打开remote模块
    },
    title: '跨平台桌面应用开发',
    x: 0,
    y: 0,
    backgroundColor: '#fff'
  })

  mainWindow.loadURL(winURL)
  // mainWindow.webContents.openDevTools()
  mainWindow.on('closed', () => {
    mainWindow = null
  }).on('close', event => {
    mainWindow.send('close-window-render')
    event.preventDefault()
  }).on('ready-to-show', () => {
    mainWindow.show()
  })
}

// 通过调用 createWindow方法，在 electron app 第一次被初始化时创建了一个新的窗口
app.on('ready', createWindow)

// 添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。 因为操作系统窗口管理行为 ，此监听器在 macOS 上是一个禁门。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 添加一个新的侦听器，只有当应用程序激活后没有可见窗口时，才能创建新的浏览器窗口。
// 例如，在首次启动应用程序后，或重新启动已在运行的应用程序。
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

// 以下为自定义
// 窗口最小化
ipcMain.on('window-min', () => {
  mainWindow.minimize()
})
// 窗口最大化
ipcMain.on('window-max', () => {
  if (mainWindow.isMaximized()) {
    mainWindow.restore()
  } else {
    mainWindow.maximize()
  }
})
// 窗口关闭
ipcMain.on('window-close', () => {
  mainWindow.close()
})

自定义标题栏

electron会默认显示边框和标题栏，如下图

我们来看一下如何自定义一个标题栏，例如网易云音乐这种 

首先我们要把默认的标题栏删掉，找到主进程中创建窗体部分，new BrowserWindow时添加参数frame: false即可

mainWindow = new BrowserWindow({
    useContentSize: true,
    frame: false,
  })

这样会把标题栏和边框一并隐藏

但是！实践起来没有效果！！！

• 原因在于代码的报错，页面是没有任何报错的！
• 代码报错1：缺少空格
• 代码报错2：文件末尾空行太多

所以一定要解决完这页所有的报错才会运行起来！ 

扩展：

VScode中关闭空格检查

凡是webpack文件中这种格式的都依此注释

自定义最小化、最大化、关闭按钮

步骤一：

index.js添加

import {
  app,
  ipcMain,
  BrowserWindow
} from 'electron'

//登录窗口最小化 
ipcMain.on('window-min', function () {
  mainWindow.minimize();
})
//登录窗口最大化 
ipcMain.on('window-max', function () {
  if (mainWindow.isMaximized()) {
      mainWindow.restore();
  } else {
      mainWindow.maximize();
  }
})
//登录窗口关闭
ipcMain.on('window-close', function () {
  mainWindow.close();
})

步骤二：

头部文件添加

            <Button @click="minimize" type="text">
                <Icon type="ios-remove size-common2 font-weight" />
            </Button>
            <Button @click="max" type="text">
                <Icon v-show="max_icon" type="ios-square-outline size-common1-5 font-weight" />
                <Icon v-show="!max_icon" type="ios-browsers-outline size-common1-5 font-weight" />
            </Button>
            <Button @click="close" type="text">
                <Icon type="ios-close size-common2-5 font-weight" />
            </Button>

js  两方案的选其一即可

import {
        remote
    } from "electron";
    const {
        BrowserWindow
    } = remote;
    export default {
       data() {
            return {
                max_icon: true,
            }
        },
        methods: {
            close() {
                // 方案一
                //返回一个所有已经打开了窗口的对象数组
                const window = BrowserWindow.getFocusedWindow()
                window.close()
                // 方案二
                // this.$electron.ipcRenderer.send("window-close");
                //方案三：只需要在渲染进程进行修改就可以了 ， 我们无需在去主进程修改代码
                // remote.getCurrentWindow().close();
            },
            minimize() {
                // 方案一
                const window = BrowserWindow.getFocusedWindow()
                window.minimize()
                // 方案二
                // this.$electron.ipcRenderer.send("window-min");
                //方案三：只需要在渲染进程进行修改就可以了 ， 我们无需在去主进程修改代码
                // remote.getCurrentWindow().minimize();
            },
            //放大和恢复在index.js已经处理过了，控制图标就好了
            max() {
                // 方案一
                // const window = BrowserWindow.getFocusedWindow()
                // window.maximize()
                // 方案二
                this.$electron.ipcRenderer.send("window-max");
                // 方案三：只需要在渲染进程进行修改就可以了 ， 我们无需在去主进程修改代码
                // remote.getCurrentWindow().maximize()
                this.max_icon = !this.max_icon
            }
  }
}

注意：

在JS中一定要先引用 再定义变量哦 

当我们写完自定义导航时会发现窗口无法拖拽 ， 啥原因呢？

应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的
在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除
拖动行为可能与选择文本冲突。 例如, 当您拖动标题栏时, 您可能会意外地选择标题栏上的文本。 为防止此操作, 您需要在可区域中禁用文本选择

我们可以添加如下代码来解决

.titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
}