Electron基础总结

1. 写hello world
    1) git clone https://github.com/electron/electron-quick-start
    2) cnpm install
    3) npm start

    注意：在生成好的main.js中添加
            webPreferences: {
                preload: path.join(__dirname, 'preload.js'),
                nodeIntegration: true // 非常重要，为require和process引入解决问题
            }

2. Electron分为渲染进程和主进程
    渲染进程：用户所看到的web界面就是由渲染进程描绘出来的，包括html\css\js
    主进程：Electron运行package.json的main脚本进程被称为主进程

    渲染进程调试：View -> Toggle Developer Tools
    主进程调试：
        一、浏览器调试
            1)修改package.json   "scripts": {
                                    "start": "electron --inspect=5858 ."
                                }
            2)浏览器中输入 chrome://inspect
            3)点击Configure  输入localhost:端口号 Done

        二、vscode调试
            1)点击debug
            2)在launch.json中输入
                {
                    "version": "0.2.0",
                    "configurations": [
                    {
                        "name": "Debug Main Process",
                        "type": "node",
                        "request": "launch",
                        "cwd": "${workspaceRoot}",
                        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
                        "windows": {
                        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
                        },
                        "args" : ["."]
                    }
                    ]
                }

3.app常用事件
    1)ready：当Electron完成初始化被触发
    2)window-all-closed：所有窗口被关闭
    3)before-quit：在应用程序开始关闭窗口之前触发
    4)will-quit：当所有窗口都已关闭并且应用程序将退出时发生
    5)quit：在应用程序退出时发生

4.webContents常用事件
    did-finish-load：导航完成时触发
    dom-ready：一个框架中的文本加载完成后触发该事件

5.webview标签
    设置：
        webPreferences: {
            webviewTag: true
        },
    标签：
        <webview src="https://www.baidu.com" id="webview"></webview>
    事件：
        webview.addEventListener('did-start-loading', loadstart)
        webview.addEventListener('did-stop-loading', loadstop)

6.子窗口向父窗口传递信息
    1)父窗口接受信息 
        const openNewWindow = document.getElementById('openNewWindow');
        openNewWindow.onclick = ()=>{
            window.open('popPage.html','popup');
        }

        window.addEventListener('message',(msg)=>{
            console.log(msg);
        })

    2)子窗口发送信息
        let btn = document.getElementById('sendInfo');

        btn.οnclick=()=>{
            window.opener.postMessage('来自子窗口的问候...')
        }

7.主进程与渲染进程的通信
    渲染进程： 
        const { ipcRenderer } = require('electron');
        function sendMessage(){
            ipcRenderer.send('send-message-to-main','这是来自渲染进程的问候');
        }

        ipcRenderer.on('send-message-to-render',(event,args)=>{
            console.log('渲染进程接受到的信息：',event,args);
        })

    主进程：
        const {ipcMain} = require('electron')
        ipcMain.on('send-message-to-main',(event,args)=>{
        console.log('主进程接受的数据是：',event,args);

        event.reply('send-message-to-render','这是来自于主进程的问候');
        })

    问：主进程主动向渲染进程通信：
            setTimeout(()=>{
                mainWindow.webContents.send('send-message-to-render','我是主进程');
            },3000)

8.菜单
    const { remote } = require('electron');
    const { Menu, MenuItem } = remote;
    function openMenu(){
        const template = [
            { label: '项目1' },
            { label: '点击测试', click:()=>{
                console.log('点击事件ok.')
            } },
            { role: "undo" },
            { role: "redo" },
            { label: '旅游', type: 'checkbox', checked: true },
            { label: '吃', type: 'checkbox', checked: false },
            new MenuItem({label: '这是MenuItem生成的菜单.'}),
            {
                label: '爱好',
                submenu: [
                    {label: '吃饭'},
                    {label: '喝酒'},
                    {label: '旅游'},
                ]
            }
        ]
        const menu = Menu.buildFromTemplate(template);
        // 整个的Tab的Menu也会改变
        // Menu.setApplicationMenu(menu);
        menu.popup();
    }