Electron 基础API

Posted 2022-02-13 沿着路走到底

快捷键

ctrl + r  刷新界面
ctrl + shift + i  打开调试

安装 nodemon 监听代码修改，重新打包

package.json

  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "start": "nodemon --watch main.js --exec npm run build",
    "build": "electron ."
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "electron": "^16.0.8",
    "nodemon": "^2.0.15"
  

窗口尺寸设置

// 创建主进程
  const mainWin = new BrowserWindow(
    x: 100, // 窗口 x轴坐标
    y: 100, // 窗口 y轴坐标
    show: false, // true：显示窗体，false: 不显示窗体
    width: 600,
    height: 400,
    maxWidth: 800, // 设置最大宽度
    maxHeight: 600, // 设置最大高度
    minWidth: 400, // 设置最小宽度
    minHeight: 200, // 设置最小高度
    resizable: false, // 设置窗体是否允许缩放
  )

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')

窗体设置

// 创建主进程
  const mainWin = new BrowserWindow(
    x: 100, // 窗口 x轴坐标
    y: 100, // 窗口 y轴坐标
    show: false, // true：显示窗体，false: 不显示窗体
    //transparent: true, // 设置窗体透明
    title: '自定义标题', // 设置标题
    icon: 'lg.ico', // 设置应用图标
    frame: true, // 设置false, 只显示窗体内容，不展示默认的标题栏和菜单栏
    autoHideMenuBar: true, // 设置是否隐藏默认菜单栏
  )

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')

  mainWin.on('ready-to-show', () => 
    mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
  )

1