作為測(cè)試仔，為了顏值，也開(kāi)始去寫(xiě)門(mén)面程序了！

寫(xiě)在前面
最近一直在做批量測(cè)試工具的開(kāi)發(fā)，打包的exe，程序運(yùn)行也是一個(gè)黑乎乎的dos窗口。

個(gè)人感覺(jué)真的丑死了，總感覺(jué)沒(méi)個(gè)界面，體驗(yàn)不好，所以就想嘗試寫(xiě)桌面應(yīng)用程序。

在技術(shù)調(diào)研選型時(shí)，本身后端邏輯就是用的Java，所以自然也想用Java的窗體程序?qū)崿F(xiàn)。

經(jīng)調(diào)研發(fā)現(xiàn)使用JavaFx、Swing可以實(shí)現(xiàn)桌面應(yīng)用程序開(kāi)發(fā)，感覺(jué)都不太理想，為什么呢？

寫(xiě)好后，都是通過(guò) Application.launch 啟動(dòng)，僅能運(yùn)行一次，不能多次調(diào)用（真的是硬傷呀?。?br>
作為一個(gè)測(cè)試仔，沒(méi)辦法只好找開(kāi)發(fā)了。

于是，我又去找強(qiáng)哥（之前北京同事），強(qiáng)哥給我推薦了electron，我一查，才發(fā)現(xiàn)真的太秀了，太好看了吧，結(jié)果我就被種草了，真的是太想學(xué)了......

需求
于是，開(kāi)啟了為期兩天的學(xué)習(xí)，每天一小時(shí)，真的感覺(jué)受益良多，真實(shí)感覺(jué)真的前端太難了（不善長(zhǎng)前端），但也是真的很有成就感。

故事講完了，開(kāi)始干活了，具體需求如下：

點(diǎn)擊按鈕可以打開(kāi)另一個(gè)界面
按鈕及界面都需要顏值
如何實(shí)現(xiàn)
1、引入樣式
安裝bootstrap命令如下：

npm install bootstrap --save
2、點(diǎn)擊按鈕可以打開(kāi)另一個(gè)界面
在根目錄下創(chuàng)建一個(gè)名為renderer的文件夾，并創(chuàng)建index.js,其作用就是向主進(jìn)程發(fā)出通信，具體代碼如下：

const { ipcRenderer } = require('electron')
document.getElementById('add-music').addEventListener("click",()=>{
    ipcRenderer.send("add-music-window")
})
再創(chuàng)建一個(gè)名為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>本地音樂(lè)播放器</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">添加歌曲到曲庫(kù)</button>
    <!-- Content here -->
</div>
<script src="./index.js"></script>
</body>
</html>
再創(chuàng)建一個(gè)名為add.js,示例代碼如下：

const { ipcRenderer } = require('electron')
document.getElementById('add-music').addEventListener("click",()=>{
    ipcRenderer.send("add-music-window")
})
再創(chuàng)建一個(gè)名為add.html,示例代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加音樂(lè)</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <h1>添加音樂(lè)到曲庫(kù)</h1>
    <div id="musicList" class="mb-2">您還未選擇任何音樂(lè)文件</div>
    <button type="button" id="select-music" class="btn btn-outline-primary btn-lg btn-block mt-4">
        選擇音樂(lè)
    </button>
    <button type="button" id="add-music" class="btn btn-primary btn-lg btn-block mt-4">
        導(dǎo)入音樂(lè)
    </button>
</div>
<script>
    require('./add.js')
</script>
</body>
</html>

接著再來(lái)修改main.js代碼，使用ipcMain來(lái)接收渲染進(jìn)程發(fā)起的點(diǎn)擊事件，示例代碼如下：

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 運(yùn)行查看結(jié)果如下：

到此一個(gè)簡(jiǎn)單點(diǎn)擊交互完成，感興趣的同學(xué)可以自己動(dòng)手去嘗試。






作者：糖小幽

歡迎關(guān)注微信公眾號(hào) ：軟件測(cè)試君