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’)”代码就能让模型的训练速度突飞猛进？本文正是为解答这个疑问而作。 作者以独特的视角&…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
Spring Boot + MyBatis 集成支付宝支付流程
Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例（电脑网站支付） 1. 添加依赖 <!…...
【java】【服务器】线程上下文丢失 是指什么
目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失？ 直观示例说明 为什么上下文如此重要？ 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程，代码应该如何实现 推荐方案：使用 ManagedE…...
el-amap-bezier-curve运用及线弧度设置
文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件，用于在 高德地图 上绘制贝塞尔曲线。 基本用法属性path定义曲线的路径，可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...
Shell 解释器 bash 和 dash 区别
bash 和 dash 都是 Unix/Linux 系统中的 Shell 解释器，但它们在功能、语法和性能上有显著区别。以下是它们的详细对比： 1. 基本区别 特性bash (Bourne-Again SHell)dash (Debian Almquist SHell)来源G…...
【JavaEE】万字详解HTTP协议
HTTP是什么？-----互联网的“快递小哥” 想象我们正在网上购物：打开淘宝APP，搜索“蓝牙耳机”，点击商品图片，然后下单付款。这一系列操作背后，其实有一个看不见的“快递小哥”在帮我们传递信息，…...
dvwa11——XSS(Reflected)
LOW 分析源码：无过滤 和上一关一样，这一关在输入框内输入，成功回显 <script>alert(relee);</script> MEDIUM 分析源码，是把<script>替换成了空格，但没有禁用大写 改大写即可，注意函数…...