创建一个Electron简单应用

官方文档： https://www.electronjs.org/zh/docs/latest/

一、创建项目

1. 新建项目文件夹：electron-demo

2. npm init -y

3. npm install electron --save-dev

4. 项目根目录下新建文件 ==》  index.js 

5. 修改package.json中的scripts, 添加启动命令 "start": "electron ."
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."   // 新加的部分
 },

二、index.js 文件

// ****** index.js 文件内容 ******

// 引入electron
const electron = require('electron')
console.log(electron)

// 解构拿到electron 的 app,BrowserWindow,Menu,ipcMain
const { app, BrowserWindow, Menu, ipcMain  } = electron

let win = null;
// 运行一个主进程 ==》 初始化就会执行
app.on('ready',()=>{
    console.log( 'ready' )

    // =============== 窗口 ===============
    // 创建窗口
    win = new BrowserWindow({ 
        width: 800,
        height: 600,
        // 页面导入electron时，要加入这个
        webPreferences: {
            nodeIntegration: true,   // 渲染进程 是否集成 Nodejs
            contextIsolation: false
        }
    })
    // 通过node.js打开一个网页或html
    // win.loadURL('https://www.baidu.com/')   // 打开百度
    win.loadFile('index.html')                 // 打开index.html文件（自己随便在根目录下创建一个html文件就行）

    // =============== 菜单 ===============
    // 定义菜单
    const mainMenu = Menu.buildFromTemplate( menuTemplate )
    // 设置菜单，才能展示出来
    Menu.setApplicationMenu( mainMenu )
})

// 定义菜单 -- 数据
const menuTemplate = [
    {
        label:'文件',
        submenu:[
            { 
                label:'添加',
                click:()=>{
                    createAddWindow()
                }
            },
            { label:'编辑' },
            { label:'查看' },
        ]
    },
    {label:'文档'},
    {
        label:'退出',
        click: ()=>{
            app.quit();
        }
    },
    {
        label:'开发工具',
        submenu:[
            { 
                label:'打开/关闭',
                // 设定快捷键
                accelerator: 'F12', //'Ctrl + I',
                // 设定快捷键: 根据系统判断快捷键
                // accelerator: process.platform=='darwin'?'Command + I' : 'Ctrl + I',
                // 点击事件
                click: (item, focusedWindow) => {
                    // 打开控制台调试工具
                    focusedWindow.toggleDevTools();
                }
            },
        ]
    },
    {
        label:'刷新',
        accelerator: 'F5',
        role: 'reload', // 刷新
    },
]

let winItem = null;
// 创建一个子窗口
const createAddWindow = () =>{
    // 创建窗口
    winItem = new BrowserWindow({ 
        width: 600,
        height: 300,
        // 页面导入electron时，要加入这个
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    winItem.loadFile('add.html')
}

// 事件监听
const eventSub = () =>{
    // 主进程接收到这个自定义事件并且拿到传递过来的值（ add.html传来的值 ）
    ipcMain.on('sub:add', (e, val)=>{
        // 主进程，再把值传递给另外一个渲染进程 （index.html）
        win.webContents.send('sub:add', val);
        console.log(val)
        // 关闭子窗口
        winItem.close();
    })
}
eventSub();

三、index.html 和 add.html

	<!-- index.html -->

	<h1>这个一个简单的electron应用12222</h1>

    <script>
        const electron = require('electron')
        const { ipcRenderer } = electron

		// 从index.js中拿到add.html的值
        ipcRenderer.on('sub:add', (e, val) => {
            console.log('index.html', val)
        });
    </script>

	<!-- add.html -->

	<button onclick="add()"> 提交 </button>

    <script>
        const electron = require('electron')
        const { ipcRenderer } = electron

        add = () => {
            // 自定义事件，并且传递参数
            ipcRenderer.send('sub:add', 'add.html123');
        }
    </script>