electron + nodejs (渲染进程创建一个子窗口)

程序员文章站 2022-05-28 11:46:33

...

主进程和渲染进程的区别

主窗体html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
     
    <button id="btn">点我</button>
    <!-- 引入render.js 两种方式 -->
    <!-- 
        区别：
        require 引入的文件的最外层变量 不是全局变量
        src 引入的文件的最外层变量 是全局变量

        // 使用
        //1. onclick -> src:
        //2. require -> 给元素绑定一个ID，在render引入使用
     -->
     <!-- let num = 12; //最外层变量
     function add(){
         let num  = 13;
     } -->
    <!-- <script src="../render-process/render.js"></script> -->
    <!-- electron 基于 node 可以用require引入 -->
    <script>
        require('../render-process/render.js');
    </script>
</body>
</html>

创建渲染进程文件render.js

// 渲染进程
// 渲染进程不能直接应用BrowserWindow
// 借助 remote 模块，从 remote 中拿到主进程允许使用的进程
const { BrowserWindow } = require('electron').remote;

let btn_id =  document.querySelector('#btn')

btn_id.onclick = function() {
    let win = new BrowserWindow();
}

主进程以及渲染进程可用模块 electron + nodejs (渲染进程创建一个子窗口)

electron + nodejs (渲染进程创建一个子窗口)