Electron-开发第一个桌面应用

2024-05-26 11:24:37

Electron-开发第一个桌面应用

1.开始配置

开始一个electron桌面应用的开发，首先需要配置好三个文件+ package.json 文件，这个文件基本是开发标配了，主要是对Electron工程进行一些配置+ index.js    文件文件名可换，但是一般默认都是index+ index.html Electron桌面应用的入口文件，用于主窗口UI的桌面文件

通过npm init 脚手架来创建上述三个文件

实际上package.json中必要的字段就是前面几个，一个是name：表名称，version:表版本号， main:入口文件,
在package.json中的devDependencies 配置一下安装electron版本，可能你会奇怪已近全局安装了electron，怎么在这里还需要局部安装一下 electron，主要是因为启动起来方便，当然这里也可以选择本地不安装electron, 那么本地启动electron项目的时候就会略复杂，需要增加一个extern tool 的设置或者是在webstorm右上角用add configuration增加一个node的环境配置。
这里为了最简单，就本地再安装一次 electron。

开发代码

这里简单说明，就用最简单的代码来演示。index.html视图层就是展示一串字符串

在逻辑层的处理也很简单，首先引入electron这个模块，然后监听应用主体，当应用主体在系统上初始化完成之后再内嵌我们的页面（在这里就是index.html页面），代码如下：

解释下：

const {app, BrowserWindow} = require('electron');

这一句意思如下：

BrowserWindow:

electron提供的一个类，一个类可代表一个本地窗口，而这个窗口内嵌了v8内核的浏览器，这个浏览器内嵌本地页index.html）

app:
整个应用程序的本身，对整个应用程序有一些全局的事件。

然后既可以在项目的根目录下输入下面命令

electron .

注意electron 后面有个空格
实例如下：

至此，一个非常简单的基于electron的桌面应用程序就开发完成了。

Electron-开发第一个桌面应用相关推荐

云炬Qtpy5开发与实战笔记 1开发第一个桌面应用Hello World
云炬Qtpy5开发与实战笔记 0搭建开发环境(傻瓜式安装) 1.打开 Pycharm,选择 Create New Project,创建一个新项目 2.选择Pure Python表示创建一个纯Pytho ...
用Electron创建第一个桌面应用、打包并加密代码
参考教程:https://www.electronjs.org/docs/tutorial/quick-start https://www.cnblogs.com/FHC1994/p/10055698 ...
【React实战】create-react-app整合electron打造第一个桌面app
欢迎来到我的博客
Electron入门教程1 —— 编写第一个桌面应用程序
前言: 最近临时起意,想开发桌面应用程序,但是我们肯定都先会想到微软的C#.而我又不想花时间去学习C#,而且就算学了C#,还是很难快速开发出好看的Windows桌面应用.所以此时我就想,既然移动app ...
入坑 Electron 开发跨平台桌面应用
‍ 作为一个跨平台的桌面应用开发框架,Electron 的迷人之处在于,它是建立在 Chromium 和 Node.js 之上的 -- 二位分工明确,一个负责界面,一个负责背后的逻辑,典型的「你负责貌 ...
electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
Electron开发桌面应用
由 Bazzzinga威同学翻译自 Medium.https://medium.com/developers-writing/building-a-desktop-application-with- ...
前端开发人员的桌面应用神器 Electron
01 为什么用 JavaScript 来开发桌面应用? 曾经的 JavaScript 脆弱.简陋.甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScr ...
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器. ...
《ArcGIS Engine+C#实例开发教程》第一讲桌面GIS应用程序框架的建立
原文:<ArcGIS Engine+C#实例开发教程>第一讲桌面GIS应用程序框架的建立摘要:本讲主要是使用MapControl.PageLayoutControl.ToolbarCon ...

最新文章

热门文章