Electron开发餐饮POS应用如何设置PinPad为首页并配置路由

配置PinPad为应用默认启动主页 #

直接修改主进程（通常是main.js/main.ts）中主窗口的加载路径即可，不需要额外插件：

• 找到createWindow函数中主窗口调用loadFile的位置
• 将原加载路径替换为你开发完成的PinPad页面对应的本地文件路径
• 针对POS商用场景，建议同步加上全屏、隐藏菜单栏的配置，避免无关操作干扰

核心代码示例：

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 1280,
    height: 800,
    fullscreen: true, // POS场景默认全屏
    autoHideMenuBar: true, // 隐藏默认菜单栏
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 必须开启，保障支付场景安全
      nodeIntegration: false // 必须关闭，避免渲染层直接调用系统能力
    }
  })

  // 替换为你的PinPad页面实际存放路径，作为启动默认加载页
  mainWindow.loadFile(path.join(__dirname, 'src/pages/pinpad/pinpad.html'))
}

app.whenReady().then(createWindow)

如果启动后出现白屏，优先检查文件路径是否和项目实际结构匹配。

实现登录成功后跳转点单主页面 #

根据你项目是否使用Vue/React等前端框架，选对应方案即可：

方案1：原生多页应用（无前端框架） #

通过Electron的IPC通信做页面跳转，密码校验逻辑放在主进程，避免前端被篡改绕过登录：

1. 先在preload.js中给渲染层暴露安全的调用方法，不要直接开放全量Node能力

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('posAPI', {
  verifyPin: (inputPwd) => ipcRenderer.invoke('auth:verify-pin', inputPwd),
  navigateTo: (pageKey) => ipcRenderer.invoke('navigate:page', pageKey)
})

2. 在主进程中添加IPC监听，做密码校验和页面跳转，提前维护页面路径映射表，禁止渲染层传任意路径跳转

const { ipcMain } = require('electron')
// 页面路径映射表，所有可跳转页面都在这里注册
const pageMap = {
  pinpad: path.join(__dirname, 'src/pages/pinpad/pinpad.html'),
  order: path.join(__dirname, 'src/pages/order/order.html') // 你的点单主页面路径
}

// 密码校验逻辑，实际项目可对接员工账号体系、后端校验接口
ipcMain.handle('auth:verify-pin', async (_, inputPwd) => {
  const correctPwd = '123456' // 替换为实际业务的校验规则
  return inputPwd === correctPwd ? { success: true } : { success: false, msg: '密码错误' }
})

// 页面跳转逻辑
ipcMain.handle('navigate:page', (event, pageKey) => {
  const targetPath = pageMap[pageKey]
  if (!targetPath) return { success: false }
  const currentWin = BrowserWindow.fromWebContents(event.sender)
  currentWin.loadFile(targetPath)
  return { success: true }
})

3. 在PinPad页面的登录按钮点击逻辑中，调用预加载暴露的方法完成校验和跳转

// PinPad页面渲染层JS
document.querySelector('#confirm-login').addEventListener('click', async () => {
  const inputPwd = document.querySelector('#pin-input').value.trim()
  const res = await window.posAPI.verifyPin(inputPwd)
  if (res.success) {
    await window.posAPI.navigateTo('order')
  } else {
    // 密码错误提示逻辑，比如震动、弹窗
    alert(res.msg)
  }
})

方案2：已集成Vue/React等前端框架 #

不需要通过Electron主进程做跳转，直接用框架自带路由即可：

• 在前端路由表中将PinPad页配置为根路径/的默认组件，点单主页面配置为/order路由
• 密码校验通过后，直接调用路由实例的push方法跳转：router.push('/order')
• 这种场景下Electron主进程只需要统一加载前端框架的入口index.html即可，所有页面切换由前端路由接管，开发效率更高。

安全提示：POS涉及密码输入、资金结算场景，严禁关闭contextIsolation、开启nodeIntegration，所有敏感逻辑（密码校验、支付调用）必须放在主进程或后端，避免前端代码被篡改造成安全问题。

内容的提问来源于stack exchange，提问作者erhan