Electron-开发第一个桌面应用

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

# Electron-开发第一个桌面应用 #

## 1.开始配置 ##

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

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

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

## 开发代码 ##

这里简单说明，就用最简单的代码来演示。index.html视图层就是展示一串字符串  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]  
在逻辑层的处理也很简单，首先引入electron这个模块，然后监听应用主体，当应用主体在系统上初始化完成之后再内嵌我们的页面（在这里就是index.html页面），代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 2]

解释下：

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

这一句意思如下：

**BrowserWindow**:

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

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

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

electron .

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]: /images/20220315/719200697ea74fdc90e0b8838771a521.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220315/ba0f772017b84af089a132647665df8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70 2]: /images/20220315/b80a4332fb4a4661bb8f9dc63d5fb21f.png
[20190303192648774.gif]: /images/20220315/3811dcd79e944af9862c14d0630adb04.png