01_electron入门

由于毕业论文可能需要用 electron,所以 Linux 驱动学习慢了下来。

一、安装 node.js

  进入 node.js 官网:Node.js (nodejs.org)

  咱们就是用稳定版,安装包除了安装路径自己选择外,一直点 Next。

  安装完成后需要配置环境,推荐看这篇文章:Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客

  一切完成后,按下 WIN+R,输入cmd,进入终端。输入以下命令,成功后会出现版本号:

二、electron 环境搭建

  首先创建一个文件夹,你喜欢创建哪都可以,但是路径必须为全英文。

  首先打开 Vscode,打开文件夹,在终端处输入:

npm init

  会看到以下信息:

  之后会生成一个 package.json 文件。

  随后输入:

npm install electron --save-dev

  但我这里出现了这样的问题:

  这时候需要删除 .npmrc 文件,这个文件在 C:\Users\.npmrc,这个文件需要取消隐藏的项目:

  第二个问题是这样:

  

  这个是网络问题,我是直接用梯子下载的,所以重新安装了一遍就好了,安装成功是这样:

  如何来验证是否安装成功,输入 npx electron -v,如果显示以下信息则安装成功。

  或者输入 ./node_modules/.bin/electron -v 查看版本信息,但这时候又遇到一个问题,权限不够:

  我借鉴了这篇文章 无法加载文件xxx.ps1,因为在此系统上禁止运行脚本。_emsdk-main_qq_42541448的博客-CSDN博客,根据这个上面进行就可以完成。

  接下来输入 ./node_modules/.bin/electron 命令就可以进入 Electron 界面了,如果能进入这个界面那安装的就没有问题了。

  这个是项目中安装 electron 环境,在 cmd 中直接使用命令:npm install -g electron进行全局安装。

三、electron 下的 HelloWorld

  首先先创建文件 index.html,这个是我们写的网页,UI 都写在 html 里。

<!DOCTYPE html>
<html lang="en">    <!-- html是跟元素;lang="en" 表示文档使用的语言是英文 -->
<head><meta charset="UTF-8">  <!-- 文档使用的字符编码为 UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置了视口的宽度为设备宽度,并且初始缩放比例为1--><title>Hello World</title>  <!-- 设置标题 -->
</head>
<body>Hello World 
</body>
</html>

  之后创建 主进程 文件 main.js ,所有打开窗口的业务都要在这里面实现。

/* var允许声明一个变量而不指定其具体类型app 模块,它控制应用程序的事件生命周期。BrowserWindow 模块,它创建和管理应用程序窗口
*/
const { app, BrowserWindow } = require('electron')  // 将elctron里面的app模块和BrowserWindow模块分别赋值给app和BrowserWindow
const path = require('node:path')/* 创建 Electron 应用程序的窗口 */
const createWindow = () => {    // 箭头函数const win = new BrowserWindow({     // 创建win的窗口对象width: 500,height: 500,webPreference: {    // 创建的窗口设置WebPreferences,并指定了要预加载的JavaScript文件preload: path.join(__dirname, 'preload.js')/* __dirname 字符串指向当前正在执行脚本的路径 *//* path.join API 将多个路径联结在一起,创建一个跨平台的路径字符串 */}})win.loadFile('index.html')  // 加载一个 index.html 文件
}/* 在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口 */
app.whenReady().then(() => {        // 当检测到ready,创建窗口createWindow()app.on('activate', () =>{       // 应用程序激活时,触发activate事件if (BrowserWindow.getAllWindows().length === 0) createWindow()  // 获取当前打开的所有窗口,并判断窗口数量是否为0。如果当前没有打开的窗口,则调用createWindow()函数创建一个新窗口})
})app.on('window-all-closed', () =>{      // 监听'window-all-closed'if (process.platform !== 'darwin') app.quit()   // 在所有窗口关闭时,如果当前平台不是 macOS,则退出应用程序
})

  随后在终端输入 npm init --yes,这相当于就不用按这么多次 Enter 了。package.json 文件内容如下:

{"name": "01_helloworld","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .",    // 新加的"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

  然后创建 preload.js 文件:

/* 在窗口的DOM内容加载完成后,根据当前所使用的依赖的版本号,替换HTML文档中指定元素的文本内容所有的 Node.js API接口 都可以在 preload 进程中被调用
*/
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 install,执行 npm start,就可以呈现下面的界面:

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

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

相关文章

如有Kata

养成跑步的习惯&#xff0c;就能习惯性跑步&#xff0c;一有空就见缝插针抽空跑步。这是一层韵律感、完成感、美感、成就感。而一次跑步的一连串动作&#xff0c;是另一层韵律感、完成感、美感、成就感。所以这里就有了两层的韵律感、完成感、美感、成就感。如是如水漂荡漾。健…

【机器学习】一文掌握逻辑回归全部核心点(下)。

逻辑回归核心点-下 1、引言2、逻辑回归核心点2.5 特征工程2.5.1 特征缩放2.5.2 多项式特征 2.6 多分类2.6.1 一对多&#xff08;One-vs-Rest&#xff0c;OvR&#xff09;策略2.6.2 一对一&#xff08;One-vs-One&#xff0c;OvO&#xff09;策略2.6.2 比较 2.7 评估指标2.7.1 准…

动手做一个最小RAG——TinyRAG

Datawhale干货 作者&#xff1a;宋志学&#xff0c;Datawhale成员 大家好&#xff0c;我是不要葱姜蒜。 接下来我会带领大家一步一步地实现一个简单的RAG模型&#xff0c;这个模型是基于RAG的一个简化版本&#xff0c;我们称之为Tiny-RAG。Tiny-RAG是一个基于RAG的简化版本&am…

SpringBoot源码

SpringBoot核心前置内容 1.Spring注解编程的发展过程 1.1 Spring 1.x 2004年3月24日&#xff0c;Spring1.0 正式发布&#xff0c;提供了IoC&#xff0c;AOP及XML配置的方式。 在Spring1.x版本中提供的是纯XML配置的方式&#xff0c;也就是在该版本中必须要提供xml的配置文件…

八、词嵌入语言模型(Word Embedding)

词嵌入&#xff08;Word Embedding, WE&#xff09;&#xff0c;任务是把不可计算、非结构化的词转换为可以计算、结构化的向量&#xff0c;从而便于进行数学处理。 一个更官方一点的定义是&#xff1a;词嵌入是是指把一个维数为所有词的数量的高维空间&#xff08;one-hot形式…

小迪安全36WEB 攻防-通用漏洞XSS 跨站MXSSUXSSFlashXSSPDFXSS

#XSS跨站系列内容:1. XSS跨站-原理&分类&手法 XSS跨站-探针&利用&审计XSS跨站另类攻击手法利用 XSS跨站-防御修复&绕过策略 #知识点&#xff1a; 1、XSS 跨站-原理&攻击&分类等 2、XSS 跨站-MXSS&UXSS&FlashXss&PDFXSS 等 1、原…

HCS-华为云Stack-计算节点内部网络结构

HCS-华为云Stack-计算节点内部网络结构 图中表示的仅为计算节点是两网口的模式&#xff0c;如果是四网口模式&#xff0c;系统会再自动创建一个网桥出来 图中未画出存储平面和Internal Base平面&#xff0c;它们和tunnel bearing、External OM-样&#xff0c;都是通过trunk0的…

信息系统项目管理师006:车联网(1信息化发展—1.2现代化基础设施—1.2.3车联网)

文章目录 1.2.3 车联网1.体系框架2.链接方式3.场景应用 记忆要点总结 1.2.3 车联网 车联网是新一代网络通信技术与汽车、电子、道路交通运输等领域深度融合的新兴产业形态。智能网联汽车是搭载先进的车载传感器、控制器、执行器等装置&#xff0c;并融合现代通信与网络技术&…

Linux常用命令之top监测

(/≧▽≦)/~┴┴ 嗨~我叫小奥 ✨✨✨ &#x1f440;&#x1f440;&#x1f440; 个人博客&#xff1a;小奥的博客 &#x1f44d;&#x1f44d;&#x1f44d;&#xff1a;个人CSDN ⭐️⭐️⭐️&#xff1a;传送门 &#x1f379; 本人24应届生一枚&#xff0c;技术和水平有限&am…

for、while、do While、for in、forEach、map、reduce、every、some、filter的使用

for、while、do While、for in、forEach、map、reduce、every、some、filter的使用 for let arr [2, 4, 6, 56, 7, 88];//for for (let i 0; i < arr.length; i) {console.log(i : arr[i]) //0:2 1:4 2:6 3:56 4:7 5:88 }普通的for循环可以用数组的索引来访问或者修改…

代码随想录day32 Java版

62.不同路径 public static int uniquePaths(int m, int n) {int[][] dp new int[m][n];//初始化for (int i 0; i < m; i) {dp[i][0] 1;}for (int i 0; i < n; i) {dp[0][i] 1;}for (int i 1; i < m; i) {for (int j 1; j < n; j) {dp[i][j] dp[i-1][j]dp…

Java享元模式源码剖析及使用场景

享元模式 一、介绍二、基本原理三、企业资源管理系统中使用案例三、Java 中的字符串常量池使用了享元模式四、总结优缺点以及使用经验 一、介绍 享元模式是一种结构型设计模式&#xff0c;旨在最大程度地减少内存使用或计算开销。这种模式通过共享对多个类似对象实例所需的状态…

04 数据结构之队列

循环队列 /* squence_queue.h */ #ifndef _SQUENCE_QUEUE_H_ #define _SQUENCE_QUEUE_H_#include <stdio.h> #include <string.h> #include <stdlib.h>#define QUEUE_SIZE 128 #define DEBUG(msg) \printf("--%s--, %s", __func__, msg)typedef i…

SAP BTP Hyperscaler PostgreSQL都有哪些Performance监控 (一)

前言 SAP BTP云平台中&#xff0c;除了自身的HANA数据库作为首选以外&#xff0c;它还支持PostgreSQL的整套服务&#xff0c;并以PaaS的形式提供给客户。你可以按照实例为单位进行购买申请不同标准规格的PG实例&#xff0c;然后构建自己的业务逻辑。Hyperscaler是这套产品或方…

【Python-Docx库】Word与Python的完美结合

今天给大家分享Python处理Word的第三方库&#xff1a;Python-Docx。 什么是Python-Docx&#xff1f; Python-Docx是用于创建和更新Microsoft Word&#xff08;.docx&#xff09;文件的Python库。 日常需要经常处理Word文档&#xff0c;用Python的免费第三方包&#xff1a;Pyt…

【Linux】Shell及Linux权限

Shell Shell的定义 Shell最简单的定义是&#xff1a;命令行解释器。 Shell的主要任务&#xff1a;1. 将使用者的命令翻译给核心进行处理。2.将核心的处理结果翻译给使用者 为什么要有Shell? 使用者和内核的关系就相当于两个完全陌生的外国人之间的关系&#xff0c;他们要进…

springboot、vue、uniapp项目的部署和运行(超链接可直接跳过去)

springboot、vue项目环境配置 1、首先要安装jdk、maven、mysql、nodejs 软件安装 2、安装idea、HbuilderX、navicat 运行项目 3、运行springboot项目、运行vue项目、运行uniapp项目

Dockerfile编写实践篇

Docker通过一种打包和分发的软件&#xff0c;完成传统容器的封装。这个用来充当容器分发角色的组件被称为镜像。Docker镜像是一个容器中运行程序的所有文件的捆绑快照。当使用Docker分发软件&#xff0c;其实就是分发这些镜像&#xff0c;并在接收的机器上创建容器。镜像在Dock…

Linux:线程互斥与同步

目录 线程互斥 锁的初始化 加锁 解锁 锁的初始化 锁的原理 死锁 线程同步 方案一&#xff1a;条件变量 条件变量初始化 等待 唤醒 条件变量的代码示例 基于阻塞队列的生产消费模型 方案二&#xff1a;POSIX信号量 初始化信号量&#xff1a; 销毁信号量 等待信…

JAVA基础-数据结构一(线性表、链表、栈、队列)

一、数组线性表&#xff08;ADT&#xff09; 线性表&#xff1a;又称动态数组&#xff0c;核心是动态数组&#xff0c;可以自行扩容&#xff0c;支持增删改查四种功能 java中有ArrayList也可以自行扩容&#xff0c;二者功能较为相似&#xff0c;且ArrayList也支持转换为数组。 …