文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

（1 3）Electron知识学习 · 基础篇

Electron是一个跨平台的桌面客户端框架，使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，文档:https://www.electronjs.org/zh/docs/latest...，当前使用最新稳定版本:20.1.4 特性 我们可以从中了解到他实现的方式以及他的应用场景 我认为他们最大特点就是: 主进程和渲染进程就行隔离(沙箱模式) 当时用户操作和渲染的事情都是交给渲染进程 当需要操作系统...让你可以使用 HTML, CSS 和 JavaScript 构建应用 开源 Electron是一个由OpenJS基金会和一个活跃的贡献者社区管理的开源项目 跨平台 Electron 兼容 Mac、Windows...Electron,NodeJs,Chromium等版本号 这时我们就需要调用相关接口 下面我来演示一下 首先我们我们需要添加一个预加载脚本 我们在根目录添加一个preload.js文件 并添加如下内容...//app:模块，它控制应用程序的事件生命周期 //BrowserWindow:模块，它创建和管理应用程序 窗口 const { app, BrowserWindow } = require('electron

1.1K20

Electron入门教程1 —— 编写第一个桌面应用程序

所以此时我就想，既然移动app都能用vue来写，那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢？还真可以，那就是Electron这个框架。...✧ 安装Electron Fiddle工具 在开发第一个桌面应用之前，我要向大家推荐一款官方的工具，这个工具叫Electron Fiddle ，我们可以在这个工具里面调试代码，你可以更改里面的样例代码运行...下面对代码再做一下解释： app模块是用于控制应用程序生命周期的模块。BrowserWindow模块是用于创建和管理应用程序窗口的模块。...在 Electron 中，浏览器窗口只能在app模块的ready事件触发后才会创建。您可以使用app.whenReady()等待此事件 。.../index.js"> js中包含的代码可以使用与典型前端开发相同的JavaScript api，比如使用webpack来打包和缩小代码，或者使用Vue打包的代码。

3.2K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Electron+Vue3.2+TypeScript+Vite开发桌面端

    Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。...Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。”...我找到了一个插件：vite-plugin-electron，可以很方便的帮我们把 electron 和 vue 结合起来，开发起来非常方便。...初始化electron项目 可以参考 electron 官网的快速开始项目 创建主进程目录和文件 // electron-main/index.ts import { app, BrowserWindow...ExectronVueVite_1.0.0.exe 文件是安装包，打开会显示安装过程，执行完安装过程后在系统的控制面板中的软件列表中可以看到该软件，也可以执行卸载。

    2.5K10

    初探Electron，从入门到实践

    Electron作为一个使用新兴技术（包括JavaScript，HTML和CSS），可以帮助用户建立与系统功能的交互，让开发人员可以更专注于应用程序本身。...因此，您编写的任何Web应用程序都可以在Electron JS 上正常运行。...WebTorrent WebTorrent，作为第一个在浏览器中运行的torrent客户端，是一个完全由JavaScript编写并使用WebRTC进行点对点传输的客户端应用。...在使用Electron开发的程序中，会使用main.js作为程序的主入口，该文件内代码执行的内容，就是主进程中执行的内容。 ? 主进程 ? 主进程控制应用程序的生命周期。...我这里使用electron-builder进行项目文件的打包，您可以直接在项目根目录通过 npx electron-builder命令执行打包命令。 ?

    2.6K20

    5000字解析：前端五种跨平台技术

    Webview Javascript Bridge，简称 Jsbridge，它也是混合开发框架的核心. ---- 我所使用的跨平台技术： Electron React-Native Taro Cordova...工具类的软件是最复杂的，例如vscode、word这些，都是极度复杂的，又因为可以调用addon、各种脚本插件，原生第三方插件，这个技术简直就是黑科技，至今我也不敢说对它熟悉。...我的GitHub可能有你想要的Demo内容： https://github.com/JinJieTan 要想开发好Electron，要拥有一名C++人员专门编写插件，一位后端出生的人生操作sqlite数据库...Taro的源码我没看过，但是我看里面用了很多他们自己写的babel包，应该是JIT模式，加入了中间层，把你写的东西，编译成了小程序可以执行的代码，个人认为小程序不要做得太复杂，不然你还不如做个APP，轻量跨平台...其次， Flutter 1使用自己的渲染引擎来绘制UI，布局数据等由Dan语言直接控制，所以在布局过程中不需要像RN那样要在 Javascript和 Native之间通信。

    1.2K20

    5000字解析：前端五种跨平台技术

    我所使用的跨平台技术： Electron React-Native Taro Cordova 快应用 Flutter(刚学习) ......工具类的软件是最复杂的，例如 vscode、word 这些，都是极度复杂的，又因为可以调用 addon、各种脚本插件，原生第三方插件，这个技术简直就是黑科技，至今我也不敢说对它熟悉。...我的 GitHub 可能有你想要的 Demo 内容： https://github.com/JinJieTan 要想开发好 Electron，要拥有一名 C++ 人员专门编写插件，一位后端出生的人生操作...APP，轻量跨平台，自然是最快速的，而且可以使用 TSX 语法，React，太好了。...其次， Flutter 1 使用自己的渲染引擎来绘制 UI，布局数据等由 Dan 语言直接控制，所以在布局过程中不需要像 RN 那样要在 Javascript 和 Native 之间通信。

    1.3K40

    除了Web和Node，JavaScript还能做什么

    ，编写跨平台的混合APP，或者原生APP 通过Cocos2d-x 框架或白鹭引擎，JS可以开发流行游戏 JS进行三维处理: WebGL和three.js 做浏览器插件开发，例如Chrome...Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。 ?...树莓派允许许多编程语言对GIPO接口进行控制，而JavaScript也是其中之一，也就是说，我们可以通过Node.js环境和树莓派，从而控制硬件。 这样的话，也许就能做一个好玩的智能小车玩一玩 ?...接口，大概是这么个意思 Ntv介绍文档 Ntv源代码 S4.通过Hybird开发混合APP，到后来通过React-Native编写原生APP （这件事情其实不用讲也可以，因为大家肯定都比较了解了...NodeOS吗？

    1.7K10

    Electron框架 介绍

    简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。...应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。 一般而言，你可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。.../renderer.js"> 复制 然后，renderer.js 中包含的代码可以使用与典型前端开发相同的 JavaScript API 和工具，例如使用 webpack 来捆绑和缩小您的代码或使用...在此脚本中， 我们使用 Electron 的 app 和 BrowserWindow 模块来创建一个浏览器窗口，在一个单独的进程(渲染器)中显示网页内容。

    57100

    Electron自动化测试技术选型调研

    Electron允许开发人员使用Web技术（如HTML、CSS和JavaScript）来构建桌面应用程序，同时可以在Windows、macOS和Linux等操作系统上运行。...以下是一些关键特点和优势： 跨平台：Electron可以在多个操作系统上运行，包括Windows、macOS和Linux。这意味着开发人员可以使用相同的代码库构建应用程序，并在不同的平台上进行部署。...基于Web技术：Electron使用Web技术作为应用程序的构建基础。开发人员可以使用HTML、CSS和JavaScript来构建用户界面和应用逻辑，这使得开发过程更加熟悉和容易上手。...完全控制浏览器环境：Puppeteer可以控制底层的Chromium浏览器实例，从而能够修改和监控浏览器的各个方面，例如网络请求、用户代理、存储等，使得测试更加灵活和可靠。.../desktop/base/main 生成入口文件:/Users/zhongxin/gitproject/main/app/dist/main.js 测试脚本: const {_electron: electron

    1.6K30

    独家 | 5个只有少数程序员知道的用例

    现在我们可以使用Python来构建类似JavaScript的任何东西。然而，大多数开发人员仍然没有意识到这些优秀的基于Python的创新。在这个故事中，我将讲解几个鲜为人知的Python用例。...用Python编写Shell脚本 系统管理员通常会为各种系统维护任务编写Bash脚本。开发人员还倾向于使用Shell脚本自动化他们重复且耗时的手动任务——以提高他们的生产力。...ShellPy允许您使用Python编写类似Bash的自动化脚本。看下面的例子吧。  #!...但是，Python程序员可以通过以下两个项目为Electron应用程序后端编写Python代码：python-gui-electron（https://github.com/keybraker/python-gui-electron...此外，您可以使用此库在创纪录的时间内将现有的自动化脚本转换为CLI程序。

    2.8K30

    不只是Electron, 跨平台桌面开发的新选择 - Tauri

    不过今天我要说的是一个和Electron非常类似, 有着其独特的优点与不足的新的选择. 就是Tauri....从Electron说起 Electron的流行, 最核心的优势无非是以下两个原因: Node + JavaScript技术搭配 跨平台, 支持主流三大操作系统 想像一下, 仅仅是只需要知道JavaScript...它与Electron的相同点表现在: 跨平台, 开发出的App支持主流Windows, MacOS以及Linux. 支持使用前端框架来实现App UI. 也就是主要都是用前端技术来开发....它的缺点也非常明显 前后端技术分离 用Tauri, 意味着主要使用前端技术, 那就是JavaScript或TypeScript, 后端一些支持(比如调用原生能力)得用Rust....那我今天说的Tauri应该可以纳入你的考虑. 特别是Tauri V2开始支持移动端, 这可意味着真正的一次编写, 到处运行了.

    1.9K10

    使用JS开发桌面应用

    Javascript在web开发中已经稳稳的占据了重要位置，现在已经开始渗透到桌面开发了 Electron 便是用来创建桌面应用的框架 使用 JavaScript + HTML + CSS 就可以开发跨平台的桌面应用...，使用 Electron 构建 JavaScript 语言发明人 Brendan Eich 的公司使用 Electron 开发了一套全新的网页浏览器 Brave Browser 上手尝试 下面写一个hello...= require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow var mainWindow...编译包 npm install -g electron-prebuilt 然后在命令行直接执行 electron 这个命令，会自动打开他的控制台 ?...可以直接把electron_test这个文件夹拖到控制台中，便会启动运行这个应用 还可以根据控制台中的提示，在命令行启动应用 electron的项目地址 https://github.com/electron

    2.8K60

    Electron 快速入门，顺便聊聊 IPC 通信

    Electron 官网只有一句简单的话： 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。...Electron 提供了两个模块： app 模块，它控制应用程序的事件生命周期。 BrowserWindow 模块，它创建和管理应用程序 窗口。...在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。可以通过使用 app.whenReady() API 来监听此事件。...应用程序窗口在每个 OS 下有不同的行为，Electron 将在 app 中实现这些约定的责任交给开发者们。 可以使用 process.platform 属性来为不同的操作系统做处理。 3.5.1....应用生命周期：主进程可以使用 Electron 提供的 app 模块来控制应用程序的生命周期。 原生 API：Electron 有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。

    1.7K11

    如何开发Vite3插件构建Electron开发环境

    所以，我还是建议你尽量 自己写代码构建 Electron+Vue 的开发环境 ，这样可以让自己更从容地控制整个项目。 具体应该怎么做呢？...app 是 Electron 的全局对象，用于控制整个应用程序的生命周期。...mainWindow 被设置成一个全局变量，这样可以避免主窗口被 JavaScript 的垃圾回收器回收掉。另外，窗口的所有配置都使用了默认的配置。...stdio 用于设置 electron 进程的控制台输出，这里设置 inherit 可以让 electron 子进程的控制台输出数据同步到主进程的控制台。...如果渲染进程的代码可以访问 Node.js 的内置模块，而且渲染进程加载的页面（或脚本）是第三方开发的，那么恶意第三方就有可能使用 Node.js 的内置模块伤害最终用户 。

    1.8K20

    如何技术地识别双十一的“骗”局

    技术选型： 区块链：Ethereum＋Truffle 桌面APP：Electron＋Metamask 爬虫工具：PhantomJS＋Casperjs 一、区块链开发 我们主要使用Truffle来进行区块链的开发...http://truffleframework.com/ 二、桌面APP开发 使用Electron作为一个APP壳，整合Metamask的chrom浏览器插件，使得可以APP可以访问以太坊。...Electron 让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。...https://electron.atom.io/ 相关的往期文章推荐： 开发笔记：基于Electon的图片采集工具 技能：Electron开发桌面级应用 Metamask 让你的浏览器可以使用以太坊...个人简单使用可以采用以下方案： CasperJS 一个开源的导航脚本处理和测试工具，基于PhantomJS（前端自动化测试工具）编写，在这里作为爬虫工具使用，用来监测商品。

    6K40

    electron+vue全家桶开发包含(心得，遇见的坑，解决办法等）

    git开源项目附上，需要的话就去git 吧 electron基础 （基础补习） 官方文档 什么是electron Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS...通常，您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。...通常，在主进程中运行的脚本控制应用程序的生命周期，并显示图形用户界面及其元素。 执行本机操作系统交互，并在网页中创建渲染程序。 Electron 应用程序只能有一个主流程。...主脚本可以如下所示： 1. const { app, BrowserWindow } = require('electron') 2. 3....这段代码说的是啥嘞 第1行：为了管理您应用程序的生命周期事件，以及创建和控制浏览器窗口，您从electron软件包导入了app 和 BrowserWindow模块 。

    2.1K10

    客户端开发（Electron）快速入门

    Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发...初始化项目： 初始化一个空项目，可以使用mkdir my-electron-app && cd my-electron-app并执行npm init，初始化的后要保证package中的字段...().length === 0) createWindow() }) }) 复制代码 ​ 脚本预加载 说明：脚本会在渲染器进行加载前执行，通过process对象获取chrome，node，electron...，并且我也会完善此次客户端学习的思维导图，后期复习就不再翻文档了。

    1.7K50

    nodeIntegrationInWorker | Electron 安全

    0x01 简介 我是在这篇文章测试过程中发现 Electron 20.0 ≠ sandbox:true 的，当时以为是官方弄错了，所以尝试跟官方沟通，等了一周多，但是官方一直没有给反馈，所以导致这篇文章比...我看我像是 Worker ，但是这里说的是 Web Worker Web Worker 是一项 HTML5 提出的技术，它允许在Web应用程序中创建后台线程，以实现JavaScript的多线程处理能力。...通过使用 Web Worker，开发者能够有效地解决JavaScript单线程环境下可能出现的性能瓶颈问题，确保即使在执行繁重任务时，Web应用仍能保持流畅的用户界面和良好的响应速度。...Web Worker 简介 一个 worker 是使用一个构造函数创建的一个对象（例如 Worker()）运行一个命名的 JavaScript 文件 这个文件包含将在 worker 线程中运行的代码;...特别注意 有趣的是，我们知道，sandbox 选项默认在 Electron 20.0 中开始默认为 true，但是经过我的测试，只有当 sandbox 被显式地设置为 true 时，才会阻止 Worker

    26310
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券