Basis of preparation

Those of you who know about the electron framework know that electron is divided into two main processes, the main process and the render process. The main process uses NodeJs to implement the underlying calls, while the render process uses Chromium to implement the interface rendering. see

Function in this paper, the

When the function is implemented, there is more or less communication between the renderer and the main process or between interfaces. The next step is to achieve the simplest effect similar to the 360 floating ball. This function mainly involves interprocess communication and the electron menu function

rendering

Implementation approach

1. The display of the floating frame can be controlled by variables. Show ()/hide() of the floating frame can be controlled by the true/false of variables combined with IPC communication.

2. Right click on the hover box to open the menu via IPC communication

3. Since the page needs to communicate with the electorn. IpcRenderer () method, and the import of electron at the page layer requires remote/ipcRenderer and other built-in methods, the electron object can be introduced by import or require. But be sure to need to BrowserWindow. WebPreferences. NodeIntegration parameter is set to true, otherwise will quote: the require is not defined.

4. Write a basic suspense.vue page and obtain the corresponding page route pageUrl, through new browserWindow().loadURL (pageUrl) to render the page.

5. Floating mouse effect:

  • Create a sliding effect when clicking the left mouse button and moving the mouse
  • Create menu effect when right mouse click
  • Implementation idea: Set the listener on the element of Suspension, by monitoring the combination of mouse mousedown and Mousemove to achieve the left click on the Suspension box and drag events monitoring, and by monitoring the right click time to initiate IPC communication, through electron rendering menu bar

6. After receiving the event triggered by the right mouse button, the main process creates a menu.

The main code

import {BrowserWindow, ipcMain, screen, Menu, shell, app, webContents} from 'electron' const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:3000/main_window#/suspension` : `file://${__dirname}/index.html/main_window#/suspension`; var win = null; On (' suspensionWindow ', () => {if (win) {win.showinactive (); } else { createSuspensionWindow(); }}); Ipcmain. on('createSuspensionMenu', (e) => {const rightM = menu. buildFromTemplate([{label: 'function 1-1', enabled: False}, {label: 1-2 ' 'function, enabled: false}, {label:' function 1-3}, {type: 'the separator'}, {label: 'function 2-1}, {type: 'the separator'}, {label: 'features 3-1}, {label:' features 3-2}, {label: 'exit from the software, click: () = > {app. The quit ();}},]); rightM.popup({}); }); function createSuspensionWindow() { win = new BrowserWindow({ width: 60, height: 60, type: 'toolbar', // Create window type as toolbar window frame: false, // Create window resizable: false, // Disable window sizing webPreferences: {nodeIntegration: Transparent: true,}, transparent: true, // Set alwaysOnTop: true, // whether the window is always displayed before other Windows}); const size = screen.getPrimaryDisplay().workAreaSize; Const winSize = win.getsize (); Win.setposition (sie.width -winsize [0], 100); win.loadURL(winURL); win.once('ready-to-show', () => { win.show() }); win.on('close', () => { win = null; <div class="suspension_ball"> <div class="suspension_ball"> </div> </div> </div> </template> <script> import {remote, ipcRenderer} from 'electron' export default { name: "suspension", mounted() { let win = remote.getCurrentWindow(); let biasX = 0; let biasY = 0; let that = this; document.addEventListener('mousedown', function (e) { switch (e.button) { case 0: biasX = e.x; biasY = e.y; document.addEventListener('mousemove', moveEvent); break; case 2: ipcRenderer.send('createSuspensionMenu'); break; }}); document.addEventListener('mouseup', function () { biasX = 0; biasY = 0; document.removeEventListener('mousemove', moveEvent) }); function moveEvent(e) { win.setPosition(e.screenX - biasX, e.screenY - biasY) } } } </script>Copy the code

conclusion

  • IpcMain and ipcRenderer are instances of EventEmitter and are used similarly to emit-on communication.
  • In the process of rendering by introducing electron built-in methods, import should be web page window BrowserWindow. WebPreferences. NodeIntegration set to true