Electron[3] 基础配置准备和Electron入门案例

1 背景

上一篇文章已经分享了,如何准备Electron的基础环境了。但是博客刚发才一天,就发现有人问问题了。经过实践发现,严格按照作者的博客教程走是不会有问题的,其中包括安装的环境版本等都要一致。因为昨天发的博客,今天我发现,Electron就已经从27.0.2升级到27.0.3了。

2 package.json配置

配置main属性,main属性表示Electron的主程序的入口(Electron里头区分主程序渲染进程,简单理解:主程序就是Electron[负责跟操作系统交互的程序],渲染进程就是我们常规的前端页面程序了)。笔者配置如下:

  "main": "main.js",

表示主程序的入口文件为跟package.json一个层级的main.js文件。所以这个时候你就可以立马创建一个空的main.js了,如下:

2.1 启动命令配置

检查package.json的scripts节点是否已经配置了如下的启动命令:

  "scripts": {"start": "electron .",

 如果有,就忽略,如果没有的话,配置下,待会运行项目依赖这个命令行。

3 main.js编写

主程序,需要包含桌面应用的入口,也就是我们前端界面的index.html。下面是一个最简单的main.js案例:

	const { app, BrowserWindow} = require('electron')/*** 创建窗口*/function createWindow () {const mainWindow = new BrowserWindow({width: 800,height: 600})// 窗口全屏// mainWindow.fullScreen = true// 禁止手动调整窗口大小// mainWindow.resizable = false// 加载要打包的html文件 index.htmlmainWindow.loadFile('./src/helloWorld.html')// 默认打开调试工具mainWindow.webContents.openDevTools()}/*** 监听应用状态*/app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}})

 上面的案例,可以直接复制到我们刚刚创建的main.js里头。不用做任何的调整,相关的代码块也已经做了注释了。

需要注意的一个就是,我们加载的前端入口路径是:./src/helloWorld.html,因此我们需要在当前项目下面创建src文件夹,并且创建hellowWorld.html文件,如下:

3.1 helloWorld.html编写

helloWorld.html里头的内容就随意了,主要是为了入门案例的演示。大家要是懒得话,可以直接复制下面的代码即可:

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello World</title>
</head>
<body><h1>Electron</h1>,您好!
</body>
</html>

4 第一个入门案例运行

vscode的terminal终端上执行如下命令:

npm start

就会看到Electron项目启动了,效果如下:

如上图,效果像打开了F12的浏览器。其中右边的调试窗口是因为我们在main.js里头设置了:

// 默认打开调试工具
mainWindow.webContents.openDevTools()

这个很重要,后面的开发过程要用到,所以我就直接打开了。

好了。最简单的Electron的案例,到此就结束了。开胃菜,不知道是否能够调起大家的胃口,如果可以的话,后面还有加餐菜,大家感兴趣的话,可以继续看下一篇。

下一篇介绍,最简单的Electron桌面应用打包。

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

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

相关文章

【论文阅读】Equivariant Contrastive Learning for Sequential Recommendation

【论文阅读】Equivariant Contrastive Learning for Sequential Recommendation 文章目录 【论文阅读】Equivariant Contrastive Learning for Sequential Recommendation1. 来源2. 介绍3. 前置工作3.1 序列推荐的目标3.2 数据增强策略3.3 序列推荐的不变对比学习 4. 方法介绍4…

kafka问题汇总

报错1&#xff1a; 解决方式 1、停止docker服务   输入如下命令停止docker服务 systemctl stop docker 或者service docker stop1   停止成功的话&#xff0c;再输入docker ps 就会提示出下边的话&#xff1a; Cannot connect to the Docker daemon. Is the docker daem…

汽车标定技术(四)--问题分析:多周期测量时上位机显示异常

目录 1.问题现象 2.数据流分析 ​​​​3.代码分析 3.1 AllocDAQ 3.2 AllocOdt 3.3 AllocOdtEntry 4.根因分析及解决方法 4.1 根因分析 4.2 解决方案 1.问题现象 在手撸XCP代码时&#xff0c; DAQ的实现是一大头痛的事情。最初单周期实现还好一点&#xff0c;特别是…

聊一聊关于手机Charge IC的电流流向

关于手机Charge&#xff0c;小白在以前的文章很少讲&#xff0c;一是这部分东西太多&#xff0c;过于复杂。二是总感觉写起来欠缺点什么。但后来想一想&#xff0c;本是抱着互相学习来写文章的心理态度&#xff0c;还是决定尝试写一些。 关于今天要讲的关于手机Charge的内容&a…

Visual Studio Code 常用快捷键大全

Visual Studio Code 常用快捷键大全 快捷键是编码过程中经常使用&#xff0c;且能够极大提升效率的部分&#xff0c;这里给大家介绍一些VS Code中非常有用的快捷键。 打开和关闭侧边栏 Mac — Command B Windows — Ctrl B Ubuntu — Ctrl B 选择单词 Mac — Command D …

本地电脑监控软件

本地电脑监控软件是一种用于监控计算机使用行为的软件&#xff0c;它可以帮助企业管理者了解员工的工作状态和行为&#xff0c;保护企业的计算机资源。 本地电脑监控软件可以监控员工的计算机使用行为&#xff0c;包括屏幕监控、键盘记录、文件操作等。这些功能可以帮助企业管理…

FFmpeg直播能力更新计划与新版本发布

// 编者按&#xff1a;客户端作为直接面向用户大众的接口&#xff0c;随着技术的发展进化与时俱进&#xff0c;实现更好的服务是十分必要的。FFmpeg作为最受欢迎的视频和图像处理开源软件&#xff0c;被相关行业的大量用户青睐&#xff0c;而随着HEVC标准的发布到广泛使用&am…

ClickHouse开发系列

一、 ClickHouse详解、安装教程_clickhouse源码安装 二、ClickHouse 语法详解_clickhouse讲解 三、ClickHouse SQL 操作语句详解 四、ClickHouse 高级教程—官方原版 五、ClickHouse主键索引最佳实践 六、MySQL与ClickHouse集成 七、ClickHouse 集成MongoDB、Re…

制造业企业设备管理常见的三个问题及对应的解决方案

当今的市场如同茫茫大海&#xff0c;既充满机遇&#xff0c;也伴随着波动的风险。在现代制造业中&#xff0c;企业常常面临着各种挑战&#xff0c;这些挑战可能妨碍其发展和竞争力。但制造企业往往具备能够解决挑战的能力&#xff0c;借助软件工具的力量&#xff0c;可以更好地…

微信小程序-form表单-获取用户输入文本框的值

微信小程序-form表单-获取用户输入文本框的值 data: {userName: ,userPwd:""},//获取用户输入的用户名 userNameInput:function(e) {this.setData({userName: e.detail.value}) }, passWdInput:function(e) {this.setData({userPwd: e.detail.value}) }, //获取用户输…

美国Embarcadero产品经理Marco Cantù谈Delphi/C++ Builder目前开发应用领域

美国Embarcadero产品经理Marco Cant 日前在欧洲的一次信息技术会议上谈到了Delphi/C Builder目前开发应用领域&#xff1a;RAD Studio Delphi/C Builder目前应用于哪些开发领域&#xff1f;使用 Delphi 和 CBuilder 进行开发为当今众多企业提供了动力。 航空航天 大型数据采集 …

WPF中的Binding的常见知识点与技巧

完全来源于十月的寒流&#xff0c;感谢大佬讲解 在XAML中&#xff0c;可以绑定到许多不同类型的数据源和属性。以下是一些可以绑定的常见数据源和属性&#xff1a; 属性&#xff1a;可以绑定到对象的属性&#xff0c;例如控件的Text、Visibility、IsEnabled等属性。 集合&am…