Electron-主进程Api - first

APP事件

主进程入口文件main.js里写

before-quit

• 在应用程序开始关闭窗口之前触发
• 用户关闭之前可做一些确认操作

app.on('before-quit',(e)=>{
  console.log('App is quiting')
  //e.preventDefault()
})

browser-window-blur

• 在browserWindow失去焦点时发出
• 监听用户是否，将应用放入后台

app.on('browser-window-blur', (e) => {
  console.log('App unfocused')
})

browser-window-focus

• 在browserWindow获得焦点时发出
• 监听用户是否，将应用放入后台

app.on('browser-window-focus', (e) => {
  console.log('App focused')
})

• 三个可以一起写

const path = require('path')
const { app, BrowserWindow, ipcMain } = require('electron')
// 主进程
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // dirname当前入口文件的绝对物理路径+相对路径
      preload: path.resolve(__dirname, './preload.js')
    }
  })
  win.loadFile('./index.html')
  // win.loadURL('./index.html')
  // 打开开发者工具
  win.webContents.openDevTools()
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow()
    }
  })
})
app.on('window-all-closed', () => {
  if (process.platform == 'darwin') {
    app.quit()
  }
})
// 窗口关闭之前的处理工作
app.on('before-quit', () => {
  console.log('app is quiting')
})

app.on('browser-window-blur', (e) => {
  console.log('App unfocused')
})

app.on('browser-window-focus', (e) => {
  console.log('App focused')
})
// 监听只有一次，不能每次窗口打开就再次监听吧
ipcMain.handle('send-event', (event, msg) => {
  return msg
})

---

APP方法

在以上任意事件里写方法

app.quit()

• 关闭窗口

app.on('browser-window-blur', (e) => {
  console.log('App unfocused')
  setTimeout(() => {
    app.quit()
    }, 3000)
})

app.getPath(name)

• 获取自己桌面，app应用的路径

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow()
    }
  })
  // 知道自己桌面，app应用的路径
  console.log(app.getPath('desktop'))
  console.log(app.getPath('music'))
  console.log(app.getPath('temp'))
  console.log(app.getPath('userData'))
})

BrowserWindow

electron.BrowserWindow：创建和控制浏览器窗口

实例方法： win.loadFile(‘url’)和win.loadURL(‘url’)

• 这俩互斥（不能一起写）

• 用法

win.loadURL('https://xxiaomin.github.io/')
win.loadFile('./index.html')
 win.loadURL('./index.html')

使用ready-to-show事件

• 优雅的显示窗口（解决白屏问题，等加载完成后，显示窗口）

• 看情况，有时用户会等好久，着急

  //关闭
  let win = new BrowserWindow({ show: false })
  //打开
  win.on('ready-to-show', () =. {
  win.show()
  })

• 具体位置

const path = require('path')
const { app, BrowserWindow, ipcMain } = require('electron')
// 主进程
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
      // dirname当前入口文件的绝对物理路径+相对路径
      preload: path.resolve(__dirname, './preload.js')
    }
  })
  // win.loadFile('./index.html')
  // win.loadURL('./index.html')
  win.loadURL('https://xxiaomin.github.io/')
  // 打开开发者工具
  win.webContents.openDevTools()

  win.on('ready-to-show', () => {
    win.show()
  })
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow()
    }
  })
})

设置backgroundColor

• 可以加个颜色，或者其他的，来等待窗口加载完成

let win = new BrowserWindow({ backgroundColor: '#2e2c29' })

• 具体位置

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    backgroundColor: '#6435c9',
    webPreferences: {
      // dirname当前入口文件的绝对物理路径+相对路径
      preload: path.resolve(__dirname, './preload.js')
    }
  })
  // win.loadFile('./index.html')
  // win.loadURL('./index.html')
  win.loadURL('https://xxiaomin.github.io/')
  // 打开开发者工具
  win.webContents.openDevTools()
}

父子窗口

• 在createWindow里new一个BrowserWindow，就多一个窗口
• parent是将该窗口相对于谁联系在一起，win2的可以到处走，win走win2一起走。
• modal是否让win2覆盖在win的范围里。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    backgroundColor: '#6435c9',
    webPreferences: {
      // dirname当前入口文件的绝对物理路径+相对路径
      preload: path.resolve(__dirname, './preload.js')
    }
  })

  // win.loadFile('./index.html')
  // win.loadURL('./index.html')
  win.loadURL('https://xxiaomin.github.io/')
  // 打开开发者工具
  win.webContents.openDevTools()
  const win2 = new BrowserWindow({
    width: 400,
    height: 300,
    //parent是将该窗口相对于谁联系在一起，win2的可以到处走，win走win2一起走。
    parent: win,
    //是否让win2覆盖在win的范围里。
    modal: true
  })
  win2.loadURL('https://www.baidu.com/')
}

非frame窗口（无边框窗口）

• 就是将头部的关闭等，去掉

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    //将头部的关闭等，去掉
    frame: false,
    backgroundColor: '#6435c9',
    webPreferences: {
      // dirname当前入口文件的绝对物理路径+相对路径
      preload: path.resolve(__dirname, './preload.js')
    }
  })
  win.loadFile('./index.html')
win.webContents.openDevTools()
}

• 会导致窗口固定在桌面动不了

用文件的css让他可以随意拖动

• 在html引入css，主进程渲染html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--配置CSP-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:;
script-src 'self'; style-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./app.css">
  <title>Document</title>
</head>
<body>
  hello,llll
  <button id="btn">点击</button>
  <script src="./render/app.js"></script>
</body>
</html>

• css与html同级创建即可

html{
  height: 100%;
}
body{
  height: 100%;
  user-select: none;
  -webkit-app-region:drag;
}

frame的input的bug

• 该标签的样式，拖拽要no-drag
• 不然跟着跑

<input  type="range" name="range" min="0" max="10">

• html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--配置CSP-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:;
script-src 'self'; style-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./app.css">
  <title>Document</title>
</head>
<body>
  <input  type="range" name="range" min="0" max="10">
  <button id="btn">点击</button>
  <script src="./render/app.js"></script>
</body>
</html>

• css 文件

html{
  height: 100%;
}
body{
  height: 100%;
  user-select: none;
  -webkit-app-region:drag;
}
input{
  -webkit-app-region:no-drag;
}

红绿灯

const win = new BrowserWindow({
titleBarStyle: 'hidden' /& or hiddenInset 距离红绿灯更近
})

保持窗口状态state

• 保持关闭前的窗口状态

• 安装

  npm install electron-win-state

• 在入口文件main.js里

• 引入

• 方式一：const WinState = require(‘electron-win-state’).default

• 如果出现以下错误，方式一少了default(以后看到引入问题就加个正如这个)

• 方式二：import WinState from ‘electron-win-state’
• 设定了默认宽高，就不要在new窗口里再写宽高，不会覆盖。
• 代码

  const WinState = require('electron-win-state').default
  const winState = new WinState({ 
  	defaultWidth: 800,
  	defaultHeight: 600,
  	// other winState options, see below
  })
  
  const browserWindow = new BrowserWindow({
  	...winState.winOptions,
  	// your normal BrowserWindow options...
  })
  
  // Attach the required event listeners
  winState.manage(this.browserWindow)

• 具体位置

  const path = require('path')
  const { app, BrowserWindow, ipcMain } = require('electron')
  const WinState = require('electron-win-state').default
  // 主进程
  const createWindow = () => {
    const winState = new WinState({
      defaultWidth: 800,
      defaultHeight: 600
      // other winState options, see below
    })
    const win = new BrowserWindow({
      ...winState.winOptions,
      backgroundColor: '#6435c9',
      webPreferences: {
        // dirname当前入口文件的绝对物理路径+相对路径
        preload: path.resolve(__dirname, './preload.js')
      }
    })
  
    win.loadFile('./index.html')
    winState.manage(win)
  }

webContent

• 测试准备
• 引入外部图片报错，

• 将csp配置的img-src修改如下（测试可以用，上线就不要）

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data:;
script-src 'self'; style-src 'self' 'unsafe-inline'">

• 具体位置

  //html文件
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--配置CSP-->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data:;
  script-src 'self'; style-src 'self' 'unsafe-inline'">
  <link rel="stylesheet" href="./app.css">
    <title>Document</title>
  </head>
  <body>
    <input  type="range" name="range" min="0" max="10">
    <button id="btn">点击</button>
    <div>
      <img src="https:/&placekitten.com/500/500" alt="">
      <div>
    <script src="./render/app.js"></script>
  </body>
  </html>

did-finish-load全部加载完毕

dom-readydom加载完毕

• 入口文件里

const wc = win.webContents
  //全部加载完毕
  wc.on('did-finish-load', () => {
    console.log('Conent fully loaded')
  })
  //dom加载完毕
  wc.on('dom-ready', () => {
    console.log('DOM Ready')
  })
  wc.openDevTools()

• 具体位置

const path = require('path')
const { app, BrowserWindow, ipcMain } = require('electron')
const WinState = require('electron-win-state').default
// 主进程
const createWindow = () => {
  const winState = new WinState({
    defaultWidth: 800,
    defaultHeight: 600
    // other winState options, see below
  })
  const win = new BrowserWindow({
    ...winState.winOptions,
    backgroundColor: '#6435c9',
    webPreferences: {
      // dirname当前入口文件的绝对物理路径+相对路径
      preload: path.resolve(__dirname, './preload.js')
    }
  })
  const wc = win.webContents
  //全部加载完毕
  wc.on('did-finish-load', () => {
    console.log('Conent fully loaded')
  })
  //dom加载完毕
  wc.on('dom-ready', () => {
    console.log('DOM Ready')
  })
  wc.openDevTools()
  win.loadFile('./index.html')
  winState.manage(win)
}

context-menu：鼠标右键上下文信息

• 鼠标右键，保存图片
• e是事件
• params是元素的内容

  wc.on('context-menu', (e, params) => {  console.log(params)
    })

context-menu中的executeJavaScript

• 往页面里注入JavaScript
• 选中文本，右键弹框,获取文本内容

wc.on('context-menu', (e, params) => {  wc.executeJavaScript(`alert('${params.selectionText}')`)
  })

• context-menu具体位置

const createWindow = () => {
  const winState = new WinState({
    defaultWidth: 800,
    defaultHeight: 600
    // other winState options, see below
  })

总结

app.on()的事件(监听应用是关闭、还是进入后台)与在事件里写方法

BrowserWindow窗口的创建，打开应用的方式，首屏白屏先等再开或者设背景色，无边框，保持窗口状态

webContent监听页面dom元素，内容获取