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

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

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.hqwc.cn/news/282232.html

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

相关文章

技术分享 | 接口测试价值与体系

如果把测试简单分为两类&#xff0c;那么就是客户端测试和服务端测试。移动端的测试包括 UI 测试&#xff0c;兼容性测试等&#xff0c;服务端测试包括接口测试。接口测试检查数据的交换、传递和控制管理过程。它绕过了客户端&#xff0c;直接对服务端进行测试。 接口测试的价值…

实验报告九、使用枚举法验证6174猜想

一、实验目的&#xff1a; 1、了解6174猜想的内容。 2、熟练使用选择结构和循环结构。 3、了解标准库itertools中combinations()函数的用法。 4、熟练使用字符串的join&#xff08;方法。 5、熟练使用内置函数int()、str()、 sorted()。 二、实验内容&#xff1a; 1955…

【XR806开发板试用】+2.鸿蒙内核

非常感谢基于安谋科技STAR-MC1的全志XR806 Wi-FiBLE开源鸿蒙开发板试用活动&#xff01;非常感谢极术社区&#xff01;非常感谢极术小姐姐&#xff01;非常感谢全志在线开发者社区&#xff01;非常感谢通过试用申请&#xff01;非常感谢安谋科技&#xff01; 接上一篇&#xff…

视频数据卡设计方案:120-基于PCIe的视频数据卡

一、产品概述 基于PCIe的一款视频数据收发卡&#xff0c;并通过PCIe传输到存储计算服务器&#xff0c;实现信号的采集、分析、模拟输出&#xff0c;存储。 产品固化FPGA逻辑&#xff0c;实现PCIe的连续采集&#xff0c;单次采集容量2GB&#xff0c;开源的PCIe QT客…

交叉熵在机器学习里做损失的意义

交叉熵是机器学习中常用的损失函数之一&#xff0c;特别适用于分类任务。其背后的核心思想是衡量两个概率分布之间的差异。在分类问题中&#xff0c;通常有一个真实分布&#xff08;ground truth distribution&#xff09;和一个模型预测的分布&#xff08;predicted distribut…

信号与线性系统预备训练3——MATLAB软件在信号与系统中的应用初步

信号与线性系统预备训练3——MATLAB软件在信号与系统中的应用初步 The Preparatory training3 of Signals and Linear Systems 对应教材&#xff1a;《信号与线性系统分析&#xff08;第五版&#xff09;》高等教育出版社&#xff0c;吴大正著 一、目的 1.熟悉和回顾MATLAB…

Java实现对图片压缩指定大小。比如1260*945。如果图片尺寸大于,就压缩。小于,就拉伸到指定大小

需求&#xff1a; Java实现对图片压缩指定大小。比如1260*945。如果图片尺寸大于&#xff0c;就压缩。小于&#xff0c;就拉伸到指定大小 代码实现&#xff1a; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.F…

SpringIOC之作用域Scope

博主介绍:✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作品:《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+…

21--集合小案例

案例--图书管理系统 1.创建实体类Book package com.work.pojo; /** *Author: 憨憨浩浩 *CreateTime: 2023-12-16 17:27 *Description: Book实体类 */ public class Book {private int id; // 编号private String name; // 图书名称private String author;…

〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…

人工智能优化问题的探索与创新

导言 人工智能优化问题一直是研究和应用领域的关键挑战。人工智能优化问题的发展在各个领域取得了显著进展&#xff0c;但伴随着技术的提升也带来了一些潜在的弊端。本文将深入研究人工智能在解决优化问题方面的突破、算法原理以及在实际应用中的表现。 1. 优化问题的背景与复…

【Linux】在vim中批量注释与批量取消注释

在vim编辑器中&#xff0c;批量注释和取消注释的操作可以通过进入V-BLOCK模式、选择要注释或取消注释的内容、输入注释符号或选中已有的注释符号和按键完成。这些操作可以大大提高代码或文本的编写和修改效率&#xff0c;是vim编辑器中常用的操作之一。 1.在vim中批量注释的步…