当前位置：网站首页>Modules that can be used by both the electron main process and the rendering process

Modules that can be used by both the electron main process and the rendering process

2022-07-06 22:56:00 【Follow the road to the end】

shell modular

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <h2>shell  And  iframe</h2>
  <a id="openUrl" href="https://kaiwu.lagou.com/"> open URL</a>
  <br><br>
  <button id="openFolder"> Open Directory </button>
  <script src="index.js"></script>
</body>

</html>

index.js

const { shell } = require('electron')
const path = require('path')

window.addEventListener('DOMContentLoaded', () => {
  const oBtn1 = document.getElementById('openUrl')
  const oBtn2 = document.getElementById('openFolder')

  oBtn1.addEventListener('click', (e) => {
    e.preventDefault()
    const urlPath = oBtn1.getAttribute('href')
    shell.openExternal(urlPath) //  Open the link using the default browser 
  })

  oBtn2.addEventListener('click', () => {
    shell.showItemInFolder(path.resolve(__filename))
  })
})

iframe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    iframe {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: fixed;
    }
  </style>
</head>

<body>
  <h2>shell  And  iframe</h2>
  <iframe src="https://kaiwu.lagou.com/" frameborder="0" id="webview"></iframe>
  <script src="index.js"></script>
</body>
</html>

Customize menu usage shell

main.js

const { app, BrowserWindow, Menu, shell } = require('electron')

console.log(process.platform)

//  Define global variables to store in the main window  id
let mainWinId = null

//  create a window 
function createWindow () {
  console.log('ready')
  //  Create the main process 
  const mainWin = new BrowserWindow({
    title: ' Custom menu ',
    show: false, // true： Display Form ,false:  Don't show forms 
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true, //  Allow browser environments to use Node API
      enableRemoteModule: true, //  Allow pages to use  remote
    }
  })

  let tmp = [
    {
      label: ' menu ',
      submenu: [
        {
          label: ' About ',
          click() {
            shell.openExternal('https://kaiwu.lagou.com/')
          }
        },
        {
          label: ' open ',
          click() {
            BrowserWindow.getFocusedWindow().webContents.send('openUrl')
          }
        },
      ]
    }
  ]

  let menu = Menu.buildFromTemplate(tmp)
  Menu.setApplicationMenu(menu)

  //  Load the specified interface in the current window and let it display the specific content 
  mainWin.loadFile('index.html')
  
  mainWinId = mainWin.id

  mainWin.on('ready-to-show', () => {
    mainWin.show() //  After the form is fully loaded , Display Form , Avoid white pages 
  })

  mainWin.on('close', () => {
    console.log('close')
    //mainWin = null
  })
}

//  When  app  After starting , Perform window creation and other operations 
app.on('ready', createWindow)

app.on('window-all-closed', () => {
  console.log('window-all-closed')
  app.quit()
})

Notice of news

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <h2> be based on  H5  Implement message notification </h2>
  <button id="btn"> Trigger message </button>
  <script src="index.js"></script>
</body>
</html>

index.js

window.addEventListener('DOMContentLoaded', () => {
  const oBtn = document.getElementById('btn')

  oBtn.addEventListener('click', () => {
    const option = {
      title: ' Notification message 123',
      body: ' The message content abc',
      icon: './msg.png',
    }

    const myNotification = new window.Notification(option.title ,option)

    myNotification.onclick = function() {
      console.log(' Click on the message page card ')
    }
  })
})

Shortcut key registration

main.js

const { app, BrowserWindow, globalShortcut } = require('electron')

console.log(process.platform)

//  Define global variables to store in the main window  id
let mainWinId = null

//  create a window 
function createWindow () {
  console.log('ready')
  //  Create the main process 
  const mainWin = new BrowserWindow({
    title: ' Custom menu ',
    show: false, // true： Display Form ,false:  Don't show forms 
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true, //  Allow browser environments to use Node API
      enableRemoteModule: true, //  Allow pages to use  remote
    }
  })

  //  Load the specified interface in the current window and let it display the specific content 
  mainWin.loadFile('index.html')
  
  mainWinId = mainWin.id

  mainWin.on('ready-to-show', () => {
    mainWin.show() //  After the form is fully loaded , Display Form , Avoid white pages 
  })

  mainWin.on('close', () => {
    console.log('close')
    //mainWin = null
  })
}

//  When  app  After starting , Perform window creation and other operations 
app.on('ready', createWindow)

//  Register shortcuts 
app.on('ready', () => {
  const ret = globalShortcut.register('ctrl + q', () => {
    console.log(' Shortcut key registration ')
  })

  if (!ret) {
    console.log(' Registration failed ')
  }

  console.log(globalShortcut.isRegistered('ctrl + q'))
  console.log(ret)
})

app.on('will-quit', () => {
  //  Shortcut key to cancel registration 
  globalShortcut.unregister('ctrl + q')

  //  Cancel all registered shortcuts 
  globalShortcut.registerAll()
})

app.on('window-all-closed', () => {
  console.log('window-all-closed')
  app.quit()
})

Shear board module

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <h2> Clippings </h2>
  <input type="text" placeholder=" Enter the content to be copied "> <button> Copy </button>
  <br><br>
  <input type="text" placeholder=" Paste the content here "> <button> Paste </button>
  <br><br>
  <button id='clipImg'> Copy the picture to the cutout and paste it into the interface </button>
  <br><br>
  <script src="index.js"></script>
</body>
</html>

index.js

const { clipboard, nativeImage } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const aBtn = document.getElementsByTagName('button')
  const aInput = document.getElementsByTagName('input')
  const oBtn = document.getElementById('clipImg')
  let ret = null

  aBtn[0].addEventListener('click', () => {
    //  Copy content to clipboard 
    ret = clipboard.writeText(aInput[0].value)
  })

  aBtn[1].addEventListener('click', () => {
    //  Paste the contents of the clipboard 
    aInput[1].value = clipboard.readText(ret)
  })

  oBtn.addEventListener('click', () => {
    //  When placing the picture in the clipboard, it is required that the picture type belongs to  nativeImage  example 
    const oImage = nativeImage.createFromPath('./msg.png')
    clipboard.writeImage(oImage)

    //  Make the picture in the clipboard as  DOM  Elements are displayed on the interface 
    const oImg = clipboard.readImage()
    const oImgDom = new Image()
    oImgDom.src = oImg.toDataURL()
    document.body.append(oImgDom)
  })
})

原网站

版权声明
本文为[Follow the road to the end]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202131041194959.html