Electron 学习_BrowserWindow

这篇具有很好参考价值的文章主要介绍了Electron 学习_BrowserWindow。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

BrowserWindow创建并控制浏览器窗口(主进程)
条件:在 app 模块 emitted ready 事件之前,您不能使用此模块。

1.在加载页面时,渲染进程第一次完成绘制时,如果窗口还没有被显示,渲染进程会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁

  win.once('ready-to-show', () => {
    win.show()
  })

2.设置backgroundColor 属性

    //BrowserWindow  创建并控制浏览器窗口,设置窗口大小(在 app 模块 emitted ready 事件之前,不能使用此模块)
  const win = new BrowserWindow({
    width: width,
    height: height,
    backgroundColor: '#2e2c29',//窗口背景颜色
    webPreferences: {
      //nodeIntegration: true,
      defaultEncoding: 'utf-8',
      userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36',
      preload: path.join(__dirname, 'preload.js')
    },
  });

Electron 学习_BrowserWindow,electron,学习,javascript
3.设置父子窗口(通过使用 parent 选项,创建子窗口,子窗口总是位于父窗口上)

 const { width, height } = screen.getPrimaryDisplay().workAreaSize

  //BrowserWindow  创建并控制浏览器窗口,设置窗口大小(在 app 模块 emitted ready 事件之前,不能使用此模块)
  const win = new BrowserWindow({
    width: width,
    height: height,
    backgroundColor: '#2e2c29',//窗口背景颜色
    webPreferences: {
      //nodeIntegration: true,
      defaultEncoding: 'utf-8',
      userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36',
      preload: path.join(__dirname, 'preload.js')
    },
  });
  const child = new BrowserWindow({ parent: win ,width:300,height:400}) //创建子窗口
  child.show()

  //在加载页面时,渲染进程第一次完成绘制时,如果窗口还没有被显示,渲染进程会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁
  win.once('ready-to-show', () => {
    win.show()
  })

  win.loadFile('index.html');

Electron 学习_BrowserWindow,electron,学习,javascript
4.new BrowserWindow 的 page-title-updated 事件:文章来源地址https://www.toymoban.com/news/detail-617070.html

  // 监听页面标题更新事件
  win.webContents.on('page-title-updated', (event, title) => {
    console.log(`页面标题更新为:${title}`);
  });

到了这里,关于Electron 学习_BrowserWindow的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • electron学习-03preload 预加载-主进程 和 渲染进程之间通信

    主进程 是有着完全操作系统访问权限的 Node.js 环境; 渲染进程 默认跑在网页页面上。 渲染进程不能直接访问 Node.js 接口;主进程访不能直接访问 DOM。 预加载 脚本 运行在 具有 HTML DOM 和 Node.js、Electron API 的有限子集访问权限的环境中 预加载脚本: 将 Electron 的不同类型的进

    2023年04月09日
    浏览(43)
  • Electron:Electron整合vue

    主要思路:分别启动两个进程,一个是vue,另一个是electron。然后在electron通过loadURL去引入vue的主页面。但怎么才能将这两个项目整合成一键启动呢?请看后文! TODO

    2024年01月19日
    浏览(39)
  • 正确安装Electron、Electron-quick-start和Electron Forge

    Electron Forge引用了Squirrel.windows项目,这导致Electron Forge生成的安装包只能安装在本地用户帐户中。 Or maybe you’re good at reinvent the wheel and can read this part of the documentation. ElectronForge文档 - 扩展 - 制作工具 Squirrel.Windows的Github议题 - Choosing install directory 打开命令行工具,输入 如果正

    2024年02月06日
    浏览(44)
  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(37)
  • 【Electron】electron与cljs的处理

    实现效果: 前言: 如何用cljs的方式,编写electron应用,可以实现多窗体应用 要使用ClojureScript(CLJS)编写一个 Electron 应用程序,并实现多窗体功能,您可以按照以下步骤进行操作: 设置开发环境: 安装 Node.js:确保您的计算机上安装了 Node.js,因为 Electron 依赖于它。 安装

    2024年02月07日
    浏览(37)
  • electron、electron-forge 安装

    npm修改了registry,安装依旧无效 使用cnpm 倒是可以解决,但是 npx electron-forge import 中 Installing dependencies 使用的是npm 给出一次性解决方案: step1:切换npm的下载源,可以使用nrm 进行管理,有很多写的了,就不赘述了。 或者直接修改 (ps:如果你还想修改回来,可以记录一下现

    2024年02月13日
    浏览(35)
  • 【Electron】使用electron-builder打包时下载electron失败或慢的解决方案

    问题描述 electron-builder打包时报错信息如下: 解决 该问题是因为electron包需要翻墙获得,需要全局代理,但是太麻烦,我们一般是修改镜像源 在项目根目录下创建.npmrc文件,并且输入以下配置:

    2024年02月11日
    浏览(43)
  • electron-dl用于在Electron中下载多个文件

    electron-dl用于在Electron中下载多个文件 在这个更新的代码中,我们使用了 electron-dl 模块的 download 函数来实现文件下载。我们在主窗口加载完成后,通过循环遍历文件列表,使用 await 等待文件下载完成。下载成功后,我们打印出文件保存的路径。如果下载失败,则打印

    2024年02月03日
    浏览(45)
  • electron应用重启,开机自启动(electron开发常用的方法、优化方案)

    不会了一定先去参考官网:electron官网 主进程中监听 页面中调用 如果不启用非开发环境的话,开发者电脑开机会出现:To run a local app, execute the following on the command line: 弹框,解决方法就是开发环境不启用开机自启动,代码如上 思路:用nodejs去先定时重启应用,在杀死对应软

    2024年02月12日
    浏览(38)
  • electron27+react18集成搭建跨平台应用|electron窗口多开

    electron27-vite4-react18基于electron27结合vite4构建工具快速创建react18跨端应用实践。 版本列表 快速创建react18项目 这里选择使用vite.js构建工具来快速创建一个react18项目。 这样一个简单的react18项目就已经创建完毕了。 安装electron依赖包 注意:electron依赖安装在 devDependencies 里面。

    2024年02月08日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包