window-all-closed: 当所有浏览器窗口被关闭后触发，一般此时就退出应用了。 activate: 当app激活时触发，一般针对macOS要需要处理。...这也是这个App上的唯一一个组件，它的宽和高自动平铺满整个窗口大小。当修改了文本框中的文字后，会在App标题栏上最右侧添加一个*号以表示文档尚未保存。...退出时保存检测：用户点击窗口的关闭按钮，或者点击Exit菜单就会关闭窗口退出程序。在退出时，有必要检查文档是否需要保存，如果尚未保存就提示用户保存。...模板的第一个菜单是File菜单，它的子菜单被设计成空的，在这里使用menu.items[0].submenu.append方法向这个File菜单添加四个子菜单，分别是：New（新建文档），Open（打开文档...退出时保存检测的实现过程 正如前面在App功能细节中讨论的一样，在关闭程序前，友好的做法是检测文档是否需要保存，如果尚未保存，通知用户保存。
前言path 模块是 nodejs 中用于处理文件/目录路径的一个内置模块，可以看作是一个工具箱，提供诸多方法供我们使用，当然都是和路径处理有关的。....js .css 等返回值：path 路径的最后一部分注意：如果 path 不是字符串或者给定的 ext 参数不是字符串，则抛出 TypeError如果有 ext 参数，当 ext 后缀名与文件名匹配上时返回的文件名会省略文件后缀如果.../ext/test.js','.js') //test (当后缀名与文件名匹配上时返回的文件名会省略文件后缀)path.basename('....（将路径片段解析后生成的绝对路径）注意：路径片段如果给出则必须是字符串类型，否则类型错误给定的路径序列从右到左进行处理，每个后续的 path 前置，直到构造出一个绝对路径如果处理完所有给定的 path.../ext/test1.js'这到底是为啥嘞，原因就是 './' 和 '../' 的路径表示意义需要分情况，当结合 require() 使用的时候相对于当前执行文件，如果不结合 require() 使用的情况下会相对于当前启动脚本的目录
具体操作 Electron环境搭建 1、Electron环境搭建之前要求大家的机子上要有NodeJS环境，关于NodeJS环境的搭建过程，大家直接网上找资料即可，下载安装包之后直接安装就可以，这篇文章不做详细介绍...2、NodeJS环境安装部署之后，我们就可以搭建Electron环境了，具体搭建环境其实也直接可以参考官网文档，写的很详细，地址如下： https://www.electronjs.org/docs/tutorial...创建demo 1、新建一个文件夹，然后在此文件夹中打开命令行窗口或者powershell窗口，通过npm init命令初始化一个项目，如下： 2、初始化完成之后，在此文件夹中可以看到如下文件： package.json...文件里是一些关于我们新建的项目的描述，包括项目的入口文件信息等。...install --save-dev electron 5、然后在项目根目录新建index.js入口文件和index.html文件。
leave-full-screen: 当窗口退出全屏模式时触发此事件。...dom-ready 当窗口中的网页文档完成解析并可供操作时触发。 did-fail-load 当窗口中的网页加载失败时触发。 did-start-loading 当窗口开始加载网页时触发。...did-navigate 当窗口中的网页导航到新的 URL 时触发。 did-navigate-in-page 当窗口中的网页发生内部导航（锚点跳转等）时触发。...did-frame-finish-load 当一个子框架加载完成时触发。 did-start-navigation 当窗口开始导航到新的 URL 时触发。...executeJavaScript(code[, userGesture]) 在窗口中执行给定的 JavaScript 代码。
(electronjs.org)，只需要配置一个镜像地址到.npmrc中： ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/" 记住这个大写的...难道因为我的网络访问很慢吗？等到访问超时以后，发现一个IP地址超时了，心想国内镜像再怎么也不应该超时，盲猜镜像地址没有生效。于是乎，准备尝试对下载Electron二进制文件的过程进行debug。...为什么这个下载的Electron二进制文件地址依然是github的？于是，我们有必要进一步查看这个URL是如何得到。...为了验证，我们编写一个简单的index.js代码： console.log("process.env['npm_config_electron_mirror']", process.env['npm_config_electron_mirror...ELECTRON_MIRROR"直接拼接到了"npm_config_"后边，作为process.env的一个属性，所以你只能访问process.env["npm_config_ELECTRON_MIRROR
标签，当 a标签的 target 属性被设置为 _blank 时，点击标签会创建新窗口 当 form 标签渲染的表达被提交时，也会打开新窗口 除此之外的 alert 等创建的弹窗就不在讨论的范畴了 https...) 网址 打开 https 的网址没问题 打开 http 网站没有问题 自签名证书不行 2) file 协议加载本地文件 如果直接加载可执行二进制文件是什么效果呢？...Deepin Linux 会直接变成下载文件 Windows 11 与 Deepin Linux 表现一致 MacOS 报错是找不到文件，可能是将 .app 视为目录看待的 与 Deepin Linux...使用 noopener 时，在决定是否打开新的浏览上下文时，除 _top、_self 和 _parent 以外的非空目标名称会像 _blank 一样处理 7) noreferrer 如果设置了此特性，浏览器将省略...不设置 'nodeIntegration=true, contextIsolation=false' 也是可以执行的，毕竟是继承父窗口的权限嘛 由于这部分是新窗口创建，而当 frameName(target
当处于交互模式时，每一行都代表了一个数据块儿(data chunk)。当通过process输送数据时，每个数据块儿都由streams流允许消耗的最大内存决定。...我们对data事件进行监听，它实际上提供了一个二进制表示形式的数据，用来存储输入的数据。 当接受到data事件时，调用process.stdout 的 out方法就可以了。...所以当进程直接连接到终端时，process.stdin是使用核心TTY模块的ReadStream构造函数创建的，该构造函数具有isTTY属性。...然而，当I/O被重定向时，通道是从网络模块的套接字构造函数创建的，它没有isTTY属性。 文件处理 fs 文件处理能力是服务端编程的一个基本能力，Node通过fs模块提供了这种能力。...这是因为文件是以块的形式读入进程的。每个区块都会被剥离空字节并写入文件，旧区块和剥离结果会被丢弃，而下一个区块会进入进程内存。这一切都发生在事件循环的多个tick中，从而为计时器队列的处理留出了空间。
Electron 的 Menu 模块时，以下是一些主要的知识点： 创建菜单：使用 Menu.buildFromTemplate(template) 方法可以根据提供的菜单模板创建菜单对象。...菜单模板是一个包含菜单项的数组，每个菜单项都有自己的属性，如标签（label）、快捷键（accelerator）、角色（role）和点击事件（click）等。...菜单项属性： label：菜单项显示的文本。 accelerator：为菜单项指定快捷键，允许用户使用键盘快速访问菜单项。 click：菜单项被点击时触发的回调函数。...你还可以使用 type: 'label' 来创建一个标签，它是一个不可点击的文本项，用于在菜单中提供额外的说明或分组。 上下文菜单：除了应用程序菜单，你还可以创建上下文菜单（也称为右键菜单）。...菜单项和role相关的信息可以参考：https://www.electronjs.org/zh/docs/latest/api/menu-item 右键菜单 自定义右键菜单和自定义应用菜单用法基本差不多
直接看到 bin/npm-run-all/index.js： require(".....arguments: argv.rest, // 这个用于当任务以0码退出时，终止全部任务 race: group.parallel...当 test 任务也完成时（假设此时 lint 任务已经完成），同样也会再次执行 next。...不同的是，串行是首次只执行一次 next，并行根据参数执行多次 next。当满足队列为空并且所有任务都完成，就结束当前任务组，并将缓存在 results 中的结果返回。...给当前任务挂上了 abort 的静态方法，用于结束当前进程；当在任务组执行 abort 方法时，实际会调用这个静态方法。 总结 有人会问为什么要去看一个 6 年前写的源码？
{ /* * 指定要导入的文件目录 * 直接加载用{eager:true},懒加载用glob * */ const modules = import.meta.glob...\/(.*)\/index.js/.exec(i); /*直接引入组件*/ app.component(name[2], modules[i].default);...router.matched，与给定路由地址匹配的标准化的路由记录数组。...代表页面的组件一般以文件夹的形式通过index.js导出组件，方便观察层次结构，并且页面组件一般都会拆分JS模块，通过文件夹也更加方便文件的分类，保持目录的简洁。...其他的组件，如果设计到大量的逻辑，需要拆分JS模块，可以用文件夹，如何很简单的直接用.vue文件即可。 如何让父子组件的层级更加清晰？首先名字可以按层级写；parent-children.vue。
这个属性也是与我们关系比较大的内容，采用了默认即安全的配置方式 实验性: 允许在没有征求用户同意的情况下下载文件 备注： 当被嵌入的文档与主页面同源时...显式地设置 sandbox 当 sandbox 设置了 allow-scripts 时 这里有一个问题，未设置 sandbox 或 sandbox="allow-scripts"时 iframe 中的...默认情况下，当一个 使用了 sandbox 属性而没有特别指定 allow-same-origin 时，该 中的文档会被视为来自一个独特的、无权限的源，即使实际上它与包含页面同源...仅当框架的内容超出框架的范围时显示滚动条 yes: 始终显示滚动条 no: 从不显示滚动条 2....经过测试，可以缺少 sandbox: false ,但是不能设置 sandbox: true ，默认配置是可以执行的，具体为什么参照 sandbox | Electron 安全 这篇文章 当大家看到这篇文章的时候
修改依赖加载层级 相信大家学习node也都读过一本书《深入浅出nodejs》，这本书的第二章第二节曾简要介绍node加载依赖所遍历的一些目录，书中让我们在某个测试文件中输出module.paths，结果是一个数组...，parent.id 和parent.filename为空 if (!..._initPaths函数在默认的生命周期内只执行一次，作用自然是设置全局加载依赖的相对路径。而当每次在文件中执行require加载其他依赖时，Module....但是，这种方案毕竟不优雅，因为我们的一个项目就修改了系统的环境变量，如果其他项目也采用这种方案，那么相信系统的NODE_PATH将会变得很长，而且会由于NODE_PATH的子路径顺序问题出现意想不到的冲突...尝试二 我们希望只针对当前运行的程序设置环境变量，不影响其他程序；而且一旦当前程序退出，设置的环境变量也被恢复。满足这种需求的实现，最为直观的就是命令行配置。
我们可以使用app.on() 方法监听事件， 比较常见的事件有： ready：当 Electron 完成初始化并准备好创建浏览器窗口时触发。...will-quit：当应用程序将要退出时触发。 quit：当应用程序退出时触发。在此事件中执行最终的清理任务或保存状态。 window-all-closed：当所有应用程序的窗口都被关闭时触发。...返回一个布尔值，指示应用程序的就绪状态。 app.whenReady()：返回一个 Promise，当应用程序准备好创建浏览器窗口时解析。...这只是一些常见的方法示例，app 模块还提供了其他许多方法，用于处理应用程序的窗口、会话、文件关联、协议处理等。...参考文档：https://www.electronjs.org/zh/docs/latest/api/app
在匹配的时候，首先在给定目录下匹配是否有.js文件， 如果没有，那么匹配/index.js文件，如果还不匹配， 那么nodejs读取/package.json文件，从里面给定的路径进行加载 */ return module_name } const my_module = my_require...，这两个对象恰好就是加载模块用于导出内容的对象，当eval执行后，加载模块要导出的内容就已经存储在module和module.exports中，可以直接使用了。...代码还需要注意的是，require采用了缓存功能，如果给定模块已经加载过了它就直接返回，这意味着无论模块在代码中被加载多少次，它实际上只加载了一次，以后每次遇到要requier它的时候，nodejs都会从缓存中直接将其返回...|---node_modules |----index.js 从目录上看，myAPP，depB, depC都依赖于名字为depA的模块，当myAPP加载depA
我们只用到了一个窗口，我们一直称之为主窗口，但从逻辑角度来说，没有子窗口的存在，也就没有什么主窗口之说 大家有些时候在使用应用程序的时候，点击某个功能会跳出来一个新的窗口，这个就叫做子窗口 举个例子，我们在电脑版微信中查看公众号文章时...，点击文章，会出现一个新的窗口来显示文章内容，而不是在原本的窗口呢，这样原本的窗口可以继续聊天等 https://www.electronjs.org/zh/docs/latest/api/browser-window...本身有关，不受 sandbox 、nodeIntegration、contextIsolation 影响，当然，Preload 暴露方法和值的方式受 contextIsolation 影响，当 contextIsolation.../zh/docs/latest/api/webview-tag https://www.electronjs.org/zh/docs/latest/api/web-contents-view 官方是不建议使用...webview 标签，在 Electron >= 5.0 版本后，默认不允许，使用的话必须在创建父窗口时显式地设置 webviewTag: true 直接使用上面测试 iframe 执行 Node.js
也就是说在我们之前的代码示例中，只要跳转组件，就一定要通过路由才可以；但是我们在实际开发中有些时候(某一些组件跳转时)，可能不方便使用路由来完成，此时我们可能是需要页面中有一个按钮，我们点击按钮，不触发路由...**概念：**当一个导航触发时，全局前置守卫按照创建顺序调用。...token){ next() }else{ next('/login') } }else{ //当访问的路径中不包含...在index.js文件中指定的路由上配置 #可以路由配置上直接定义 beforeEnter 守卫： { path:'/about', name:'about', //配置独享路由守卫...history模式 可以通过在index.js文件中添加mode选项 把默认的hash模式修改为history模式 ，这个模式在路径访问时没有#号 const router
如果不指定或者使用partition:''（空字符串），则使用一个临时的、匿名的分区，关闭窗口后相关数据会被清除 Session: 会话（Session）在 Electron 中是一个更高级的概念，它代表了一组配置和行为...创建Session: 你可以通过session.fromPartition()方法创建一个基于特定分区名的Session实例，或者直接使用session.defaultSession来获取应用的默认Session...否则, 该协议将表现为 file 协议, 而且，这种文件协议将不能解析相对路径 例如, 当您使用自定义协议加载以下内容时，如果你不将其注册为标准scheme, 图片将不会被加载, 因为非标准scheme...，例如 https 不包含 handler 协议处理程序，是一个协议处理函数 当Electron遇到匹配到scheme的URL请求时 handler会被调用。...，默认是一个空数组，仅在 Windows 平台有用 注意: 在 macOS 上，您只能注册已添加到应用程序的 info.plist 中的协议，这个列表在运行时不能修改。
如有不妥~欢迎兄弟们不啬赐教。谢谢！ react-redux 配置说明 reducer 首先我们在项目/app/reducers下新建一个index.js，用于导出所有的reducer。...也用于将admin、front等reducer汇总的文件。最后combineReducers后直接导出。...这里我们可以暂时导出一个空的state。 对应的每一个子reducer书写大致如下： ?...react-router 配置说明 react-router中的配置主要在/container/index.js文件中。该文件负责导出所有路由中的文件。 说一下该项目的路由大致规则。...我会第一时间处理。 交流 倘若有哪里说的不是很明白，或者有什么需要与我交流，欢迎各位提issue。或者加群联系我~ 扫码关注我的个人微信公众号，直接回复，必有回应。分享更多原创文章。
这个方法的功能就是检查给定的文件系统路径是否存在。此方法只返回一个布尔值，这是为什么不推荐使用这个方法，而推荐使用fs.access()的一个重要原因。...同步操作的好处是简单，但是当读文件时就不能再进行其他操作了，而异步读取不需要等待，但是代码比较复杂。...process.exit(退出码) 是用来终止进程的。如果退出码为空表示退出码为’0’或者’process.exitCode’.这些代表以成功状态退出。...写入文件。第一个参数填文件路径，可以是相对路径，也可以是绝对路径，这里是相对路径。第二个参数是要写入的内容，第三个参数可用可不用，是编码类型，第四个参数是回调函数。...第一个参数是事件的名称，第二个参数是回调函数。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
