Electron學習（三）之簡單互動操作

久曲健發表於2022-07-01

寫在前面

最近一直在做批量測試工具的開發，打包的exe，執行也是一個黑乎乎的dos視窗，真的醜死了，總感覺沒個介面，體驗不好，所以就想嘗試寫桌面應用程式。

在技術選型時，Java窗體實現使用JavaFx、Swing，感覺都不太理想，為什麼呢？

寫好後，都是通過 Application.launch 啟動，僅能執行一次，不能多次呼叫（硬傷呀！）。

作為一個測試仔，沒辦法只好找開發了。

於是，我又去找強哥（之前北京同事），強哥給我推薦了electron，我一查，才發現真的太秀了，太好看了吧，結果我就被種草了，真的是太想學了......

需求

故事講完了，開始幹活了，具體需求如下：

  • 點選按鈕可以開啟另一個介面
  • 按鈕及介面都需要樣式

1、引入樣式

安裝bootstrap命令如下：

npm install bootstrap --save

2、點選按鈕可以開啟另一個介面

在根目錄下建立一個名為renderer的資料夾，並建立index.js,其作用就是向主程式發出通訊，具體程式碼如下：

const { ipcRenderer } = require('electron')
document.getElementById('add-music').addEventListener("click",()=>{
    ipcRenderer.send("add-music-window")
})

再建立一個名為index.html,示例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <title>本地音樂播放器</title>
</head>
<body>
<div class="container m-4">
    <h1>我的播放器</h1>
    <button type="button" id="add-music" class="btn btn-primary btn-lg btn-block m-4">新增歌曲到曲庫</button>
    <!-- Content here -->
</div>
<script src="./index.js"></script>
</body>
</html>

再建立一個名為add.js,示例程式碼如下：

const { ipcRenderer } = require('electron')
document.getElementById('add-music').addEventListener("click",()=>{
    ipcRenderer.send("add-music-window")
})

再建立一個名為add.html,示例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增音樂</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <h1>新增音樂到曲庫</h1>
    <div id="musicList" class="mb-2">您還未選擇任何音樂檔案</div>
    <button type="button" id="select-music" class="btn btn-outline-primary btn-lg btn-block mt-4">
        選擇音樂
    </button>
    <button type="button" id="add-music" class="btn btn-primary btn-lg btn-block mt-4">
        匯入音樂
    </button>
</div>
<script>
    require('./add.js')
</script>
</body>
</html>

接著再來修改main.js程式碼，使用ipcMain來接收渲染程式發起的點選事件，示例程式碼如下：

const { app, BrowserWindow,ipcMain } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    win.loadFile('./renderer/index.html')
    ipcMain.on("add-music-window",()=>{
        const childWin = new BrowserWindow({
            width: 500,
            height: 300,
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
            },
            parent:win
        })
        childWin.loadFile('./renderer/add.html')
    })
}


app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

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

效果

npm start 執行檢視結果如下：

到此一個簡單點選互動完成，感興趣的同學可以自己動手去嘗試。

相關文章