如何在电子browserWindow中创建圆角？
在电子browserWindow中创建圆角可以通过以下步骤实现：
- 使用Electron的BrowserWindow模块创建一个窗口对象。
- 在窗口对象中设置属性
frame: false，以便自定义窗口样式。 - 使用CSS样式来设置窗口的圆角效果。可以通过设置
border-radius属性来实现圆角，具体数值可以根据需求进行调整。 - 在窗口对象中加载HTML文件或者使用
loadURL方法加载网页内容。 - 最后，使用
win.show()方法显示窗口。
以下是一个示例代码：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false, // 隐藏窗口边框
webPreferences: {
nodeIntegration: true
}
});
// 加载HTML文件
win.loadFile('index.html');
// 设置窗口圆角样式
win.webContents.on('did-finish-load', () => {
win.webContents.insertCSS(`
body {
border-radius: 10px;
overflow: hidden;
}
`);
});
// 显示窗口
win.show();
}
app.whenReady().then(createWindow);这样就可以在电子浏览器窗口中创建圆角效果了。请注意，以上代码仅为示例，实际使用时需要根据自己的需求进行调整。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我刚接触过电子标签，我终于想出了如何圆角的方法。
然而，现在我开始工作了，我注意到我失去了我窗户上的阴影，为什么是
下面可以找到电子特定代码的整个main.js文件。
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");
let main
浏览 1提问于2020-03-03得票数 0
2回答
我到处寻找如何使我的browserWindow圆角。
如何实现圆角？
我试过让它变得透明。但是什么都不起作用。
她的代码是：
/**
* we need to keep a global reference of the window object. If we don't, the
* window will be closed automatically when the js object is garbage collected
*/
let win
function createWindow () {
// Create the browser window.
浏览 36提问于2017-01-21得票数 2
我需要从SharedWorkers访问调试信息。在一个普通的铬窗口中，我会通过打开chrome :// BrowserWindow来做到这一点，但我无法在电子的BrowserWindow中做到这一点。
我试着发出
window.open("chrome://inspect")
，但我得到一个空白窗口，打开新窗口中的dev-tools将显示
Not allowed to load local resource: chrome://inspect/
有什么线索吗？
浏览 1提问于2020-07-15得票数 0
回答已采纳
1回答
将电子应用程序从电子8.2.5更新到9.0.0后，终端中开始出现以下错误：
[1] (electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.
[1] Added Extension: [object Object]
[1] (electron) 'BrowserWindow.getDevToolsExtensions' is deprecated an
浏览 6提问于2020-05-19得票数 11
我创建了自己的react应用程序，并与electron.js连接。现在，如何连接我的后端从服务器文件夹与电子。
如何将后端添加到电子.exe中
const { app, BrowserWindow } = require('electron')
const path = require('path')
require('./app');
function createWindow() {
const win = new BrowserWindow({
width: 800,
浏览 1提问于2022-05-19得票数 0
要禁用devTools，我们需要通过BrowserWindow访问webPreferences，但是BrowserWindow不能直接从电子应用程序获得。那么，我们如何访问webPreferences来实现devTools呢？
没有Capcitor，下面的代码片段工作得非常好
const browserWindow = new BrowserWindow({
.....
webPreferences: { devTools: false}
})
浏览 1提问于2021-06-14得票数 0
回答已采纳
在电子vuejs应用程序的上下文中，我需要在我的应用程序中使用许多窗口，就像网站中的modals。
为此，我在应用程序中创建了一个用于管理窗口/模式的服务。
在开始构建我的电子应用程序时，我使用了一个带有历史模式的vue路由器。
在这种模式下路由器，我所有的窗口运行起来就像一个符咒。
，但我的电子生产环境不能工作，因为我使用历史路由器模式。
现在我使用哈希模式路由器()。
我的生产环境就像一种魅力
，但现在是(这是本文的主要内容！)创建的所有新内容窗口都是相同的。
它是挂载的第一个组件url，因为关联url是"/“。路由器不关心像这样的整个URL路径： --那就是：
这是我启动窗口的代
浏览 2提问于2021-03-26得票数 1
我试图启动我的网站默认在IE InPrivate模式，以便我可以摆脱吨的代码，以处理多个场景(如下所列)脚本可能会在执行期间反击。我的目标是在以前的历史上没有运行浏览器等等。
Google帐户有有效的会话，并且已经注册了我们的应用程序。
谷歌帐户有有效的会话，但不用于注册我们的网络应用程序。
谷歌帐户没有会话，但还记得以前输入的电子邮件/用户。
谷歌帐户没有会话，但记得以前输入的电子邮件/用户和密码。
谷歌帐户从未登录或与我们的应用程序一起使用(最简单的情况)
注意:在BrowserWindow类中，下面的内置方法没有多大帮助。
BrowserWindow browser = BrowserW
浏览 0提问于2015-02-24得票数 4
回答已采纳
我正试图在windows 10上安装电子设备，但没有工作。我的环境是Windows 10，x64，16 10内存。我已经安装了nodeJS和npm的更新版本。
我的应用程序根目录是c:\nodeP\app1，我尝试在cmd上执行以下命令
cd\
cd nodeP
cd app1
npm init
npm安装电子预建节省开发
npm启动
main.js文件
var app = require('app');
var BrowserWindow = require('browser-window');
app.on('rea
浏览 3提问于2016-07-17得票数 3
我对电子很陌生，只是试着去看文档。
我能够运行一个html的电子，它工作得很好。
然后，我尝试用BrowserWindow loadUrl加载一个Rails应用程序，但是该应用程序的javascripts在电子内部不起作用。
我的主要内容是这里的index.js：
var app = require ('app')
var BrowserWindow = require ('browser-window')
app.on('ready', function(){
var mainWindow = new BrowserWindow({
浏览 4提问于2015-08-12得票数 2
回答已采纳
我正在尝试使用child_process在电子中启动VLC const { app, BrowserWindow } = require('electron');
const child = require('child_process');
require('electron-reload')();
function createWindow () {
const win = new BrowserWindow({
width: 800,
height:
浏览 166提问于2021-01-13得票数 1
回答已采纳
1回答
我有一个电子应用程序，其中包括以下文件：
index.js
browserwindow.html
browserwindow.js (从browserwindow.jsx编译而来)
index.js是电子应用程序启动时运行的主要电子/节点过程。browserwindow.html在guiWindow中呈现，browserwindow.js管理此窗口。(见下面的文件。)
我想要的是从主电子过程向browserwindow.js发送ipc消息，然后更新React组件状态。但是当我使用下面文件中的代码并运行电子应用程序时，状态不会改变。
index.js
const electr
浏览 0提问于2017-11-22得票数 4
回答已采纳
1回答
我有一个电子BrowserWindow，它包含UI元素和用以下方法创建的BrowserView：
bv = createBrowserView('https://example.com');
...
browserWindow.setBrowserView(bv);
如何将此限制为表单***.example.com/***的URL，即停留在域example.com上
更准确地说，如果用户单击超出此域的超文本链接，则应该在外部应用程序(如系统的默认浏览器)中打开超文本链接，而不是在电子应用程序中打开。
如何用电子BrowserView?做这件事
浏览 4提问于2020-12-14得票数 0
回答已采纳
0回答
从电子调用窗口函数
、、、、
在我的一个.js文件中
window.functionName = function(){
}
现在我想调用主电子文件中的函数。我该怎么做呢？
下面是我在主电子文件中尝试做的事情：
const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;
var focusedWindow = BrowserWindow.getFocusedWindow();
focusedWindow.functionName();
它不起作用。为什么？
浏览 11提问于2017-12-12得票数 1
回答已采纳
为了让jQuery在我用电子(以前的Atom Shell)打开的HTML页面中正确加载和工作，我在BrowserWindow文件中创建BrowserWindow时必须禁用Node集成。
有人能告诉我什么设置node-integration: false将使我不能做我通常能够做的，如果我没有禁用它？
浏览 2提问于2015-04-25得票数 11
回答已采纳
1回答
我对电子很陌生，我在电子应用程序中使用BrowerWindow创建了一个窗口，并在构造函数中设置了show: false，但是当我执行应用程序时，窗口仍然会出现。请帮帮我。
电子版本- ^12.0.2
const {
app,
BrowserWindow,
ipcMain,
Menu
} = require('electron');
const url = require('url');
const path = require('path');
app.whenReady().then(() => {
cr
浏览 2提问于2021-04-09得票数 0
回答已采纳
我正在尝试学习Electron，但我使用的Pluralsight教程遇到了一个问题。我安装了“电子预置”模块。我每次运行"npm start“时都会收到一个错误。窗口按预期打开，但对话框中弹出的错误消息有点破坏了整个过程。下面是错误：
未捕获的异常: TypeError:无法读取未定义的at对象的属性'on‘。
这条长长的错误消息还有更多内容，但它不允许我复制和粘贴，其余的错误只是指向我的main.js代码第14行中假设的问题的位置。这是我的main.js文件：
const electron = require('electron')
const app = e
浏览 23提问于2018-02-19得票数 3
回答已采纳
我对电子很陌生。我正在阅读文档和。
根据，要创建一个窗口：
// In the main process.
const { BrowserWindow } = require('electron')
// Or use `remote` from the renderer process.
// const { BrowserWindow } = require('electron').remote
...
require('electron')和require('electron').remote有什么区别？
浏览 0提问于2019-03-09得票数 0
回答已采纳
到目前为止，使用下面的代码从renderer获取当前窗口
import {remote, BrowserWindow} from 'electron';
export function getCurrentWindow(): BrowserWindow {
return remote.getCurrentWindow();
}
既然电子14已经删除了remote模块，那么新的推荐方法是什么呢？
浏览 4提问于2021-09-06得票数 1
回答已采纳
我有一个简单的电子应用程序，围绕一个网络应用程序。web应用程序提示输入用户名，但电子没有显示提示，直接转到401授权要求页面。是否需要更改设置才能显示提示符？我似乎在文档中找不到它。任何帮助都是非常感谢的。 const { app, BrowserWindow } = require('electron');
function createWindow() {
browserWindow = new BrowserWindow({});
browserWindow.loadURL('https://domain')
}
app.on(&#
浏览 29提问于2019-06-20得票数 0
回答已采纳
当我用TypeScript编写下面的电子代码时， const { app, BrowserWindow } = require("electron");
let mainWindow: Electron.BrowserWindow; 我得到了这个错误：Cannot find namespace 'Electron'.。 似乎没有为类型Electron定义命名空间。我想知道在哪里可以加载这个类型定义。我在我的项目中添加了以下依赖项： "electron": "^5.0.2",
浏览 36提问于2019-05-28得票数 0
1回答
我正在开发一个小型的电子应用程序，我好像碰到了一个路障。我的应用程序中有一个网页视图，可以加载到。webview加载得很好，但是当我右键单击webview中的任何位置时，都不会创建上下文菜单，单击页面的任何部分，而这部分并不是成功创建的上下文菜单中的webview结果。我正在使用电子内容菜单来创建菜单，我阅读了git存储库中包含的文档：，但是没有任何有价值的东西。任何帮助都将不胜感激，因为我真的需要上下文菜单的出现在我的网页上。
Main.js
// Modules to control application life and create native browser window
con
浏览 2提问于2021-01-15得票数 0
回答已采纳
1回答
我是新来的电子，并试图创建一个简单的应用程序。我不想在全球安装电子。相反，希望它只安装在应用程序中。当我运行npm运行启动时，什么都不会发生。只是电子。获取在命令行上显示的。我的代码出了什么问题，在我能看到日志的任何地方
我的应用程序: MusicPlayer
app-> index.html
node_modules
main.js
package.json
Package.json是：
{
"name": "musicplayer",
"version": "1.0.0",
浏览 1提问于2017-07-02得票数 3
当我学习电子时，我发现了两种获取BrowserWindow对象的方法。
const {BrowserWindow} = require('electron')
和
const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
在JavaScript中，const和const {}有什么不同？
我不明白为什么const {}可以工作。我错过了关于JS的任何重要的东西吗？
浏览 162提问于2016-12-09得票数 125
回答已采纳
我正在使用电子框架用BrowserWindow打开一个网页。
我使用的代码如下：
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
width: 900,
height: 800
});
win.on('closed', () => {
win = null
});
win.loadURL( "http://***.com/detail.asp?bhcp=1");
然而，打开的网页可以检测到我的真实屏幕分辨率。我可以用什么方法
浏览 3提问于2018-03-22得票数 1
在电子版本1.X中，我如何从一个BrowserWindow发出一个事件并在另一个BrowserWindow中使用它？
我使用的是电子版本1.2.1。
浏览 8提问于2016-06-02得票数 1
回答已采纳
我正在尝试扩展一个电子项目。我有一个新的BrowserWindow (基本上是浏览器中的一个新选项卡)，它应该包含文档。文档是用markdown编写的，所以我想知道如何在这个BrowserWindow中打开我的markdown文件……
基本上，我只需要一种方法来转换一个markdownfile在运行时的网页。
浏览 0提问于2016-07-16得票数 0
回答已采纳
简单的问题是，我试图使用电子，我需要得到客户端的remote对象。
正在做什么
const {BrowserWindow} = require('electron').remote; // Works
但
import {BrowserWindow} from 'electron/remote' // Does not work
ES6类的新手只是不知道为什么这不起作用。谢谢。
浏览 2提问于2016-10-05得票数 8
回答已采纳
3回答
我正试图在电子应用中实现语音识别。该解决方案在铬浏览器中工作，但在电子中不工作。应用程序立即停止监听--它可能没有麦克风许可。如何授予权限？
index.js
const electron = require('electron');
const url = require('url');
const path = require('path');
const { app, BrowserWindow, ipcMain } = electron;
let mainWindow;
ipcMain.on('close-me',
浏览 4提问于2020-03-18得票数 2
我一直试图让一个电子程序在我的Windows 10笔记本电脑上工作，但当我在Visual运行应用程序时，只有控制台打开，但我无法打开BrowserWindow。当我试图从文件夹中打开Electron.exe本身时，什么都不会发生。不过，任务管理器中可以看到电子过程。
因为我没有犯任何错误，所以我真的很困惑。什么能“阻止”电子显示任何窗口？错误的代码不可能是原因，因为我在我的项目中使用了完全相同的电子快速启动代码，而打开Electron.exe并不需要我做任何事情。
编辑：当我试图从VS2017中的零开始制作尽可能简单的电子应用程序时，我试着在所有地方插入console.log()命令，看看什么
浏览 0提问于2017-06-10得票数 0
回答已采纳
2回答
我正在尝试做一个电子应用程序，我需要加载一个超文本标记语言到一个BrowserWindow，但控制这一点的脚本是在另一个目录，这是不一样的超文本标记语言的。 它看起来是这样的： ? 这是我将超文本标记语言加载到BrowserWindow中的代码： const electron = require("electron");
const {BrowserWindow} = electron;
//This part is called from an exported function
const window = new BrowserWindow();
window.
浏览 54提问于2019-01-05得票数 2
回答已采纳
我对电子很陌生，我试图创建一个简单的代码来打开html文件，但是它却打开了一个空白的电子窗口。
const electron = require('electron')
const {app, BrowserWindow} = electron
app.on('ready', () => {
let win = new BrowserWindow({width:800, hight: 600})
win.loadURL('file://${__dirname}/index.html')
})
<!DOCTYPE html
浏览 3提问于2017-10-19得票数 1
回答已采纳
2回答
我在一家电子公司工作。每个事件都有许多特定的侦听器在传递。例如，BrowserWindow.on：
Electron.BrowserWindow.on(event, listener)
event可以是'always-on-top-changed', 'app-command', etc etc...中的任何一个。我希望在一个类型中列出所有这些事件，例如，我可以使用它来限制其他函数传递无效的事件。
我试过：
type BrowserWindowOnEvents = Parameters<InstanceType<typeof Electron.Bro
浏览 6提问于2022-03-23得票数 3
我用的是Angular2和WebPack。
我正在尝试对BrowserWindow对象进行控制。
我正在做我的组件的顶部
import * as electron from 'electron';
然而，在这样做时：
this.authWindow = new electron.BrowserWindow({ width: 800, height: 600, show: false});
我在运行时得到一个错误
原始异常: TypeError: electron.BrowserWindow不是一个函数
当记录电子时，电子本身看起来只是一个函数，因此其中没有Browser
浏览 0提问于2016-03-20得票数 0
回答已采纳
我正在尝试隐藏电子窗口窗口栏上的程序图标。我创建了BrowserWindow，如下所示：
<code>A0</code>
但是，这不会隐藏图标，并且仍然显示默认程序图标。如何在电子邮件中隐藏程序图标？
浏览 21提问于2018-12-21得票数 1
我有一个用React创建的web应用程序。我想创建该应用程序的桌面版本。为此，我在public文件夹中添加了electron.js文件。在electron.js文件中是基本的电子代码，它获取index.html并将其转换为桌面应用程序，如下所示： const { app, BrowserWindow } = require('electron')
const path = require("path");
const isDev = require("electron-is-dev");
function createWindow () {
浏览 10提问于2020-12-29得票数 0
我正在尝试更改电子应用程序中使用的html文件。我在StackOverFlow上尝试了几个建议，但我什么都做不到。我的代码如下： main.js： <!DOCTYPE html>
<html>
<head>
<script src="renderer.js"></script>
</head>
<body>
<h1>One</h1>
<button id="change">
浏览 45提问于2021-10-13得票数 0
2回答
我想要一个单一的电子窗口，分成两部分：
左边是一个BrowserWindow加载。
右边的部分也是加载Gmail的另一个BrowserWindow，但我希望这两个浏览器是“独立的”，即cookies/LocalStorage/等应该是独立的(比如如果我们有一个正常的Chrome窗口与一个匿名窗口)；因此允许在左侧的一个Gmail帐户/在右边连接另一个帐户。
一些其他UI按钮在单一电子窗口之上。
此代码可以工作，但它创建了2个窗口，而不是一个：
const { app, BrowserWindow } = require('electron')
const p
浏览 1提问于2019-03-06得票数 9
回答已采纳
1回答
我刚接触电子框架，我正在使用下面的代码从我的电子应用程序中打开一个新窗口，但是我如何在相同的/父窗口中打开一个链接？
我的父窗口是一个HTML文件。
<a href="#" onclick="myFunction()">google</a>
<script>
function myFunction() {
const remote = require('electron')
浏览 22提问于2017-07-21得票数 1
回答已采纳
我正在建立一个使用电子和反应的应用程序。当我在react上运行build并尝试使用电子文件时，我最终得到了
我使用了电子的起始模板
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile(&
浏览 1提问于2021-02-09得票数 0
我正在写作和电子应用。它有一个主浏览器窗口。然后从那里打开另一个BrowserWindow。现在，我想以编程方式单击子浏览器窗口上的一个按钮。我怎样才能做到这一点？
让我们假设主窗口呈现过程中的代码如下所示：
const childWindow = new BrowserWindow({
width: 800,
height: 600,
})
childWindow.loadUrl('...')
// wait for the window to settle
setTimeout(()=>{
// the code to
浏览 2提问于2021-10-20得票数 0
回答已采纳
以下代码起作用：
import { app, BrowserWindow } from 'electron';
class Main {
static mainWindow: Electron.BrowserWindow;
static application: Electron.App;
private static onWindowAllClosed()
{
if (process.platform !== 'darwin')
Main.application.quit();
浏览 4提问于2017-04-08得票数 1
回答已采纳
我试图用在电子4.2.3中绕过。但是，我无法运行预加载脚本。极小的复制案例：
package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"electron": "^4.2.3"
}
}
main.js
const { app, BrowserWindow } = require('electr
浏览 0提问于2019-06-04得票数 10
回答已采纳
3回答
我正在尝试使用电子快速启动存储库将jquery功能添加到一个用电子方式编写的桌面应用程序中。我将下载的jquery文件添加到main.html文件中，如下所示：
<script> require("./jquery.min.js"); </script>
大概是这样的：
<script>window.$ = window.jQuery = require('./jquery.min.js');</script>
然后在index.js文件中，我在createWindow函数中添加代码，因为这似乎是正确的位置，但老实
浏览 0提问于2016-06-10得票数 7
我正在创建一个电子应用程序，作为另一个应用程序的覆盖。
有时我的界面的某些部分不可见，但电子BrowserWindow仍然占用空间(我想避免动态调整BrowserWindow的大小)。
当有人点击我的overlay中不可见的部分时，我会完全关闭界面，下面是实现这一点的代码：
main.js:
const { BrowserWindow, ipcMain } = require('electron')
// Win is an instance of BrowserWindow
ipcMain.on('closeWindow', () => { if (
浏览 0提问于2019-10-25得票数 0
2回答
由于某种原因，在我的电子应用程序中，每当我在frame: false选项中设置BrowserWindow时，框架仍然在windows 10 (build 1709)中持续存在，并且不会禁用。这是我的BrowserWindow
const win = new BrowserWindow({
webPreferences: {
width: 1440,
height: 960,
frame: false,
titleBarStyle: 'hidden',
nodeIntegrationInWor
浏览 5提问于2018-02-20得票数 0
回答已采纳
2回答
使用电子1.2.1和电子打包器7.0.3，在构建BrowserWindow的图标后，在linux (Ubuntu14.04 x64)上没有显示出来，它是？图像。如果我没有创建asar文件，那么图标就会出现。如果我在启动应用程序时检查该文件是否存在，它会显示该文件存在，我甚至可以使用fs模块将其复制到asar文件之外。所以图像就在那里，但在asar文件中，它并没有被电子使用。
如果我将文件放在asar文件之外，并将路径更改为BrowserWindow的图标配置以匹配该文件，它仍然不会拾取图标，所以不是文件是否在asar文件中，而是应用程序是从asar文件加载的。
我用了一个简单的例子：
var
浏览 2提问于2016-06-03得票数 1
我正在尝试使用Angular 2(配置了最新的基于webpack的angular cli)为gui构建一个电子应用程序的原型，但由于我不知道如何在angular2组件中导入电子应用程序接口，我被卡住了。具体地说，我希望能够在点击ui中的按钮时打开一个新的BrowserWindow…所以：
<button type="button" (click)="openNewWindow()">
open
</button>
在我的组件中：
openNewWindow() {
let appWindow = new Browser
浏览 6提问于2016-10-25得票数 3
我对电子很陌生。我使用Vue CLI插件电子生成器创建基础项目。在BrowserWindow.LoadURL窗口中，它可以工作。但在macos上，BrowserWindow.LoadURL不起作用。macos 10.10.5版，电子版本11.4.7
try {
//it not working on macos
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
} catch (err) {
//can't catch any err on macos
浏览 8提问于2021-06-07得票数 0
回答已采纳
2回答
我遵循了相关问题答案中的建议，即指定
webPreferences: {
plugins: true
}
作为创建BrowserWindow实例时的选项的一部分，但它根本不起作用。每当我试图加载/打开/查看电子中的PDF文件时，我得到的只是一个空的/损坏的铬PDF查看器，就像这个屏幕截图上的那样：
根据我的package.json，我的电子版本是"^13.1.2“，这是我的main.js
// main.js
// Modules to control application life and create native browser window
const
浏览 1提问于2021-06-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
