文章/答案/技术大牛

发布

社区首页 >问答首页 >电子产品主页

问电子产品主页
EN

Stack Overflow用户

提问于 2022-06-15 14:59:06

回答 1查看 61关注 0票数 0

我正在制作一个电子餐厅POS应用程序。

我正在尝试一个PinPad(密码)作为应用程序的第一页。一旦用户登录，就可以接收客户订单。

如何将PinPad定义为主页？以及如何为用户创建用于查看主页面以接受客户订单的路径？

我有我的PinPad源代码，这是我的文件夹结构

electron

reactjs

回答 1

Stack Overflow用户

发布于 2022-06-16 09:17:06

要使窗口的实例更改为不同的源，只需再次调用电子的win.loadFile(filePath[，options])方法即可。

当然，只有在您验证了提交正确的引脚之后，才会这样做。

我在下面创建了一个快速示例，注意兴趣线在main.js文件的末尾。

main.js (主进程)

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require('path');

// Prevent garbage collection
let window;

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('pin-pad.html')
        .then(() => { window.show(); });

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

// ---

electronIpcMain.on('pin', (event, pin) => {
    // Simple check of pin validity
    if (pin === '1234') {
        window.loadFile('sales.html'); // <-- Use this HTML file now...
    }
})

preload.js (主进程)

const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

contextBridge.exposeInMainWorld(
    'electronAPI', {
        sendPin: (pin) => {
            ipcRenderer.send('pin', pin)
        }
    });

pin-pad.html (渲染过程)

情不自禁地让它变得漂亮

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test - Pin Pad</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>

        <style>
            #display {
                margin-bottom: 2em;
                padding: 0.25em;
                width: 9em;
                font-size: 1.25em;
                text-align: center;
            }

            #pin-pad {
                display: grid;
                grid-template-rows: 4em 4em 4em 4em;
                grid-template-columns: 4em 4em 4em;
                grid-gap: 3px;
                user-select: none;
            }

            #pin-pad div {
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #999;
                font-size: 1.25em;
            }

            #pin-pad div:hover {
                background-color: #ccc;
            }
        </style>
    </head>

    <body>
        <input type="text" id="display" disabled>

        <div id="pin-pad">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>Enter</div>
            <div>0</div>
            <div>Clear</div>
        </div>
    </body>

    <script>
        let display = document.getElementById('display');
        let validKeys = ['1','2','3','4','5','6','7','8','9','0','Enter','Clear'];
        let pin = '';

        document.getElementById('pin-pad').addEventListener('click', (event) => {
            if (! validKeys.includes(event.target.innerText)) { return; }

            if (event.target.innerText === 'Enter') {
                window.electronAPI.sendPin(pin);
                return;
            }

            if (event.target.innerText === 'Clear') {
                pin = display.value = '';
                return;
            }

            pin = pin + event.target.innerText;
            display.value = '*'.repeat(pin.length);
        })
    </script>
</html>

sales.html (渲染过程)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test - Sales</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    </head>
    <body>
        <h1>Sales</h1>
    </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72633644

复制

相似问题

问电子产品主页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问电子产品主页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问电子产品主页
EN