electron安装及快速创建
electron安装及快速创建
electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
详细内容见官网：https://www.electronjs.org/zh/docs/latest/。
今天来记录下练习中的安装过程和hello world的创建。
- 创建项目文件夹，并执行npm 初始化命令。
初始化过程中，会填写一些信息：entry point 应为 main.js，author 与 description 是打包是必填项。
npm init
- 将electron 依赖到项目中，由于官方地址出现网络问题，需要修改镜像地址。
创建文件.npmrc，并添加如下内容：
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
- 执行命令：
npm install electron --save-dev
- 确保package.json文件中有如下内容，用于后续启动项目：
{"scripts": {"start": "electron ."}
}
- 创建main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation:false}})// 加载 index.htmlmainWindow.loadFile('index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// 在 macOS 系统内, 如果没有已开启的应用窗口// 点击托盘图标时通常会重新创建一个新窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。
- 创建index.html
<!--index.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.<!--您也可以此进程中运行其他文件 --><script src="./renderer.js"></script></body>
</html>
- 创建preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})
- 执行启动命令看效果
npm start
- 打包，以下命令逐行执行后，会产生out文件夹，里面是打包文件。
npm install --save-dev @electron-forge/clinpx electron-forge importnpm run make
- 再记录下关于报错【Uncaught ReferenceError: require is not defined】的解决方法：（1）先确定main.js里new BrowserWindow的webPreferences里是否包含nodeIntegration: true和contextIsolation:false，如下代码。（2）如果没有效果，再加上执行命令npm install -g browserify。
const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation:false}})
相关文章：
electron安装及快速创建
electron安装及快速创建 electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 详细内容见官网：https://www.electronjs.org/zh/docs/latest/。 今天来记录下练习中的安装过程和hello world的创建。 创建项目文件夹，并执行npm 初始化命…...
需要消化的知识点
需要消化 消灭清单 如何自定义一个Interceptor拦截器？ 后端开发可以用上的前端技巧 10个堪称神器的 Java 学习网站. 【前端胖头鱼】11 chrome高级调试技巧，学会效率直接提升666% 【前端胖头鱼】10个我经常逛的“小网站” 【前端劝退师lv-6】Chrome D…...
2024年7月25日（Git gitlab以及分支管理 ）
分布式版本控制系统 一、Git概述 Git 是一种分布式版本控制系统,用于跟踪和管理代码的变更。它是由Linus Torvalds创建的,最 初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开 发人员之间进行协作。 Github 用的就是Git系统来管理它们的…...
pdf格式过大怎么样变小 pdf文件过大如何缩小上传 超实用的简单方法
面对体积庞大的 PDF 文件，我们常常需要寻找有效的方法来缩减其大小。这不仅能够优化存储空间，还能提升文件的传输和打开速度。PDF文件以其稳定性和跨平台兼容性成为工作和学习中的重要文件格式。然而，当我们需要通过邮件发送或上传大文件时&a…...
前端文件下载word乱码问题
记录一次word下载乱码问题： 用的请求是axios库，然后用Blob去接收二进制文件 思路：现在的解决办法有以下几种，看看是对应哪种，可以尝试解决 1.将响应类型设为blob，这也是最重要的，如果没有解决…...
repo中的default.xml文件project name为什么一样？
文章目录 default.xml文件介绍为什么 name 是一样的，path 不一样？总结 default.xml文件介绍 在 repo 工具的 default.xml 文件中，定义了多个 project 元素，每个元素都代表一个 Git 仓库。 XML 定义了多个不同的 project 元素&…...
＜section id=“nice“ data-tool=“mdnice编辑器“ data-webs
大模型日报 2024-07-24 大模型资讯 Meta发布最大Llama 3 AI模型，语言和数学能力提升 摘要: Meta公司发布了其迄今为止最大的Llama 3人工智能模型。该模型主要免费提供，具备多语言处理能力，并在语言和数学方面表现出显著提升。 Meta发布最强AI…...
作业7.26~28
全双工： 通信双方 既可以发送，也可以接收数据 1. 利用多线程 或者 多进程， 实现TCP服务器 和 客户端的全双工通信 思路： 服务器和客户端， 在建立通信以后，可以创建线程，在线程编写另一个功能代…...
自定义webIpad证件相机(webRTC)
该技术方案可用于各浏览器自定义相机开发 相机UI（index.html） <!DOCTYPE html> <html lang"zh" prew"-1"><head><meta charset"UTF-8"><meta name"viewport"content"user-sc…...
GO发票真伪批量查验方法、数电票查验接口
“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”，识别率高、识别速度快。 发票，是发生的成本、费用或收入的原始凭证。于公司来说，发票主要是公司做账的依据&…...
【Go系列】Go的UI框架Fyne
前言 总有人说Go语言是一门后端编程语言。 Go虽然能够很好地处理后端开发，但是者不代表它没有UI库，不能做GUI，我们一起来看看Go怎么来画UI吧。 正文 Go语言由于其简洁的语法、高效的性能和跨平台的编译能力，非常适合用于开发GUI…...
.NET MAUI：跨平台开发的未来
常用资源 （1）.NET MAUI8构建应用文档。 Build your first .NET MAUI app - .NET MAUI | Microsoft Learn 一、什么是 .NET MAUI？ .NET Multi-platform App UI (.NET MAUI) 是微软推出的一款跨平台开发框架。作为 Xamarin.Forms 的下一代产…...
VSCode切换默认终端
我的VSCode默认终端为PowerShell，每次新建都会自动打开PowerShell。但是我想让每次都变为cmd，也就是Command Prompt 更改默认终端的操作方法如下： 键盘调出命令面板（CtrlShiftP）中,输入Terminal: Select Default Prof…...
卫星观测叶绿素的相反信号
Contrasted Trends in Chlorophyll-a Satellite Products 运用卫星产品研究Chl的长时间序列变化时需要注意 Introduction （1）研究叶绿素的长期变化，需要至少40年的长时间序列； （2）Tian and Zhang 2023报告…...
2024年最新NVIDIA T4价格表及行业趋势！
英伟达（NVIDIA）作为目前全球T0级别的GPU制造商，其T4系列显卡以其卓越的计算性能和能效比，在数据中心、云计算及AI领域占据重要地位。 一、NVIDIA T4价格表概览 在探讨NVIDIA T4显卡的价格时，我们需要从直接购买和租赁…...
HTML + CSS编程规范
编程规范 HTML CSS 命名规范 HTML CSS 命名规范 1. 命名需要是具备语义性的单词，不能用 数字 拼音 数字,符号开头正确示范 ： wrap description title content错误示范 : aaaa a1 $we 4tdds 2. 命名需要多个单词连接的情况下, 标记语言中可以使用 …...
机器学习之人脸识别-使用 scikit-learn 和人工神经网络进行高效人脸识别
文章摘要 本文将介绍如何使用 Python 的 scikit-learn 库和人工神经网络（ANN）来识别人脸。我们将使用 LFW 数据集（Labeled Faces in the Wild），这是一个广泛用于人脸识别基准测试的大型人脸数据库。我们将展示如何准备…...
【虚拟化】KVM概念和架构
目录 一、什么是KVM？ 二、KVM的功能 2.1 主要的功能 2.2 其它功能 三、KVM核心组件及作用 四、KVM与VMware的优势 五、KVM架构 六、qemu介绍 七、创建虚拟机流程 一、什么是KVM？ Kernel-based Virtual Machine的简称，KVM 是基于虚拟…...
【Linux】权限2
Linux文件要被执行满足两个条件: ①必须要具备可执行权限 x ②真的是一个可执行程序 1.权限的修改,文件强行给别人 权限就是拦住一批人,不让他做特定的一件事情 a.更改人,更改文件所隶属的人 如果把文件强行给别人, chown xxx(普通用户) xxx(文件名) 会出现下面的情况 很明显…...
汽车长翅膀：GPU 是如何加速深度学习模型的训练和推理过程的？
编者按：深度学习的飞速发展离不开硬件技术的突破，而 GPU 的崛起无疑是其中最大的推力之一。但你是否曾好奇过，为何一行简单的“.to(‘cuda’)”代码就能让模型的训练速度突飞猛进？本文正是为解答这个疑问而作。 作者以独特的视角&…...
2025届必备的六大AI科研方案推荐
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 从文本特征着手，才能降低人工智能生成内容被检出的概率。首先，要融入…...
突破性APK安装器：在Windows上高效运行Android应用的革命性方案
突破性APK安装器：在Windows上高效运行Android应用的革命性方案 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否渴望在Windows电脑上无缝运行Android应…...
利用Taotoken的多模型能力为AIGC应用构建弹性后备方案
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 利用Taotoken的多模型能力为AIGC应用构建弹性后备方案 对于开发图像生成、文案创作等AIGC应用的团队而言，服务连续性至…...
革命性Figma中文插件：智能汉化让设计界面秒变母语
革命性Figma中文插件：智能汉化让设计界面秒变母语 【免费下载链接】figmaCN 中文 Figma 插件，设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 还在为Figma的英文界面而烦恼吗？FigmaCN是一款专为中文用户打造…...
Gemini插件无法访问本地PDF/网页源码？手把手教你绕过Chrome沙箱限制（含Manifest V3兼容性补丁代码）
更多请点击： https://intelliparadigm.com 第一章：Gemini插件本地资源访问受限的本质原因 沙箱隔离机制的强制约束 Gemini 插件运行于 Chromium 扩展沙箱环境中，该环境默认禁用所有 Node.js API（如 fs、 child_process…...
【Arcgis实战技巧】巧用DOM目视解译，从DSM中精准“挖”出地面高程点
1. 为什么需要从DSM中提取地面高程点？ 在测绘和地理信息领域，数字表面模型（DSM）记录了地表所有物体的顶部高程信息，包括建筑物、树木、电线杆等。但很多时候我们需要的是数字高程模型（DEM）&…...
深入解析BaiduNetdiskPlugin-macOS：逆向工程破解百度网盘速度限制的技术实践
深入解析BaiduNetdiskPlugin-macOS：逆向工程破解百度网盘速度限制的技术实践 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 在macOS平台上…...
泛微OA ecology 9实战：手把手教你写一个能取表单数据的Java自定义接口
泛微OA Ecology 9深度开发：构建高效表单数据交互的Java接口实践 在当今企业数字化转型浪潮中，办公自动化系统(OA)作为核心支撑平台，其灵活性和扩展性直接影响着企业运营效率。泛微OA Ecology 9作为国内领先的协同办公平台，提供了丰…...
AI系统合规性故障模式解析：从公平性、隐私到可解释性的工程实践
1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目，叫“AI-Compliance-Failure-Patterns”。光看名字，你大概能猜到它和AI的合规性有关，但具体是做什么的，可能还有点模糊。简单来说，这个项目就像一本针对AI系…...
从IMU到GPS：手把手教你用ESKF实现机器人定位（附代码避坑指南）
从IMU到GPS：手把手教你用ESKF实现机器人定位（附代码避坑指南） 在机器人定位领域，误差状态卡尔曼滤波（Error-State Kalman Filter, ESKF）正逐渐成为处理IMU和GPS数据融合的主流方法。本文将带您深入理解ESK…...