- 主進程和渲染進程的區別
![]()
- 主窗體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(); }主進程以及渲染進程可用模塊
![]()
