1.electron之纯原生js/jquery的桌面应用程序(基础篇)

news2024/9/24 13:25:46

如果可以实现记得点赞分享,谢谢老铁~

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

一.准备工作

1.确保已在您的开发环境中安装了 Node.js 和 npm(Node.js 包管理器)。

2.创建一个新的文件夹(js_demo),进入该文件夹,并在命令行中运行以下命令,以初始化一个新的 Node.js 项目:

npm init -y

3.然后,在项目文件夹中安装 Electron 依赖:

npm install electron

二.创建文件

4.在项目文件夹中创建一个新的 index.js 文件,将以下代码复制到该文件中:

const { app, BrowserWindow } = require('electron');
const path = require('path');


function createWindow() {
    // 创建一个新的浏览器窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加载 index.html 文件
    win.loadFile(path.join(__dirname, 'index.html'));

    // 打开开发者工具
    win.webContents.openDevTools();
}

// 当 Electron 初始化完成并准备创建浏览器窗口时调用
app.whenReady().then(createWindow);

// 当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 在 macOS 上,单击应用程序的 dock 图标并且没有其他窗口打开时,重新创建一个窗口
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

5.在项目文件夹中创建一个新的 index.html 文件,并将以下代码复制到该文件中:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
</head>
<body>
  <button id="myButton">点击我</button>
  <script src="index.js"inde></script> <!-- 添加对 index.js 文件的引用 -->
  <script>
    // 获取按钮元素
    var button = document.getElementById('myButton');

    // 添加点击事件处理程序
    button.addEventListener('click', function() {
      alert('按钮被点击了!');
    });
  </script>

</body>
</html>
三.运行

6.最后,在命令行中运行以下命令以启动 Electron 应用程序:

npx electron .

这将启动 Electron 应用程序并显示一个桌面窗口,其中包含一个按钮。当按钮被点击时,会弹出一个框。

这里的目录结构目前是:
在这里插入图片描述

四.目录及效果

这里是效果图:
在这里插入图片描述

到这里呢,你就成功的运行起来一个简单的桌面应用程序了。
但你肯定有个疑问,怎么没有生成一个桌面应用呢?

请看下一篇 electron之纯原生js/jquery的桌面应用程序(应用生成)

收工!老铁们先点赞收藏呗~

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

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

相关文章

linux离线安装libreoffice

安装步骤 1.安装JAVA环境jdk 2.下载离线安装包libreoffice 3.安装libreoffice 4.配置字体防止乱码 1.安装JAVA环境JDK 这个网上自己搜下&#xff0c;资料漫天飞 2.下载libreoffice离线安装包 下载地址 Download LibreOffice | LibreOffice - Free Office Suite - B…

Redis第1讲——入门简介

Java并发编程的总结和学习算是告一段落了&#xff0c;这段时间思来想去&#xff0c;还是决定把Redis再巩固和学习一下。毕竟Redis不论是在面试还是实际应用中都是极其重要的&#xff0c;在面试中诸如Redis的缓存问题、热key、大key、过期策略、持久化机制等&#xff1b;还有在实…

Windows11安装python模块transformers报错Long Path处理

Windows11安装python模块transformers报错&#xff0c;报错信息如下 ERROR: Could not install packages due to an OSError: [Errno 2] No such file or directory: C:\\Users\\27467\\AppData\\Local\\Packages\\PythonSoftwareFoundation.Python.3.11_qbz5n2kfra8p0\\Local…

CSS文本样式(详解)

CSS文本样式 &#x1f367; 文本颜色&#x1f9c1;文本缩进&#x1f368;文本对齐&#x1f365;文本行高&#x1f95d;文本装饰 &#x1f367; 文本颜色 属性&#xff1a;color 作用&#xff1a;设置文本颜色 属性值&#xff1a; 颜色表示方式表示含义属性值颜色名称预定义的…

matplotlib如何在label中加入字符并换行【已解决】

最近在跑一个超参数的实验&#xff0c;但是发现x轴的刻度就很丑 显然&#xff0c;lr和theta在一行显得很冗余 这个是此时的label x_labels [$\t{lr0.05}\ \tθ10}$, 40, 60] 正常加换行符即可&#xff0c;但是要加上$$ x_labels [$\t{lr0.05}\ $\n$ \tθ10}$, 40, 60] 大…

基于ssm游戏美术外包管理信息系统源码和论文

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;线下管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&…

Python数据科学视频讲解:Python集合

2.14 Python集合 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解2.14节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括数据科学应用…

dcoker-compose一键部署EFAK —— 筑梦之路

简介 EFAK&#xff08;Eagle For Apache Kafka&#xff0c;以前称为 Kafka Eagle&#xff09;是一款由国内公司开源的Kafka集群监控系统&#xff0c;可以用来监视kafka集群的broker状态、Topic信息、IO、内存、consumer线程、偏移量等信息&#xff0c;并进行可视化图表展示。独…

Dockerfile:创建镜像,创建自定义的镜像。

Docker的创建镜像的方式&#xff1a; 基于已有镜像进行创建。 根据官方提供的镜像源&#xff0c;创建镜像&#xff0c;然后拉起容器。是一个白板&#xff0c;只能提供基础的功能&#xff0c;扩展性的功能还是需要自己定义&#xff08;进入容器进行操作&#xff09; 基于模板进…

VSCode配置代码片段,提升效率必备!

1.点击文件—> 首选项------>配置用户代码片段 2、新建用户代码片段 3、以js的控制台输出为例 {//片段名称"console.log": {"prefix": "cls",//呼出命令"body": ["console.log($1)"//具体片段],"descriptio…

下午好~ 我的论文(速读)(第一期)

写在前面&#xff1a;下午浑浑噩噩&#xff0c;泡杯茶&#xff0c;读篇论文吧 首先说明&#xff0c;时间有限没有那么精力一一回复了&#xff0c;对不起各位了TAT 文章目录 遥感Bi-Dilation-formerCNN-GNN-FusionMulti-hierarchical cross transformerCoupled CNNs YOLO系列v1…

DHCP最全讲解!(原理+配置)

一、概述 随着网络规模的不断扩大&#xff0c;网络复杂度不断提升&#xff0c;网络中的终端设备例如主机、手机、平板等&#xff0c;位置经常变化。终端设备访问网络时需要配置IP地址、网关地址、DNS服务器地址等。采用手工方式为终端配置这些参数非常低效且不够灵活。IETF于19…

【Vulnhub 靶场】【VulnCMS: 1】【简单】【20210613】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/vulncms-1,710/ 靶场下载&#xff1a;https://download.vulnhub.com/vulncms/VulnCMS.ova 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年06月13日 文件大小&#xff1a;1.4 GB 靶场作者&#xff1a;to…

有这么多木材类型,为什么偏要使用橡木来制作发酵桶呢?

纵观历史&#xff0c;制作发酵桶有很多木材类型&#xff0c;包括栗子、松木、红木和金合欢&#xff0c;被用于制作酿酒容器&#xff0c;特别是大型发酵桶。栗子单宁含量很高&#xff0c;作为储物桶太多孔&#xff0c;必须涂上石蜡&#xff0c;以防止因蒸发而过度失去葡萄酒。红…

connect: Network is unreachable问题解决

第一步&#xff1a;查看ifcfg-ens33配置文件 cd /etc/sysconfig/network-scripts/ cat ifcfg-ens33 发现问题&#xff1a;GATEWAY写错成GATWAY 第二步&#xff1a;修改 vim ifcfg-ens33 第三步&#xff1a;检测是否成功 ping baidu.com 成功&#xff01;

数据分析基础之《numpy(3)—基本操作》

一、基本操作 1、adarray.方法() 2、np.函数名() 二、生成数组的方法 1、生成0和1的数组 为什么需要生成0和1的数组&#xff1f; 我们需要占用位置&#xff0c;或者生成一个空的数组 &#xff08;1&#xff09;ones(shape[, dtype, order]) 生成一组1 shape&#xff1a;形…

算法:二叉树的遍历

一、31种遍历方法 (1)先序法&#xff08;又称先根法&#xff09; 先序遍历&#xff1a;根&#xff0c;左子树&#xff0c;右子树 遍历的结果&#xff1a;A&#xff0c;B&#xff0c;C 遍历的足迹&#xff1a;沿途经过各结点的“左部” (2)中序法&#xff08;又称中根法&#…

基于Java的教学信息反馈系统设计与实现(源码+调试)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。今天给大家介绍一篇基于Java的教学信息反馈…

ffmpeg可以做什么

用途 FFmpeg是一个功能强大的多媒体处理工具&#xff0c;可以处理音频和视频文件。它是一个开源项目&#xff0c;可在各种操作系统上运行&#xff0c;包括Linux、Windows和Mac OS X等。以下是FFmpeg可以做的一些主要任务&#xff1a; 转换媒体格式&#xff1a;可将一个媒体格式…

大创项目推荐 深度学习 python opencv 动物识别与检测

文章目录 0 前言1 深度学习实现动物识别与检测2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存…