Electron-开发第一个桌面应用

阳光穿透心脏的1/2处 2022-03-15 14:24 598阅读 0赞

Electron-开发第一个桌面应用

1.开始配置

  1. 开始一个electron桌面应用的开发，首先需要配置好三个文件
  2.  + package.json 文件，这个文件基本是开发标配了，主要是对Electron工程进行一些配置
  3.  + index.js    文件文件名可换，但是一般默认都是index
  4.  + 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页面），代码如下：
在这里插入图片描述

解释下：

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

这一句意思如下：

BrowserWindow:

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

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

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

  1. electron .

注意electron 后面有个空格
实例如下：
在这里插入图片描述
至此，一个非常简单的基于electron的桌面应用程序就开发完成了。

发表评论

表情：
评论列表 （有 0 条评论，598人围观）

还没有评论，来说两句吧...

相关阅读