3 - Electron BrowserWindow对象 关于窗口

优雅的打开应用~

当加载缓慢,打开应用的一瞬间会出现白屏,以下方法可以解决

javascript 复制代码
const mainWindow = new BrowserWindow({ show: false })
mainWindow.once('ready-to-show', () => {
  mainWindow.show()
})

设置背景颜色

javascript 复制代码
const win = new BrowserWindow({ backgroundColor: '#2e2c29' })

定义多窗口

javascript 复制代码
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1000,
    height: 600,
  });
   win.loadFile("index.html");

   const win2 = new BrowserWindow({
    width: 600,
    height: 600,
  });
   win2.loadURL('https://www.csdn.net/')
};

创建了两个互不相干的窗口

定义父子窗口

javascript 复制代码
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1000,
    height: 600,
  });
   win.loadFile("index.html");

   const win2 = new BrowserWindow({
    width: 600,
    height: 600,
    parent:win,//父窗口是win
  });
   win2.loadURL('https://www.csdn.net/')
};
  • 当不属于父子窗口时,拖动哪个窗口哪个窗口置顶
  • 当属于父子窗口时,拖动窗口后,子窗口置顶,父窗口在下面

frame属性

javascript 复制代码
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1000,
    height: 600,
    frame: false
  });
   win.loadFile("index.html");
};

frame:true frame:false

当frame:false时

  • 窗口不能拖动
  • 没有标题

用css解决窗口拖动方案

html 复制代码
<style>
    html{
        height: 100%;
        user-select: none;
        -webkit-app-region:drag;
      }
</style>

但是这时存在一些小bug,当我们想拖动滑动条时,还是拖拽的窗口。

html 复制代码
input{
    -webkit-app-region:no-drag;
}

在你想拖拽的元素添加no-drag属性,就可以解决啦!

electron-win-state 保存窗口的状态

当用户拖拽窗口大小或位置,关闭应用后不会保留的;如果我们需要保存窗口状态可以试试下面插件

html 复制代码
npm i electron-win-state   
javascript 复制代码
const WinState=require('electron-win-state').default; 

const winState=new WinState({
  //初始化宽高
  defaultWidth:800, 
  defaultHeight:600,
})
const createWindow = () => {
  const win = new BrowserWindow({
    ...winState.winOptions, 
    //在这里定义的宽高位置都要删掉哦!
    // width: 1000,
    // height: 600,
    // x:100,
    // y:100,
    backgroundColor:'black',
  });
   win.loadFile("index.html");
   winState.manage(win);//在函数最下方写入
};

require('xxx').default

第一次接触这个有点疑惑,不明白什么意思,举个例子

javascript 复制代码
//导出接口


export default function() {}
// 等效于:
function a() {};
export {a as default}; //意思是把a函数导出去

import、require、export、module.exports 混合使用详解_import module.exports-CSDN博客

did-finish-load 外部资源加载完毕,dom-ready DOM加载完毕

javascript 复制代码
const wc = win.webContents;
wc.on("did-finish-load", () => {
  console.log("外部资源加载完毕");
});
wc.on("dom-ready", () => {
  console.log("DOM 加载完毕");
});
相关推荐
PandaCave2 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟4 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
Bruce小鬼7 分钟前
QT文件基本操作
开发语言·qt
2202_7544215413 分钟前
生成MPSOC以及ZYNQ的启动文件BOOT.BIN的小软件
java·linux·开发语言
我只会发热20 分钟前
Java SE 与 Java EE:基础与进阶的探索之旅
java·开发语言·java-ee
醉の虾25 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
懷淰メ29 分钟前
PyQt飞机大战游戏(附下载地址)
开发语言·python·qt·游戏·pyqt·游戏开发·pyqt5
张小小大智慧34 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm43 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
宁静@星空1 小时前
006-自定义枚举注解
java·开发语言