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"