electron loadURL限制只有1个窗口

2024-11-04

【Electron Playground】Electron 窗口问题汇总

作者:Kurosaki 本节旨在汇总在开发Electron 窗口可能遇到的问题,做一个汇总,后续遇到问题会持续更新. 1. 窗口闪烁问题. const { BrowserWindow } = require('electron'); const win = new BrowserWindow(); win.loadURL('https://github.com'); 使用new BrowserWindow() 创建出窗口,如果不作任何配置的话,窗口就会出现,默认是白色的:这个时候使用win.lo

Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource

Linux下Electron loadURL报错 ERR_FAILED(-2) Not allowed to load local resource 背景使用electron-vue的时候,窗体创建后加载页面使用的是loadURL函数,并且传入的参数形如: `file://${__dirname}/index.html` PS:在electron-vue中,编译打包后的__dirname是asar所在绝对地址/dist/electron/. 编译打包后的Electron程序启动时候,发现在调用

使用electron实现百度网盘悬浮窗口功能!

相关依赖里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态展示介绍说明没有使用electron内置的-webkit-app-region: drag 因为使用他那个有很多问题比如事件无法使用右键无法使用以及不能使用手型等! 安装安装的时候没有截图所以就参考下我其他的文章吧storeJs 安装 npm install storejs 准备写代码配置路由文件 export default new Router({ routes:

基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口

最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. 目前electron.js的star高达89.3K+,最新稳定版v11.2.3. 使用vue开发electron应用,网上有个比较火的脚手架electron-vue,不过里面的版本太低,而且使用的是vue2.x语法. 今天主要分享的是vue3语法开发electron应用,所以只能手动搭建开发环境.

electron开发 - mac关闭和隐藏窗口

针对mac平台的app let willQuitApp = false; // 控制退出方式 mainWindow.on('close', (e) => { if (willQuitApp) { mainWindow = null; printWindow = null; // 其他窗口也要会回收 } else { // mac平台,左上角关闭窗口 = 隐藏窗口 e.preventDefault(); mainWindow.hide(); } }); // Quit when all windo

【Electron Playground 系列】窗口篇

作者:Kurosaki 本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题. 官方文档虽然比较全面,但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解,才能应对各种需求. 1. 创建窗口通过BrowserWindow,来创建或者管理新的浏览器窗口,每个浏览器窗口都有一个进程来管理. 1.1. 简单创建窗口 const { BrowserWindow } = require('electron'); const win = ne

Electron实用技巧-开机启动时隐藏主窗口，只显示系统托盘

# 1 在桌面软件中,开机自启动是很常见的功能,在electron中也提供了很好的支持,以下是主要代码: //应用是否打包if (app.isPackaged) { //设置开机启动 app.setLoginItemSettings({ openAtLogin: true });}//应用是否打包if (app.isPackaged) { //获取是否开机启动 const { openAtLogin } = app.getLoginItemSettings(); return

Electron入门笔记（一）-自己快速搭建一个app demo

Electron学习-快速搭建app demo 作者: 狐狸家的鱼 Github: 八至一.安装Node 1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装. 2.然后cmd进入命令窗口,输入npm -v查看node当前版本, 二.创建文件并初始化 1.在自己喜欢的盘里新建项目文件,我是 E:\Electron\resources\app,在此文件目录app下打开命令窗口,按住shift ,右击空白处,选择在此处打开powershell命令窗口 2.在命令窗

electron 安装

1.从网上下载的是nodejs的v0.10.42版本的安装文件,安装node-v0.10.42-x86.msi都使用默认安装,安装完成后会安装在C:\Program Files\nodejs\目录下,然后直接把安装的目录C:\Program Files\nodejs\拷贝出来,然后再拷贝到另外一个全新的系统上,假如我放到d:\nodejs\这个目录下,在这个目录中创建一个run.bat文件作为我们的运行环境. 编辑run.bat文件,输入内容如下: @echo off echo --------

electron 学习

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl

Electron构建一个文件浏览器应用(一)

在window.mac.linux系统中,他们都有一个共同之处就是以文件夹的形式来组织文件的.并且都有各自的组织方式,以及都有如何查询和显示哪些文件给用户的方法.那么从现在开始我们来学习下如何使用Electron来构建文件浏览器这么一个应用. 注意:我也是通过看书,看资料来学习的.这不重要,重要的是我们学到东西.我们知道如何使用 electron 来做一个桌面型应用软件.有这些知识点后,以后我们做其他的桌面型应用软件会有基础. 那么既然是文件浏览器,那么我们可以给文件浏览器取一个名字,假如叫他为

Electron结合React和TypeScript进行开发

目录结合React+TypeScript进行Electron开发 1. electron基本简介为什么选择electron? 2. 快速上手 2.1 安装React(template为ts) 2.2 快速配置React 2.3 安装electron 2.4 配置main.js.preload.js和package.json文件 2.5 运行electron项目 2.6 打包项目 3. 自动刷新页面 4. 主进程和渲染进程 5.定义原生菜单.顶部菜单 5.1 自定义菜单 5.2 给菜单定义点击

electron 起步

electron 起步为什么要学 Electron,因为公司需要调试 electron 的应用. Electron 是 node 和 chromium 的结合体,可以使用 JavaScript,HTML 和 CSS 等 Web 技术创建桌面应用程序,支持 Mac.Window 和 Linux 三个平台. electron 的成功案例有许多,比如大名鼎鼎的 vscode. hello-world 官网有个快速启动的应用程序,我们将其下载到本地运行看一下. # Clone this reposit

Electron 不完全快速手册

Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意. Let's go Electron 是基于Node Chromium V8 组合而来,目前的版本是1.3.3 https://github.com/electron/electron/releases/download/v1.3.3/electron-v1.3.3-win32-x64.zip

electron通讯

Electron桌面应用实现两个窗口(渲染进程)之间的通讯,传输数据: 方法1:在两个网页(渲染进程)间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API. 其中比较好的方案是用 Storage API, localStorage,sessionStorage 或者 IndexedDB. 方法2:使用Electron 内的 IPC 机制实现.将数据存储在主进程的某个全局变量中,然后在多个渲染进程中使用 remote 模块来访问它.例: //主进程中 Global.saveData

Electron入门笔记（二）-快速建立hello world

官方的文档我没有看懂,看了不少别人的博客和文章,终于慢慢看懂了如何快速的建立一个Electron app demo,前一篇文章不是使用官方快速搭建的,而且还出了小问题,所以去撸了一遍quick-start,发现很简单一.安装Electron 1.全局安装在自己想安装的盘下打开命令窗口,输入命令:npm install -g electron进行全局安装 2.局部安装输入npm install electron进行局部安装二.克隆下载electron-quick-start 在自己安装el

Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用

基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用.实现了发送富文本消息.图片/视频/链接预览.拖拽发送图片.调用dll截图.朋友圈等功能.支持多开窗口|父子modal窗口.换肤等操作. 一.技术栈编码工具:vscode 框架技术:vue3.0+electron11.2.3+vuex4+vue-rou

electron 的中文文档的地址以及窗口改变的步骤

electron的中文文档的地址: http://www.kancloud.cn/wizardforcel/electron-doc/137791 1.如何创建窗口和改变窗口: import { BrowserWindow, globalShortcut, Menu } from 'electron' import Common from '../common/common.js' const winURL = process.env.NODE_ENV === 'development' ? `

electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实现了一个PC版本. 遇到了客服那边提过来的需求,当有新消息过来的时候,如果聊天窗口最小化了,需要有提醒,系统托盘也要像QQ一样有新消息过来的提醒与闪烁. 查了一个资料,两个功能都实现了. 先看任务栏的提醒样式如何实现 const path = require('path'); con

electron 的窗口设置最大化最小化

/** * Created by Administrator on 2016/11/23. * 页面对窗口的一些操作封装,用于渲染进程 */ "use strict"; const Common = require('../../window/common.js'); const { ipcRenderer, remote } = require('electron'); const WinReg = require('winreg'); const RUN_LOCATION = '\

electron loadURL限制只有1个窗口

热门专题