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

一、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.mzph.cn/news/895110.shtml

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

相关文章

MySQL下载过程

MySQL Enterprise Edition Downloads | Oracle mysql官方下载网址(9.2版本) 下面的示例是5.7的包,过程是一样的 port:3308(默认的是3306,笔者下了一个占用了该端口) root:123456 问题…

【学术投稿】第五届计算机网络安全与软件工程(CNSSE 2025)

重要信息 官网:www.cnsse.org 时间:2025年2月21-23日 地点:中国-青岛 简介 第五届计算机网络安全与软件工程(CNSSE 2025)将于2025年2月21-23日在中国-青岛举行。CNSSE 2025专注于计算机网络安全、软件工程、信号处…

Qt:QWidget核心属性

目录 QWidget核心属性 enab geometry WindowFrame的影响 windowTitle windowIcon qrc文件管理资源 windowOpacity cursor font toolTip focusPolicy styleSheet QWidget核心属性 在Qt中使用QWidget类表示"控件",如按钮、视图、输入框、滚动…

Linux TCP 编程详解与实例

一、引言 在网络编程的领域中,TCP(Transmission Control Protocol)协议因其可靠的数据传输特性而被广泛应用。在 Linux 环境下,使用 C 或 C 进行 TCP 编程可以实现各种强大的网络应用。本文将深入探讨 Linux TCP 编程的各个方面&…

论文笔记:Rethinking Graph Neural Networks for Anomaly Detection

目录 摘要 “右移”现象 beta分布及其小波 实验 《Rethinking Graph Neural Networks for Anomaly Detection》,这是一篇关于图(graph)上异常节点诊断的论文。 论文出处:ICML 2022 论文地址:Rethinking Graph Ne…

神经网络常见激活函数 6-RReLU函数

文章目录 RReLU函数导函数函数和导函数图像优缺点pytorch中的RReLU函数tensorflow 中的RReLU函数 RReLU 随机修正线性单元&#xff1a;Randomized Leaky ReLU 函数导函数 RReLU函数 R R e L U { x x ≥ 0 a x x < 0 \rm RReLU \left\{ \begin{array}{} x \quad x \ge 0…

Vue(6)

一.路由板块封装 &#xff08;1&#xff09;路由的封装抽离 目标&#xff1a;将路由板块抽离出来 好处&#xff1a;拆分板块&#xff0c;利于维护 // 路由的使用步骤 5 2 // 5个基础步骤 // 1. 下载 v3.6.5 // 2. 引入 // 3. 安装注册 Vue.use(Vue插件) // 4. 创建路由对象…

【python】matplotlib(animation)

文章目录 1、matplotlib.animation1.1、FuncAnimation1.2、修改 matplotlib 背景 2、matplotlib imageio2.1、折线图2.2、条形图2.3、散点图 3、参考 1、matplotlib.animation 1.1、FuncAnimation matplotlib.animation.FuncAnimation 是 Matplotlib 库中用于创建动画的一个…

【东莞常平】戴尔R710服务器不开机维修分享

1&#xff1a;2025-02-06一位老客户的朋友刚开工公司ERP服务器一台戴尔老服务器故障无法开机&#xff0c;于是经老客户介绍找到我们。 2&#xff1a;服务器型号是DELL PowerEdge R710 这个服务器至少也有15年以上的使用年限了。 3&#xff1a;客户反馈的故障问题为&#xff1a;…

Spring AI -使用Spring快速开发ChatGPT应用

前言 Spring在Java生态中一直占据大半江山。最近我发现Spring社区推出了一个Spring AI项目&#xff0c;目前该项目还属于Spring实验性项目&#xff0c;但是我们可以通过该项目&#xff0c;可以非常快速的开发出GPT对话应用。 本篇文章将会对SpringAI进行简单的介绍和使用&#…

经典排序算法复习----C语言

经典排序算法复习 分类 交换类 冒泡快排 分配类 计数排序基数排序 选择类 选择排序 堆排序 归并类 归并排序 插入类 直接插入排序 希尔排序 折半插入排序 冒泡排序 基于交换。每一轮找最大值放到数组尾部 //冒泡排序 void bubSort(int* arr,int size){bool sorte…

BFS解决拓扑排序(3题)

目录 拓扑排序 1.如何排序&#xff1f; 2.如何形成拓扑排序 3.如何建图 1.看数据稠密度 2. 根据算法流程灵活建图 1.课程表 2.课程表2 3.火星词典 拓扑排序 找到做事情的先后顺序&#xff0c;拓扑排序的结果可能不是唯一的 1.如何排序&#xff1f; 1.找出图中入度为…

kafka 3.5.0 raft协议安装

前言 最近做项目&#xff0c;需要使用kafka进行通信&#xff0c;且只能使用kafka&#xff0c;笔者没有测试集群&#xff0c;就自己搭建了kafka集群&#xff0c;实际上笔者在很早之前就搭建了&#xff0c;因为当时还是zookeeper&#xff08;简称ZK&#xff09;注册元数据&#…

Unity项目接入xLua的一种流程

1. 导入xlua 首先导入xlua&#xff0c;这个不用多说 2. 编写C#和Lua交互脚本 基础版本&#xff0c;即xlua自带的版本 using System.Collections; using System.Collections.Generic; using UnityEngine; using XLua; using System; using System.IO;[Serializable] public…

四次挥手详解

文章目录 一、四次挥手各状态FIN_WAIT_1CLOSE_WAITFIN_WAIT_2LAST_ACKTIME_WAITCLOSE 二、双方同时调用close()&#xff0c;FIN_WAIT_1状态后进入CLOSING状态CLOSING状态 三、TIME_WAIT状态详解(1) TIME_WAIT状态下的2MSL是什么MSL &#xff08;报文最大生存时间&#xff09;为…

【嵌入式 Linux 音视频+ AI 实战项目】瑞芯微 Rockchip 系列 RK3588-基于深度学习的人脸门禁+ IPC 智能安防监控系统

前言 本文主要介绍我最近开发的一个个人实战项目&#xff0c;“基于深度学习的人脸门禁 IPC 智能安防监控系统”&#xff0c;全程满帧流畅运行。这个项目我目前全网搜了一圈&#xff0c;还没发现有相关类型的开源项目。这个项目只要稍微改进下&#xff0c;就可以变成市面上目前…

java: framework from BLL、DAL、IDAL、MODEL、Factory using oracle

oracel 21c sql: -- 创建 School 表 CREATE TABLE School (SchoolId CHAR(5) NOT NULL,SchoolName NVARCHAR2(500) NOT NULL,SchoolTelNo VARCHAR2(8) NULL,PRIMARY KEY (SchoolId) );CREATE OR REPLACE PROCEDURE addschool(p_school_id IN CHAR,p_school_name IN NVARCHAR2,p…

1.攻防世界 baby_web

题目描述这里有提示&#xff0c;初始页面 进入题目页面如下 很简洁的页面只有一行HELLO WORLD ctrlu查看了源码也没有信息 用burp suite抓包&#xff0c;并发送到重放器 根据提示&#xff08;初始页面&#xff09;修改访问index.php文件 index.php index.php 是一种常见的…

什么是三层交换技术?与二层有什么区别?

什么是三层交换技术&#xff1f;让你的网络飞起来&#xff01; 一. 什么是三层交换技术&#xff1f;二. 工作原理三. 优点四. 应用场景五. 总结 前言 点个免费的赞和关注&#xff0c;有错误的地方请指出&#xff0c;看个人主页有惊喜。 作者&#xff1a;神的孩子都在歌唱 大家好…

【机器学习】数据预处理之数据归一化

数据预处理之数据归一化 一、摘要二、数据归一化概念三、数据归一化实现方法3.1 最值归一化方法3.2 均值方差归一化方法 一、摘要 本文主要讲述了数据归一化&#xff08;Feature Scaling&#xff09;的重要性及其方法。首先通过肿瘤大小和发现时间的例子&#xff0c;说明了不同…