这个周总算度过去了，这一个周的时间都在做ATM的一个作业，这个题目是写一个应用程序，而不是写一个简单的脚本代码。...对于入门选手来讲，这个还是挺难的，之前一直就是一个文档搞定所有功能，而应用程序是要组织框架的，要有入口程序、有配置文件、核心文件文件、数据库、日志、使用说明等等。...其实这个应用，购物车跟信用卡是2个相互独立的程序，只需在结算的时候提供一个接口进行认证、判断后划账即可，认识到这点，代码实现就比较容易了。.../usr/bin/env python3.6 # -*- coding: utf-8 -*- #__author__: Ed Frey #date: 2018/8/14 import os import...总之，要增删改什么功能，直接定位到对应的模块去修改一定要清晰明了。如果一个程序代码揉成一团，修改某个功能，很有可能引起整个程序崩溃。 这，就是脚本跟应用程序的不同之处。
构建书签列表应用程序 让我们从构建一个简单而又有些幼稚的Electron应用程序开始，来加强我们已经介绍过的所有内容的理解。我们的应用程序接受url。...图2.1是我们在本章构建的应用程序的效果图。 ? 图2.1 我们在本章中构建的应用程序效果图 当用户希望将网站URL保存并添加到输入字段下面的列表中时，应用程序向网站发送一个请求来获取标记。...做出一下规定，我们有一个应用程序目录，其中存储了所有的应用程序代码。我们还有一个package.json将存储依赖项列表、关于应用程序的元数据和脚本，并声明Electron应该在何处查找主进程。...npm还允许您定义在package.json中运行公共脚本的快捷方式。当您运行package.json定义的脚本时。npm自动添加node_modules到这个路径。...需要指出的是，我们的convertToElement函数有点幼稚，并且不尝试清除用户输入。理论上，您的应用程序很容易受到脚本注入攻击。
，对大家了解 Electron 开发的应用程序安全有帮助，与每个人切实相关 但是上一篇文章内容太多，导致很多内容粒度比较粗，可能会给大家造成误解，因此我们打算再写一些文章，一来是将细节补充清楚，二来是再次来呼吁大家注意...，因此重要逻辑不应该在预加载脚本中进行，也不应该赋予其过于繁重的责任，完成主进程与渲染进程之间的通信，将通信结果传递给另一方才是它实际的意义，通过暴露方法使这种固定的逻辑可以被渲染进程调用 因此预加载脚本在渲染器加载网页之前注入...，从预加载脚本的职责来看，也确实可能用的到 使用案例如下 const { EventEmitter } = require('events'); class MyEmiter extends EventEmitter...readme.txt 此时预加载脚本没有做安全检查，将文件名称直接拼接传递给主进程，因此如果我们输入 ../../../../../.....过度暴露 在上面的例子中，我们使用了 Electron 30.0.0 版本，开启了 sandbox ，使用预加载脚本使用 contextBridge 将 API 暴露给渲染进程，我们将打开文件功能进行了封装
现在我们可以使用Python来构建类似JavaScript的任何东西。然而，大多数开发人员仍然没有意识到这些优秀的基于Python的创新。在这个故事中，我将讲解几个鲜为人知的Python用例。...尝试将Python应用于以下用例，并帮助Python更受欢迎吧。用Python创建移动应用程序 如今，Dart和JavaScript语言是最受青睐于构建跨平台的移动应用程序。...这些应用程序被称为混合应用程序，因为我们将本机功能嵌入到Web应用程序中。 基于Electron的应用程序通常在后端使用Node.js代码。...但是，Python程序员可以通过以下两个项目为Electron应用程序后端编写Python代码：python-gui-electron（https://github.com/keybraker/python-gui-electron...此外，您可以使用此库在创纪录的时间内将现有的自动化脚本转换为CLI程序。
而 Electron 开发中，页面不再是用户手动输入打开，而是开发着自主硬编码好的。 Electron应用程序主要分为主进程、渲染进程两个部分，即对应着右侧图中上下两个部分。...比如我们在主进程里想要获取应用程序的程序路径，我们可以在主进程这么获取： import { app } from 'electron' // 获取应用程序路径 const ROOT_PATH = app.getAppPath...初始化项目 yarn init electron 依赖包有点大，默认从github下载，所以巨艰难。...可以选择手工操作处理此类问题，如果你上网不够科学的话～ 解决方案： /node_modules/electron/ 目录下创建path.txt win输入：electron.exe mac输入：Electron.app...无跨域问题 支持 Node.js 参考 electron官网 《Electron实战（入门、进阶与性能优化）》 掘金小册 - 《Electron + React 从 0 到 1 实现简历平台实战》
✧ 编写第一个桌面应用程序 1.创建一个项目文件夹，并cd到该文件夹下面。...('electron') // 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中 const createWindow = () => {...版本对象，并运行replaceText函数，将版本号插入HTML文档。要将此脚本附加到渲染过程中，请将预加载脚本的路径传递到webPreferences。...== 'darwin') app.quit() }) 8.自定义js脚本的添加 此时，您可能想知道如何向您的应用程序添加更多的功能。对于任何与你想要的其他功能，你都需要添加js脚本到你的渲染过程中。...---- 到这里，教程的第一节就结束了，后面会对Electron开发的更多功能知识点进行讲解！
不太常见的快捷键 还有一些不常见的快捷方式，如下： 安装包信息将加入到optionalDependencies（可选阶段的依赖）- 常规：--save-optional， 简写：-O。...从根目录访问这些脚本会很方便，而不是每次要运行脚本时导航到不同的文件夹，有两种方法可以执行此操作。...例如，这是我在使用React前端的Electron项目中使用的dev脚本。 同时使用，脚本并行加载表示层和Electron窗口。...咱们可以通过传递环境变量BROWSER=none来禁用此行为。 7. 列出并选择可用脚本 列出package.json文件中可用的脚本很简单：只需转到项目的根目录并在终端中输入npm run。...在下一个(也是最后一个)技巧中，我们将合并git。 可以通过重定向到主目录中的.npm-init.js文件来编辑npm init脚本。
React是一个流行的JavaScript库，用于构建Web应用程序。结合Electron框架，可以轻松地将React应用程序打包为桌面应用程序。...修改启动脚本 为了启动React应用程序，你需要修改Electron应用程序的启动脚本。...在package.json文件中，将启动脚本修改为以下代码： "start": "webpack --mode development --watch & electron ."...这将使用Webpack将React应用程序打包为bundle.js，并使用Electron启动应用程序。 7....创建HTML文件 在Electron应用程序的根目录下，创建一个名为index.html的文件，输入以下代码： <!
注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。 2.2. 创建你的应用程序 2.2.1....electron ." } } start命令能让您在开发模式下打开您的应用 npm Yarn yarn start # couldn't auto-convert command 注意：此脚本将告诉...通过预加载脚本从渲染器访问Node.js。 现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。 在主进程通过Node的全局 process 对象访问这个信息是微不足道的。...注意：如果您需要更深入地了解Electron进程，请参阅 进程模型 文档。 这是将 预加载 脚本连接到渲染器时派上用场的地方。...额外：将功能添加到您的网页内容 此刻，您可能想知道如何为您的应用程序添加更多功能。 对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。
注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。...command 注意：此脚本将告诉 Electron 在您项目根目录运行 此时，您的应用将立即抛出一个错误提示您它无法找到要运行的应用 # 运行主进程 任何 Electron 应用程序的入口都是 main...# 通过预加载脚本从渲染器访问Node.js。 现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。...注意：如果您需要更深入地了解Electron进程，请参阅 进程模型 (opens new window) 文档。 这是将 预加载 脚本连接到渲染器时派上用场的地方。...# 额外：将功能添加到您的网页内容 此刻，您可能想知道如何为您的应用程序添加更多功能。 对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。
（NW.js）、PyQT跨平台：Swing（JAVA）、PyQT（Python、C++）、Electron（前端）Electron相对于其他的来说，算是对前端来说非常友好的了，还阔以结合Vue来搞。...然后，将 Electron 安装为项目的 devDependencies，即仅在开发环境需要的额外依赖。...这样子最后在终端输入 npm start这样每次修改index.js 主进程文件都会重新启动项目了，index.js可以自行修改 main.js等等运行 Electron 应用在 package.json...中指定的脚本文件 main 是所有 Electron 应用的入口点。...在继续编写 Electron 应用之前，将使用一个小小的脚本来确保主进程入口点已经配置正确。
）， 这实际上是为了将来制作应用程序安装包时， 避免把electron包和其可执行文件包装两次。...，用于下载Electron的可执行文件及相关资源，下一小节我们将讲解Electron可执行文件的下载过程。...文件下载完成后， 程序会把它复制到缓存目录中以备下次使用，这个机制极大的节省了开发者的时间成本， 下一小节我们将深入讲解Electron安装过程中的缓存和镜像机制。...， SET是为一个变量赋值， %*是执行命令时输入的参数， 整段命令脚本的意思是用node执行Electron包内的cli.js文件， 并把所有命令行参数一并传递过去。...npm在执行一段脚本前， 比如：npm run dev，会先自动新建一个命令行环境，然后把当前目录的node_modules/.bin加入到系统环境变量中， 接着执行scripts配置节指定的脚本的内容
# 这里会自动去找package.json的main字段对应的文件运行 # 当然 你也可以将命令放进 script 里面 npx electron . 运行完打开的应用程序如下图所示。 3.5....window.myAPI = { desktop: true } console.log(window.myAPI) // => undefined Electron 这样做是为了将预加载脚本与渲染进程的主要运行环境隔离开来的...当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息。从渲染器进程发送的消息将被发送到该模块。...你可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。也可以接收主进程回复的消息。 5.1. 渲染进程给主线程发送消息，主线程回复 5.1.1....预加载脚本暴露接口 在预加载脚本中，可以暴露一些全局的接口给到渲染进程，然后渲染进程调用，从而达到通信的目的。这种方式类似于微信 SDK，不用侵入到前端脚本去监听事件，较为安全。
预加载脚本 主进程可以与操作系统交互，渲染进程只能渲染网页，那么当功能需要操作系统支持的时候，渲染进程如何将需求传递给主进程，主进程如何将结果传递给渲染进程就是个问题，Electron 设计了一系列的...或使用remote模块从主进程发送到渲染器进程中的子帧的 IPC 消息在某些情况下可能会传递到错误的帧。...1-10 kb 的 Node.js 堆内存的随机段将泄漏到最终的可执行文件中。...此环境变量可用于将各种自定义选项传递到Node.js运行时，并且通常不被生产中的应用程序使用。...在Electron的原始版本中，这种行为是Electron应用程序的核心，但不再需要，因为应用程序现在应该从自定义协议中提供本地文件。
、HTML 和 CSS 编写跨平台的桌面应用程序。...它被 Atom 编辑器等众多应用程序所采用。该项目具有以下核心优势： 跨平台：Electron 提供了 macOS、Windows 和 Linux 三个主要操作系统的二进制文件。...continuedev/continue[5] Stars: 3.4k License: Apache-2.0 Continue 是一款针对 VS Code 的扩展插件，将 ChatGPT 的强大功能引入到...从头开始生成文件：打开空白文件让 Continue 创建新的 Python 脚本、React 组件等。...脚本和提示：提供各种预先准备好的脚本和提示，以进行多个 LLM 自动化编辑过程。
本文将通过Electron的安装源码一一说明。...=D:\Programs\Python39\python.exe # 单独设置Electron的镜像 electron_mirror="https://npm.taobao.org/mirrors/electron...让我们回到@electron/get/dist/cjs/index.js脚本的downloadArtifact函数中，看该部分： 在url变量获取的下一行，构建了一个Cache缓存对象，继续往下，通过判断不进行强制从远端下载的标志...最后，路径还使用到了this.cacheRoot，查看Cache的构造函数，发现如果没有传递cacheRoot，则使用defaultCacheRoot，该值在该脚本文件上面有定义： 通过一段脚本输出该路径...它是如何运行的 下载Electron资源到操作系统中已知的位置，并且缓存该资源的模块，用于便于在将来请求同一个资源的时候能够立刻完成并返回。
其他系统注册的协议 0x04 漏洞案例 0x05 总结 0x06 PDF 版 & Github 往期文章 0x02 效果展示 我们假设让用户输入一个 url ，之后传递给主进程，让主进程使用 shell.openExternal...document.getElementById('urlInput').value; if (url) { // console.log(url) // 发送网址到主进程...打开可执行文件 Windows 11 直接输入二进制可执行文件地址可以直接执行二进制可执行文件，但是不支持传递参数 在 Windows 中，路径后加上 ?...xxxx 是不会影响定位文件的，但是后面的参数也没有传递给要执行的文件 MacOS 13.6 Deepin Linux 当传递二进制可执行文件的地址给 url 参数时，Windows 和 MacOS 平台都是直接运行二进制可执行文件...此时我们再次回到程序，再次点击按钮 还是仅仅会打开目录，并不会执行，即使会执行，还会验证开发者等一系列安全措施 Deepin Linux 在 Deepin Linux 上，我们尝试执行 .desktop 文件，直接从
使用Python实现功能之后，然后通过 nuitka 将 Python 文件打包成一个可执行文件，通过 ElectronEgg 进行调用。...默认情况下，渲染器进程没有权限访问 Node.js 和 Electron 模块。 作为应用开发者，您需要使用 contextBridge API 来选择要从预加载脚本中暴露哪些 API。...例：通过系统的默认应用打开浏览PDF文件 渲染器进程到主进程（单向） 单向通信只是渲染进程发消息到主进程，不需要主进程的返回信息。...1、在主线程中通过 ipcMain.on 监听事件 index.ts 主进程中加载脚本，设置事件监听 import { app, dialog, ipcMain, shell } from 'electron...将消息从主进程发送到渲染器进程时，消息需要通过其 WebContents 实例发送到渲染器进程。
图3.1 我们的应用程序的线框显示，用户可以在左侧窗格中输入文本，或者从用户的文件系统的文件中加载文本。 在这一章中，我们为我们的应用奠定了基础。...我们创建项目的结构，安装依赖项，设置主进程和呈现器进程，构建用户界面，并在用户向左侧窗格输入文本时实现markdown到HTML的转换。 我们将在接下来的几章中分阶段构建应用程序的其余部分。...在第一阶段，我们的应用程序将能够 打开并保存文件到文件系统 从这些文件获取Markdown内容 将Markdown内容呈现为HTML 将生成的HTML保存到文件系统中 将生成的...我们可以将Markdown文件从Finder或Windows资源管理器拖放到应用程序上，并让应用程序立即打开该Markdown文件。...优雅地显示浏览器窗口 如果你仔细观察你的应用程序的启动，您将注意到，在Electron加载index.html并在窗口中呈现DOM之前，窗口完全为空。
Electron简介 Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它由GitHub开发并于2013年首次发布。...应用程序分发：Electron提供了打包和分发应用程序的工具。开发人员可以将应用程序打包为可执行文件或安装程序，并将其发布到应用商店或通过其他方式分发给用户。...总之，Electron提供了一种简化和加速桌面应用程序开发的方式，使开发人员能够利用熟悉的Web技术构建跨平台的应用程序。...,打开dmg文件,将酷家乐.app放到/Users/zhongxin/Downloads/mac-arm64/酷家乐.app位置 修改一下测试脚本test.e2e.js,完成登录 import { browser.../desktop/base/main 生成入口文件:/Users/zhongxin/gitproject/main/app/dist/main.js 测试脚本: const {_electron: electron
领取专属 10元无门槛券
手把手带您无忧上云
