渲染进程也无法直接操作弹窗（Dialog）、系统通知（Notification）等，这些功能都需要通过 Electron 提供的 IPC/remote 机制在主进程中调用。...Electron 的 BrowserWindow 类负责创建和控制浏览器窗口，app 对象则可以控制应用程序的各个事件与生命周期。...一是通过 webpack 处理，我们可以减少运行时的 require 调用，对 Electron 应用加载性能有一定帮助；二是借助 webpack 的 tree shaking 能力，未使用的代码也会被轻松移除...在开发者工具中加入 Devtron 后，项目中的 IPC 通信、查看项目依赖、事件等信息，都可以在开发者工具中直接查看。...除了窗口加载，在 Electron 中，require Node 模块也是相当昂贵的操作。
当你读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。 [image.png] 导致这个错误发生的原因有很多，常见的一种情况是在渲染 UI 组件时，不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误，这与 Chrome 的上述错误基本相同，只是 Safari 使用不同的错误消息。...[image.png] TypeError: Null Is Not an Object (evaluating...) 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误，因为读取了未定义长度属性的变量。...我们也无法获取或设置 undefined 的任何属性。在这种情况下，应用程序将抛出“Uncaught TypeError cannot set property of undefined”。
Uncaught TypeError: Cannot read property 如果你是一个javascript开发者，你肯定看到过此错误 读取属性或调用方法的对象的未定义 这可能由于许多原因而发生，...反过来，这意味着ItemList将项目定义为未定义，并且您在控制台中收到错误 - “Uncaught TypeError：无法读取未定义的属性’map’”。 这很容易解决。...例如，如果您在CDN上托管JavaScript代码，任何未捕获的错误（冒泡到window.onerror处理程序的错误，而不是在try-catch中捕获）将被报告为“脚本错误”而不是包含有用的错误 信息...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量时，它总是返回undefined，我们无法获取或设置undefined的任何属性。...在这种情况下，应用程序将抛出“Uncaught TypeError无法设置未定义的属性”。 10.
当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试。 ?...2、 TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。...3、 TypeError: null is not an object 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...5、 TypeError: Object doesn’t support property 这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。 ?...8、 TypeError: Cannot read property ‘length’ 这是因为读取未定义变量的长度属性而发生的错误。 您可以在 Chrome 开发者控制台中进行测试。 ?
当你读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。 ? 导致这个错误发生的原因有很多，常见的一种情况是在渲染 UI 组件时，不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误，这与 Chrome 的上述错误基本相同，只是 Safari 使用不同的错误消息。 ? 3....TypeError: Null Is Not an Object (evaluating...) 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 ?...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误，因为读取了未定义长度属性的变量。 ?...Uncaught TypeError: Cannot Set Property 当尝试访问未定义的变量时，总会返回 undefined。我们也无法获取或设置 undefined 的任何属性。
当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。 ?...TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。...TypeError: null is not an object 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...(unknown): Script error 当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误...TypeError: Cannot read property ‘length’ 这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。 您可以在 Chrome 开发者控制台中进行测试。
当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。...TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。...TypeError: null is not an object 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...(unknown): Script error 当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时...TypeError: Cannot read property ‘length’ 这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。
nodejs环境：npm init 创建Electron环境，在全局安装：npm install -g electron 检测Electron是否安装成功，electron -v查看Electron版本号...=electron.app //引用APP，负责整个应用程序控制，即主进程 var BrowserWindow=electron.BrowserWindow //窗口引用，负责对窗口的操作 var mainWindow...package.json中的main属性声明，一般为main.js或index.js，创建或销毁窗口等所有系统事件，都需要定义在主进程的控制文件中，统一由主进程管理。...每个渲染进程都是独立的，任意一个渲染进程报错或崩溃都不会影响其他渲染进程运行 主进程和渲染进程的区别 主进程通过BrowserWindow创建页面 每个BrowserWindow实例都在自己的渲染进程中运行..., 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止 Electron运行流程 读取package.json的中的入口文件,即main.js main.js在主进程中创建渲染进程 读取应用页面的布局和样式
box-sizing属性在CSS中处理一个历史上的奇怪现象，在一个宽度为200像素的元素中添加50个像素的填充将导致它的宽度为300像素(每边添加50个像素的填充)，对于边框也是一样。...我们将font属性设置为menu，它依赖于操作系统来使用它的默认字体——即使我们无法访问它。 浏览器在当前活动的UI元素周围设置一个边框。在macOS中，这个边框是蓝色的辉光。...最后，我们向markdownView添加了一个事件监听器，它将在keyup上读取它的内容(在textarea元素中，内容存储在它的value属性中)，通过marked运行它们，然后将它们加载到htmlView...BrowserWindow实例上的webcontent属性有一个名为openDevTools()的方法。如清单3.11所示，这个方法将在调用它的BrowserWindow中打开开发工具。 ?...执行将在断点处暂停，允许您检查调用堆栈，确定范围内的变量，并与活动控制台进行交互。断点并不是调试代码的唯一方法。 您还可以监视特定的表达式，或者在抛出未捕获异常时将其放入调试器(图3.13)。 ?
box-sizing属性在CSS中处理一个历史上的奇怪现象，在一个宽度为200像素的元素中添加50个像素的填充将导致它的宽度为300像素(每边添加50个像素的填充)，对于边框也是一样。...我们将font属性设置为menu，它依赖于操作系统来使用它的默认字体——即使我们无法访问它。 浏览器在当前活动的UI元素周围设置一个边框。在macOS中，这个边框是蓝色的辉光。...最后，我们向markdownView添加了一个事件监听器，它将在keyup上读取它的内容(在textarea元素中，内容存储在它的value属性中)，通过marked运行它们，然后将它们加载到htmlView...BrowserWindow实例上的webcontent属性有一个名为openDevTools()的方法。如清单3.11所示，这个方法将在调用它的BrowserWindow中打开开发工具。...执行将在断点处暂停，允许您检查调用堆栈，确定范围内的变量，并与活动控制台进行交互。断点并不是调试代码的唯一方法。 您还可以监视特定的表达式，或者在抛出未捕获异常时将其放入调试器(图3.13)。
在创建BrowserWindow实例之前，应用程序已经在侦听ready事件。本章稍后，我们将学习如何从UI触发此功能。在下一章中，我们还将学习如何从应用程序菜单中触发它。 ?...如果用户按下取消，如果我们试图在未定义的情况下调用文件的任何方法，dialog.showOpenDialog()将返回未定义的并中断。...根据构建的文件类型，我们可能希望以不同的方式处理打开文件。在这个应用程序中，文件的内容被读取并立即显示在UI中。当用户选择文件时，处理复制图像或将图像上载到外部服务的不同应用程序可能采用相反的方法。...在用户选择一个文件之后，我们的应用程序应该读取文件的内容，在应用程序的左窗格中显示它们，并在右窗格中呈现相应的HTML。...每个BrowserWindow实例都有一个名为webContents的属性,它存储一个对象，该对象负责在调用new BrowserWindow()时创建的web浏览器窗口。
成功接收到标记后，应用程序获取网站的标题，并将标题和URL添加到网站列表中，该列表存储在浏览器的localStorage中。当应用程序启动时，它从localStorage读取并恢复列表。...在电子应用程序中添加样式表与在传统web应用程序中添加样式表没有多大不同。尽管如此，一些细微差别还是值得讨论的。 让我们从将style.css文件添加到应用程序目录开始。...我们的应用程序将只在应用程序附带的Chromium版本中运行。我们不必担心跨浏览器支持或兼容性考虑。正如在第1章中提到的，电子与相对较新版本的Chromium一起发布。...你的应用程序中的标签应该和我们在本章早些时候讨论时一样，但是以防万一，我在下方给出代码: require('....app模块管理电子应用的生命周期。 主进程无法呈现UI。
// 通常在应用程序中重新创建一个窗口。...autoUpdater 使应用程序能够自动更新 BrowserView 创建和控制视图,相当于Android中的Fragment。...Renderer Process 模块 desktopCapturer 从桌面上捕获音频和视频的媒体源信息。 ipcRenderer 从渲染器进程到主进程的异步通信。...为了使窗口无边框，使得在某些时候让项目看起来更美观，所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口。...但是无边框窗口会产生无法移动的问题，对于这个问题我们可以在渲染进程中通过编辑 css 文件来解决。
app.whenReady().then(() => { createWindow() }) 注意：此时，您的电子应用程序应当成功 打开显示您页面的窗口！ 2.2.5....应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。 一般而言，你可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。...因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。...== 'darwin') app.quit() }) // 在这个文件中，你可以包含应用程序剩余的所有部分的代码， // 也可以拆分成几个文件，然后用 require 导入。...为了访问渲染器中的Node.js的某些功能，我们在 BrowserWindow 的构造函数上附加了一个预加载脚本。 3.
command 注意：此脚本将告诉 Electron 在您项目根目录运行 此时，您的应用将立即抛出一个错误提示您它无法找到要运行的应用 # 运行主进程 任何 Electron 应用程序的入口都是 main...app.whenReady().then(() => { createWindow() }) 注意：此时，您的电子应用程序应当成功 打开显示您页面的窗口！...应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。...因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。...== 'darwin') app.quit() }) // 在这个文件中，你可以包含应用程序剩余的所有部分的代码， // 也可以拆分成几个文件，然后用 require 导入。
] 范围;界限;区间; 类; 种; token [ˈtəʊkən] 令牌;标记 try [traɪ] 尝试 throw [θrəʊ] 投;掷;抛;扔;摔;丢;猛推;使劲撞 Uncaught 未捕获...// 1、变量未定义便直接使用 console.log(my); // 报错：Uncaught ReferenceError: my is not defined // 翻译：my未定义 // 2、将变量赋值给一个无法被赋值的东东...、TypeError（类型错误）：变量或参数不是预期类型，或调用对象不存在的属性方法。...翻译：undefined的环境下无法读取属性“userName” 3、RangeError（范围错误）：数据值不在JS所允许的范围内。...•使用try包裹的代码，即使不出错，效率也比不用try包裹的代码低。•在try中，尽量少的包含可能出错的代码。•无法提前预知错误类型的错误，必须用try catch捕获。•finally可以省略。
6.在项目的根目录下创建一个名为main.js的文件,这个文件是整个应用程序的入口 // 我们需要导入两个electron模块 const { app, BrowserWindow } = require...下面对代码再做一下解释： app模块是用于控制应用程序生命周期的模块。BrowserWindow模块是用于创建和管理应用程序窗口的模块。...在主进程中通过Node的全局进程对象访问这些信息是很简单的。但是，您不能仅仅从主进程编辑DOM，因为它无法访问渲染器的文档上下文。它们处于完全不同的进程中! 关于这些进程相关的以后具体学习讲解。...要将此脚本附加到渲染过程中，请将预加载脚本的路径传递到webPreferences。在main.js现有的BrowserWindow构造函数中的预加载选项。...： // 我们需要导入两个electron模块 const { app, BrowserWindow } = require('electron') const path = require('path
有了跟踪应用程序所有窗口的数据结构，下一步是将创建BrowserWindow(列表5.2)从应用程序的"ready"事件监听器移到它自己的函数中。...; }; 这个createWindow()函数创建一个BrowserWindow实例并将其添加到我们在清单5.1中创建的一组窗口中。...例如，如果您关闭了Chrome中的所有窗口，应用程序在dock中仍然出于活动状态，并且仍然出现在应用程序切换器中。Fire Sale不能做到这点。 在前几张章中，这可能是可以接受的。...我们只有一个窗口，无法创建其他窗口。在本节中，我们只允许应用程序在macOS中保持打开状态。默认情况下，当Electron触发它的window-all-closed事件时，它将退出应用程序。...如果process.platform是darwin,则应用程序在macOS上运行。 在监听应用程序的windows-all-closed事件的函数中，返回false从而防止应用程序退出。
在使用递归时消耗大量堆栈，导致游览器抛出错误，因为游览器给分配的内存不是无限的。...：无法读取属性‘x’, 无法设置属性 'x' 为什么报错？...访问或设置未定义(undefined)或null值的属性时会发生这种报错。...在使用ajax 请求时url错误，导致请求失败。...createXHR('http://192.168.10:8080') 异常调试及捕获 try/catch，Js中处理异常的一种模式，try用于可能会发生错误的代码，catch对错误的处理。
，对大家了解 Electron 开发的应用程序安全有帮助，与每个人切实相关 但是上一篇文章内容太多，导致很多内容粒度比较粗，可能会给大家造成误解，因此我们打算再写一些文章，一来是将细节补充清楚，二来是再次来呼吁大家注意...Electron 安全这件事，如果大家不做出反应，应用程序的开发者是不会有所行动的，这无异于在电脑中埋了一些地雷 我们公众号开启了留言功能，欢迎大家留言讨论～ 这篇文章也提供了 PDF 版本及 Github...其他 Buffer 相关方法 }); // 在渲染进程中，可以通过 window.myAPI 来访问预加载脚本提供的方法 我看很多 V8 漏洞的Payload 都会使用到 Buffer ，看起来似乎是与二进制数据处理离不开的模块...，读取并返回内容 main.js const { app, BrowserWindow, ipcMain } = require('electron'); const fs = require('fs'.../etc/passwd 这种名称，就可能导致任意文件读取漏洞 这种属于是不安全的实现，案例比较极端，但是意思应该表达清楚了，这属于是 Preload 和主进程实现上做得不安全，导致问题 2.
领取专属 10元无门槛券
手把手带您无忧上云
