认识Electron 开启新的探索世界一

news2025/2/10 9:08:04

一、Electron轻松入门

        1.搭建开发环境:

        一般情况下开发者会使用node.js来创建electron项目,node.js是一个基于Chrome V8引擎的javascript运行环境,所以首先需要到官网去下载安装node.js

          下载链接:https://nodejs.org/enhttps://nodejs.org/en

        另外,需要使用yarn依赖包管理工具,安装命令:npm  install  -g  yarn

        接下来,我们创建第一个electron应用,先创建一个目录,再次目录下打开命令行,执行如下命令创建第一个node.js项目:yarn  init

        上述命令执行完成后,会有一系列提示,要求用户输入项目名称、项目版本等信息。之后项目创建完成之后,在该目录下会生成一个package.json文件,该文件为为该项目的配置文件

        2.安装electron依赖包:

        国内用户一般在阿里巴巴搭建好的electron的镜像网站:                   https://npm.taobao.org/mirrors/electronhttps://npm.taobao.org/mirrors/electron     

         

然后设置指令:yarn  config  set  ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron

        之后环境变量设置号之后还需要在命令行中执行以下命令来安装electron:

        yarn add electron  --dev  --platform=win64

        3.安装成功之后,项目目录下会增加一个node_modules子目录,在该目录下存放着项目运行时依赖的node.js包

        4.为了可以使用electron依赖包,可以在package.jsopn中增加一个script配置;

        "script" : { "start" : "electron  ./index.js" }

        上述自定义脚本,代表我们可以使用yarn start使用electron来启动本项目

二、创建窗口界面

        1.在项目的根目录下新建index.html文件

        2.启动窗口:在项目的根目录下创建index.js文件

        其中app代表整个应用,通过它可以获取应用程序生命周期中的各个事件。我们在app的ready事件中创建窗口并且把窗口对象交给一个全局引用,这样做的目的是不让javascript执行引擎在垃圾回收时回收这个窗口对象

        在创建窗口时,我们传入了配置对象 webPreferences: {nodeIntergration: true},此配置对象告诉electron需要为页面集成node.js环境并赋予index.html页面中的javascript访问node.js的能力

        窗口创建完成后,窗口加载了index.html

        在窗口关闭时,将这个win全局置为空,所有的窗口关闭即可以退出app

        执行yarn start 后,窗口成功启动                ​​​​​​​             

三、引用javascript

        1.electron给index.js提供了完整的node.js环境的访问能力,index.js可以像所有node.js程序一样,通过require引入其他的js文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2295721.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每日一题洛谷P5733 【深基6.例1】自动修正c++

#include<iostream> #include<string> using namespace std; int main() {string t;cin >> t;for (int i 0; i < t.length(); i){if (t[i] > a && t[i] < z){t[i] A - a;}cout << t[i];}return 0; }

分组加密算法CLEFIA

目录 (1)加密算法 轮函数 F函数 线性变换 (2)解密算法 (3)密钥扩展算法 分组加密算法CLEFIA CLEFIA分组密码算法由日本Sony(索尼)公司设计开发,接口对应于128比特分组密码技术例如ISO/IEC18033-3国际标准和高级加密标准(AES)。算法的分组长度是128比特,密钥长度…

网络安全--边界安全

现在人们生活依赖互联网程度越来越高&#xff0c;网络安全也逐步进入人们日常视野&#xff0c;信用卡信息泄漏、开房记录被查询、商业机密泄漏等等&#xff1b;无不牵动着一个人、一个公司、甚至一个国家的神经。随着技术的发展&#xff0c;网络边界变得也越来越复杂&#xff0…

2.攻防世界 backup

题目描述中提示&#xff0c;备份文件 进入题目页面如下 通用备份文件后缀名 .bak&#xff1a;这是最常见的备份文件后缀名之一&#xff0c;表示某个文件的备份版本。 .old&#xff1a;表示文件的旧版本或备份&#xff0c;通常用于系统更新时保存旧文件。 .backup&#xff1a;…

如何在Windows上使用Docker

引言 WSL2&#xff08;Windows Subsystem for Linux2&#xff09;是微软开发的一种技术&#xff0c;允许在 Windows 操作系统上运行 Linux 环境。它提供了一个兼容层&#xff0c;使得用户可以在 Windows 系统中直接运行 Linux 命令行工具、应用程序和开发工具&#xff0c;而无需…

气体控制器联动风机,检测到环境出现异常时自动打开风机进行排风;

一、功能&#xff1a;检测到环境出现异常时自动打开风机进行排风&#xff1b; 二、设备&#xff1a; 1.气体控制器主机&#xff1a;温湿度&#xff0c;TVOC等探头的主机&#xff0c;可上报数据&#xff0c;探头监测到异常时&#xff0c;主机会监测到异常可联动风机或声光报警…

c++ haru生成pdf输出饼图

#define PI 3.14159265358979323846 // 绘制饼图的函数 void draw_pie_chart(HPDF_Doc pdf, HPDF_Page page, float *data, int data_count, float x, float y, float radius) { float total 0; int i; // 计算数据总和 for (i 0; i < data_count; i) { tot…

[权限提升] Linux 提权 维持 — 系统错误配置提权 - 通配符(ws)注入提权

关注这个专栏的其他相关笔记&#xff1a;[内网安全] 内网渗透 - 学习手册-CSDN博客 0x01&#xff1a;通配符&#xff08;ws&#xff09;注入提权原理 通配符注入提权的核心是利用通配符的扩展特性&#xff0c;在命令执行时生成意外的参数或文件名&#xff0c;从而改变命令的行…

C++,STL容器 set/multiset:集合/多重集合深入解析

文章目录 一、容器概览二、核心特性对比三、基础操作详解四、关键成员函数解析五、底层实现探秘六、性能优化实践七、典型应用场景数据去重统计实时排行榜维护区间查询系统八、注意事项与陷阱元素不可变性自定义类型的比较函数迭代器失效问题进阶技巧:结合STL算法十、总结与选…

Neo4j图数据库学习(二)——SpringBoot整合Neo4j

一. 前言 本文介绍如何通过SpringBoot整合Neo4j的方式&#xff0c;对图数据库进行简单的操作。 Neo4j和SpringBoot的知识不再赘述。关于Neo4j的基础知识&#xff0c;有兴趣可以看看作者上一篇的文章&#xff1a;Neo4j图数据库学习(一)——初识CQL 二. 前置准备 新建SpringBo…

使用AI Agents集成外部API开发智能客服解决方案(上)

生成式AI的出现已经彻底改变了传统客服&#xff0c;为开发者和企业提供了更快速、更准确、更个性化的响应能力。其中由大语言模型&#xff08;LLM&#xff09;驱动的AI代理能够分析复杂的客户咨询&#xff0c;访问多个数据源&#xff0c;并提供相关的详细答案。在本文中&#x…

2025手机电池技术革新,

具有AlN势垒和AlGaN背势垒的硅基GaN HEMT在电池兼容电压下提供突破性的输出功率 新加坡的一个工程师团队声称&#xff0c;他们通过研究低压硅基GaN HEMT的双异质结构设计的潜力&#xff0c;开辟了新的天地。 这些研究人员认为&#xff0c;这类晶体管是5G频率范围2频段功率 具…

Linux系统-centos防火墙firewalld详解

Linux系统-centos7.6 防火墙firewalld详解 1 firewalld了解 CentOS 7.6默认的防火墙管理工具是firewalld&#xff0c;它取代了之前的iptables防火墙。firewalld属于典型的包过滤防火墙或称之为网络层防火墙&#xff0c;与iptables一样&#xff0c;都是用来管理防火墙的工具&a…

Unity3D仿星露谷物语开发28之切换场景

1、目标 Player可以在Scene1_Farm和Scene2_Field之间自动切换。通过Trigger实现该功能。同时创建一个预设体绑定该功能&#xff0c;这样可以把预设体放到任何场景中&#xff0c;通过配置即可实现Player在Scene之间的自由切换。 2、创建场景切换的工具对象 在Hierarchy中&…

阿里通义实验室提出AnyStory:开启个性化文本到图像生成的新篇章!

在这个数字化时代&#xff0c;生成式AI技术正以前所未有的速度改变着我们的创作方式。近期&#xff0c;阿里通义实验室发表了一篇题为《AnyStory: Towards Unified Single and Multi-Subject Personalization in Text-to-Image Generation》的论文&#xff0c;该论文提出了一种…

开启蓝耘之旅:DeepSeek R1 模型在智算平台的起步教程

----------------------------------------------------------我的个人主页-------------------- 动动你的手指----------------------------------------点赞&#x1f44d; 收藏❤--------------------------------------------------------------- 引言 在深度学习的广袤领…

ISAAC Sim 1.1. Isaac Sim 4.2.0 环境配置

我使用的系统是ubuntu20.04&#xff0c;根据推荐使用Binary installation 1.下载和安装 1.1. Isaac Sim 参照Installation using Isaac Sim Binaries — Isaac Lab Documentation完成ISAAC SIM安装。 1.2. Isaac Lab “Isaac Lab 提供您需要的工具&#xff0c;以便您根据项…

活动预告 | Power Hour: Copilot 引领商业应用的未来

课程介绍 智能化时代&#xff0c;商业应用如何实现突破&#xff1f;微软全球副总裁 Charles Lamanna 将为您深度解析&#xff0c;剖析其中关键因素。 在本次线上研讨会中&#xff0c;Charles Lamanna 将分享他在增强商业运营方面的独到见解与实战策略&#xff0c;深度解读商业…

Gemini 2.0模型更新:谷歌最新AI大模型全面开启智能时代

引言 2025年2月5日&#xff0c;谷歌人工智能实验室&#xff08;Google DeepMind&#xff09;发布了最新的Gemini 2.0模型系列更新&#xff0c;包括2.0 Flash、Flash-Lite和Pro实验版本。这些AI大模型的发布标志着人工智能技术在性能、效率和多模态能力上的进一步突破&#xff…

前端布局与交互实现技巧

前端布局与交互实现技巧 1. 保持盒子在中间位置 在网页设计中&#xff0c;经常需要将某个元素居中显示。以下是一种常见的实现方式&#xff1a; HTML 结构 <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><m…