Build cross platform APP with Electron

About electron

Electron is an open source library developed by Github to build cross platform desktop applications using HTML, CSS and JavaScript. Electron achieves this goal by merging Chromium and Node.js into the same runtime environment, and packaging them as applications under Mac, Windows and Linux systems. The following code goes directly.

Base code

Infrastructure directory structure

electron-demo/
├── app
├─── index.html
├─── icon.icns
├── package.json
├── main.js

package.json, like the normal Node program, takes main.js as the starting entry file of the program

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "test electron Packing and following html5 Signal communication",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "packager:os": "electron-packager ./ XXX Teacher side-Unofficial --platform=darwin --out ./outApp --overwrite --icon=./app/icon.icns",
    "packager:win64": "electron-packager ./ XXX Teacher side-Unofficial --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./app/icon.icns"
  },
  "author": "lfourg",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^8.1.1",
    "electron-packager": "^14.2.1"
  }
}

main.js is as follows

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

function createWindow () {
  // create a window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // Load Hmtl5 page
  mainWindow.loadFile('app/index.html')

  // Open DevTools
  mainWindow.webContents.openDevTools()

  //add menu
  const dockMenu = Menu.buildFromTemplate([
    {label: 'New window',
      click () {
        console.log('New window')
      }
    }, {
      label: 'Set up',
      submenu: [ { label: 'Mute' },{ label: 'Close' }]
    }
  ])
  app.dock.setMenu(dockMenu)

  //Register render thread screen maximization events
  ipcMain.on('windowFullScreen', e =>
    mainWindow.setFullScreen(true)
  )

  //Register render thread screen restore events
  ipcMain.on('windowNormal', e =>
    mainWindow.setFullScreen(false)
  )

  //Register render thread application exit event
  ipcMain.on('quitWindow', e =>
    app.quit()
  )
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

HTML page

<script>
  //It is mainly convenient to access the electron object in the HTML 5 page
  window.electron = require('electron')
</script>     
<div id=app></div>

Communication between rendering process and main process, some code snippets in html5

window.electron.ipcRenderer.send('windowFullScreen')   //window maximizing
window.electron.ipcRenderer.send('quitWindow')   //Exit application

Online and offline detection in html5

const alertOnlineStatus = () => {
  window.alert(navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)

Pack

In the example, the Electron packer is used to package the Electron application and generate the final runnable files of each platform
Use command

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...] //Parameter description

  • < sourcedir >: location of project
  • < appName >: application name
  • Platform = < platform >: packaged system (darwin, win32, linux)
  • Arch = < arch >: system bits (ia32, x64)
  • Icon = < icon >: Specifies the icon of the application (Mac is. icns file, Windows is. ico or. png)
  • Out < out >: Specifies the output directory
  • Version = < version >: Specifies the compiled electronic prebuild version

We can add scripts directly in the script field of package.json

"scripts": {
    "start": "electron .",
    "packager:os": "electron-packager ./ XXX Teacher side-Unofficial --platform=darwin --out ./outApp --overwrite --icon=./app/icon.icns",
    "packager:win64": "electron-packager ./ XXX Teacher side-Unofficial --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./app/icon.icns"
  }

Then perform the packaging with the following command

npm run-script packager:os

Be careful

  1. Don't think that a system can pack all the versions of the system. The packaging of darwin platform for MacBook is very smooth. Various errors are reported in the packaging of win version. Installing wine according to the prompts is still under study
  2. It is convenient for the rendering thread to communicate with the main thread. Add window.electron = require('electron ') on the homepage of Html5 to access the electron. I think it is the most convenient way for beginners to use it

Tags: Mobile html5 Windows JSON Mac

Posted on Wed, 11 Mar 2020 03:11:57 -0700 by jpowermacg4