使用 electron 编写 window 桌面应用

背景

最近公司在搞一个泰国快递柜项目，需要使用 window 桌面应用，听说 javascript 可以编写桌面应用，因此踏入了 electron 的编写道路，写下这篇文章，记录爬过的坑。

1. 安装Electron

npm install -g electron

2. 安装Electron-forge

npm install -g electron-forge

3. 新建项目 project

electron-forge init project

4. 进去 project 文件夹执行下面的命令来启动app

npm start

5. 存放静态文件为 src 文件夹，入口文件为 index.js

一下代码是我这个项目用到的，文中均有注释

import { app, BrowserWindow, Menu, globalShortcut, autoUpdater, dialog, contentTracing } from 'electron'
// 安装/卸载时处理创建/删除Windows上的快捷方式
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
// 定义运行事件
function go () {
  // 取消顶部菜单栏
  Menu.setApplicationMenu(null)
  // 创建窗口
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 1024,
    frame: false
  })
  // 应用打开全屏显示
  mainWindow.setFullScreen(true)
  // 退出取消全屏
  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;
  });
}
// 定时查询更新函数（凌晨3点）
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)
}
// 创建窗口函数
const createWindow = () => {
  if (process.argv[1] == '--squirrel-firstrun') {
    go()
    return
  }
  // 设置自动更新访问地址
  autoUpdater.setFeedURL('https://www.thaibox.ltd/download/')
  // 自动更新事件
  autoUpdater.on('update-downloaded', function() {
    // 下载完成，更新前端显示
    autoUpdater.quitAndInstall()
  })
  // 倒计时至凌晨3点检测更新
  interval()
  try {
    autoUpdater.checkForUpdates()
  } catch (ex) {
    go()
    return
  }
  // go 事件这里不能省去GO事件
  go()
}
// 应用初始化事件
app.on('ready', createWindow);

// 应用退出事件
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.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. 打包，执行 npm run make

"make": "electron-forge make --platform=win32 --arch=ia32"

• –platform=win32 –arch=ia32
• 打包 32 位系统的软件，默认是 64 位 “electron-forge make”