Using electron to write Windows desktop application

background

Recently, the company is engaged in a Thai express cabinet project, which requires the use of Windows desktop applications. I heard that javascript can write desktop applications, so I stepped into the writing path of electron, wrote this article, and recorded the crawled holes.

1. Install Electron

npm install -g electron

2. Install electron Forge

npm install -g electron-forge

3. New project

electron-forge init project

4. Go to the project folder and execute the following command to start the app

npm start

5. The static file is src folder, and the entry file is index.js

The following code is used in my project, and there are notes in the article

import { app, BrowserWindow, Menu, globalShortcut, autoUpdater, dialog, contentTracing } from 'electron'
// Process create / remove shortcuts on Windows during install / uninstall
if (require('electron-squirrel-startup')) {
  app.quit();
}
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
// Define run events
function go () {
  // Cancel top menu bar
  Menu.setApplicationMenu(null)
  // create a window
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 1024,
    frame: false
  })
  // App opens full screen
  mainWindow.setFullScreen(true)
  // Exit cancel full screen
  globalShortcut.register('ESC', () => {
    mainWindow.setFullScreen(false)
  })

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // Open the DevTools
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}
// Scheduled query update function (3am)
function interval () {
  let t = new Date()
  let time
  if (t.getHours() > 3) {
    time = (27 - t.getHours())*60*60000 - t.getMinutes()*60000 - t.getSeconds()*1000
  } else {
    time = (3 - t.getHours())*60*60000 - t.getMinutes()*60000 - t.getSeconds()*1000
  }
  setTimeout(() => {
    setInterval(() => {
      autoUpdater.checkForUpdates()
    }, 60000*60*24)
  }, time)
}
// Create window function
const createWindow = () => {
  if (process.argv[1] == '--squirrel-firstrun') {
    go()
    return
  }
  // Set automatic update access address
  autoUpdater.setFeedURL('https://www.thaibox.ltd/download/')
  // Auto update events
  autoUpdater.on('update-downloaded', function() {
    // Download complete, update front display
    autoUpdater.quitAndInstall()
  })
  // Countdown to 3 a.m. to check for updates
  interval()
  try {
    autoUpdater.checkForUpdates()
  } catch (ex) {
    go()
    return
  }
  // GO event can't be omitted here
  go()
}
// Application initialization event
app.on('ready', createWindow);

// App exit event
app.on('window-all-closed', () => {
  // On OS X 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 activation event
app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  console.log('activate')
  if (mainWindow === null) {
    createWindow();
  }
});

6. Package and execute npm run make

"make": "electron-forge make --platform=win32 --arch=ia32"
  • –platform=win32 –arch=ia32
  • Package the software of 32-bit system. The default is 64 bit "electronic forge make"

Tags: Windows npm Javascript OS X

Posted on Tue, 31 Mar 2020 19:43:28 -0400 by rwachowiak