electron-vue 常用配置

简介: electron-vue 常用配置

详见代码中的注释

src\main\index.js

import { app, BrowserWindow } from 'electron'
 
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}
 
// 开发模式的话走webpack-dev-server的url
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`
 
let mainWindow
 
// 创建窗口
function createWindow() {
 
  // 创建主窗口的配置信息
  const options = {
    useContentSize: true,
    height: 563,
    width: 1000,
    minWidth: 800,  //宽最小值
    minHeight: 400, //高最小值
    // fullscreenable: true, // 是否允许全屏
    center: true, // 是否出现在屏幕居中的位置
    frame: true,  //是否显示边框、标题栏和菜单栏;默认为true
    show: true,  //隐藏页面(程序只在后台运行); 默认为true
    // backgroundColor: '#fff', // 背景色,用于transparent和frameless窗口
    titleBarStyle: 'hidden', // 标题栏的样式,有hidden、hiddenInset、customButtonsOnHover等,为hidden时隐藏系统默认的titlebar
    resizable: true, // 是否允许拉伸大小,为false时,最大化按钮会被禁用
    transparent: false, // 是否是透明窗口(仅macOS)
    vibrancy: 'ultra-dark', // 窗口模糊的样式(仅macOS)
    webPreferences: {
      nodeIntegration: true, //在网页中集成Node
      enableRemoteModule: true, // 打开remote模块
      webSecurity: false,
      backgroundThrottling: false, // 当页面被置于非激活窗口的时候是否停止动画和计时器
    }
  }
 
  // 针对windows平台做出不同的配置
  if (process.platform === 'win32') {
    options.show = true // 创建即展示
    options.frame = true // 创建一个frameless窗口
    options.backgroundColor = 'white' // 背景色
  }
 
  // 创建主窗口
  mainWindow = new BrowserWindow(options)
 
  var electron = require('electron')
  // 注册全局快捷键 ctrl+e  
  electron.globalShortcut.register('ctrl+e', () => {
    // 在主窗口中,加载网页 'https://jspang.com'
    mainWindow.loadURL('https://jspang.com')
  })
 
  // 开启devTool
  // mainWindow.webContents.openDevTools()
 
  // 加载窗口的URL -> 来自renderer进程的页面
  // mainWindow.loadURL(winURL)
  mainWindow.loadURL("http://106.12.123.173/#/dic")
  mainWindow.maximize()
 
  // 关闭devTool
  mainWindow.webContents.closeDevTools()
 
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}
 
// 加载自定义菜单
const menuTemplate = [{
  label: '主页',
  click() {
    // 页面跳转方式一(推荐)
    mainWindow.webContents.send('href', '/index');
    // 页面跳转方式二
    // mainWindow.loadURL(winURL+'#/index')
  }
},
{
  label: '测试页',
  submenu: [
    {
      label: '第1页',
      click() {
        mainWindow.webContents.send('href', '/page1');
      }
    },
    {
      label: '第2页',
      click() {
        mainWindow.webContents.send('href', '/page2');
      }
    }
  ]
}
];
 
var Menu = require('electron').Menu;
Menu.setApplicationMenu( Menu.buildFromTemplate([]));
 
// 当electron完成初始化后触发
app.on('ready', createWindow)
 
// 所有窗口都关闭的时候触发,在windows和linux里,所有窗口都退出的时候通常是应用退出的时候
app.on('window-all-closed', () => {
  // 当操作系统不是darwin(macOS)时
  if (process.platform !== 'darwin') {
    // 退出应用
    app.quit()
  }
})
 
// (仅macOS)当应用处于激活状态时
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})
目录
相关文章
|
20天前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
3月前
|
JavaScript 开发工具
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
|
4月前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
|
6月前
|
移动开发 开发框架 JavaScript
Vue3 Vite electron 开发桌面程序
Vue3 Vite electron 开发桌面程序
339 0
|
前端开发 算法 JavaScript
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(下)
169 0
|
存储 Web App开发 JavaScript
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
从零开始开发图床工具:使用 Gitee 和 Electron 实现上传、管理和分享(上)
241 0
|
Web App开发 资源调度 前端开发
基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
基于NeteaseCloudMusicApi和electron-vue开发网易云音乐--electron-vue初始化
139 0
|
前端开发 JavaScript API
React使用Electron开发桌面端
React是一个流行的JavaScript库,用于构建Web应用程序。结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤:
React使用Electron开发桌面端
|
前端开发 JavaScript 开发者
前端桌面应用开发:Electron介绍与实践(3)
前端桌面应用开发:Electron介绍与实践(3)
127 0