electron【基础篇二】

1.处理初始化窗口白屏问题和初始化参数配置

const { app, BrowserWindow } = require("electron");
// 当app启动之后执行窗口的操作
app.whenReady().then(() => {
  // 打开一个新窗口
  const mainWin = new BrowserWindow({
    x: 200, // 初始化在屏幕的x轴，左上角为基准
    y: 100, // 初始化在屏幕的y轴，左上角为基准
    width: 1200, // 初始化宽度
    height: 600, // 初始化高度
    show: false, // 默认不展示该窗口
    minHeight: 300, // 最小高度
    minWidth: 600, // 最小宽度
    // maxHeight:1000, // 最大高度
    // maxWidth:1200, // 最大宽度
    resizable: true, // 是否可以拖动
    icon: "icon.png", // 自定义图标
    frame: true, // 用于自定义菜单和menu，设置为false可以隐藏菜单和标题栏
    transparent: false, // 是否透明
    autoHideMenuBar: true, // 是否隐藏顶部菜单
    webPreferences: { // 处理非node环境下不能使用require语法
      nodeIntegration: true, 
      contextIsolation: false, 
      enableRemoteModule:true // 子进程使用父进程模块
    },
  });
  //   在当前窗口中补全界面操作
  mainWin.loadFile("index.html");
  // 监听页面加载完成后，在去显示，避免出现白屏情况
  mainWin.on("ready-to-show", () => {
    mainWin.show();
  });
  mainWin.on("close", () => {
    // 当前窗口关闭了
  });
});
app.on("window-all-closed", () => {
  console.log("所有窗口都关闭了");
  app.quit();
});

2.打开新窗口

1.下载依赖 npm install --save @electron/remote
2.在main.js中引入
require('@electron/remote/main').initialize() require("@electron/remote/main").enable(mainWin.webContents)

const { app, BrowserWindow } = require("electron");
// 当app启动之后执行窗口的操作
app.whenReady().then(() => {
  // 打开一个新窗口
  const mainWin = new BrowserWindow({  });
  require('@electron/remote/main').initialize()
  require("@electron/remote/main").enable(mainWin.webContents)
  //   在当前窗口中补全界面操作
  mainWin.loadFile("index.html");

3.在新页面去使用remote

const remote = require("@electron/remote")
window.addEventListener("DOMContentLoaded", () => {
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    const list = new remote.BrowserWindow({
      width: 300,
      height: 200,
    });
    list.loadFile("list");
  });
});