网站的投票系统怎么做,水果网站怎么做,重庆网站建设重庆网站制作,如何注册一个设计网站在 Electron 中#xff0c;主要控制两类进程#xff1a; 主进程 、 渲染进程 。
Electron 应⽤的结构如下图#xff1a; 如果需要更深入的了解electron进程#xff0c;可以访问官网 流程模型 文档。
主进程
每个 Electron 应用都有一个单一的主进程#xff0c;作为应用…在 Electron 中主要控制两类进程 主进程 、 渲染进程 。
Electron 应⽤的结构如下图 如果需要更深入的了解electron进程可以访问官网 流程模型 文档。
主进程
每个 Electron 应用都有一个单一的主进程作为应用程序的入口点主进程具有唯一性。任何 Electron 应用程序的入口都是 main 文件负责控制应用的生命周期、创建和管理窗口、与操作系统进行交互等。主进程在 Node.js 环境中运行它具有 require 模块和使⽤所有 Node.js API 的能力。主进程的核心使用 BrowserWindow 来创建和管理应用程序窗口。
在 main.js 中打印:
console.log(__dirname)
console.log(node版本, process.versions.node)
console.log(chrome版本, process.versions.chrome)
console.log(electron版本, process.versions.electron)在终端中输入结果如下
注意在主进程中执行的console.log()语句都在vs code 的终端中输出不会在electron 应用中打印。
在 main.js 中打印 window
console.log(window)报错window is not defined…
渲染进程
每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。 洽如其名渲染器负责 渲染 网页内容。
每个 BrowserWindow 实例都对应⼀个单独的渲染进程。一个 Electron 窗口可以包含一个或多个渲染进程每个渲染进程负责渲染网页内容并执行网页中的 JavaScript 代码。关系类似于 浏览器、浏览器中的标签页运行在渲染器进程中的代码必须遵守网页标准。这意味着 渲染进程无权直接访问 require 或 使用 任何 Node.js API。渲染进程主要负责呈现用户界面、响应用户交互、执行网页中的业务逻辑等。
在 pages/index.html 中
!DOCTYPE html
html langenheadmeta charsetUTF-8 /metahttp-equivContent-Security-Policycontentdefault-src self; style-src self unsafe-inline; img-src self data:;/titleHello Electron!/title/headbodyh1Hello Electron!/h1We are using Node.js span idnode-version/span, Chromiumspan idchrome-version/span, and Electronspan idelectron-version/span./bodyscript src./render.js/script
/html
在 pages/render.js 中
console.log(window)
console.log(process)在应用窗口中查看打印结果
window能成功打印console.log(process)报错process is not defined…
在 pages/render.js 中不能访问 Node.js API。那么该如何实现在index.html中展示chrome、node、electron的版本呢
处于渲染器进程的用户界面该怎样才与 Node.js 和 Electron 的原生桌面功能进行交互 通过预加载脚本从渲染器访问Node.js 预加载preload脚本在 Electron 应用中起着重要的桥梁作用它允许渲染进程安全地与主进程进行交互同时增强了应用的安全性和性能。
预加载preload脚本在渲染器进程加载之前加载并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。
预加载preload脚本是运行在渲染器进程中的但它是在网页内容加载之前执行的。 这意味着它具有比普通渲染器更高的权限可以访问 Node.js API 同时也可以与网页内容进行更安全的交互。
创建一个名为 preload.js 的新脚本如下
// contextBridge在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
const {contextBridge} require(electron)// 暴露数据给渲染进程
contextBridge.exposeInMainWorld(aaaAPI, {version: process.version,versions: process.versions,num: 666
})在主线程中引⼊ preload.js
const { app, BrowserWindow } require(electron)
// 导入 Node.js 的 path 模块
const path require(node:path)// 修改已有的 createWindow() 方法
function createWindow() {const win new BrowserWindow({width: 500, // 窗口宽度height: 300, // 窗口高度autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {// 此处只能使用绝对路径preload: path.join(__dirname, preload.js)}});// 在窗口中加载一个远程页面win.loadFile(./pages/index.html);
}执行npm start启动应用打开应用的控制台。 可以看到pages/render.js打印的window
完善pages/render.js在渲染进程中使用versions实现在 pages/index.html 页面展示版本信息
let nodeDom document.getElementById(node-version)
let chromeDom document.getElementById(chrome-version)
let electronDom document.getElementById(electron-version)const { node, chrome, electron } aaaAPI.versionsnodeDom.innerHTML node
chromeDom.innerHTML chrome
electronDom.innerHTML electron查看应用窗口渲染结果 现在项目的目录结构如下图所示 注意 预加载preload脚本只能访问部分 Node.js API但是主进程可以访问全部API。此时需要使用进程通信。
