如何使用electron开发基础桌面应用程序

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。下面我们将简单的介绍Electron开发j基础桌面应用程序的过程。

安装Electron相关依赖。
我们需要在前端项目中安装依赖。

npm install electron -D

开发环境启动electron

在 Electron 中有主进程和渲染进程两个重要的概念，我们在主进程里面用 Node.js 代码调用 Electron 封装好的 API 来创建窗口，管理应用整个生命周期，而在渲染进程里面加载传统的 Web 界面。

整个桌面应用的入口在主进程里面，我们需要在目录中创建 index.js 作为入口。

然后需要在 package.json 中做以下指定，让electron知道入口文件的位置（main是index.js文件的路径，electron是启动命令）：

"main": "/index.js",
"scripts": {
  "electron:start": "electron ."
},

初步的建设完毕之后，我们就要编写index.js文件：

//引入两个模块：app 和 BrowserWindow
//app 模块，控制整个应用程序的事件生命周期。
//BrowserWindow 模块，它创建和管理程序的窗口。
const { app, BrowserWindow } = require('electron')

//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口
app.whenReady().then(() => {
  //创建一个窗口
  createWindow()
})

function createWindow() {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 })
  // 根据开发需求完成下面两种加载方式
  // 窗口加载 URL
  mainWindow.loadURL('https://www.csdn.net/') 

  // 窗口本地前端应用程序打包文件
  mainWindow.loadFile("./dist/index.html")
}

在index.js文件中我们需要创建应用程序窗口，创建加载完之后，我们可以根据需求完成应用程序页面的加载。

如果是用loadURL进行加载就是直接通过访问网页的方式加载页面，好处是如果页面出现大更新，打包后安装的应用程序不用进行安装包更新，只需要部署的页面进行替换，坏处是加载速度是通过网速控制的，如果网络不好会导致页面都不显示的情况。

如果是用loadFile进行加载前端打包后的文件，页面出现大更新，应用程序就需要进行安装包更新，但是好处是页面加载速度快，网络不好的情况也不会导致页面的崩溃。

同时BrowserWindow里可以配置关于应用程序壳子的相关配置，还有其他一些electron的详细配置以及结合前端页面调用系统服务等相关功能这里就先不做介绍，后续文章会介绍详细内容。

到此为止一些简单的开发环境启动electron配置就完结了，只需要当前目录启动一下命令就可以看见开发环境的桌面应用程序情况。

npm run electron:start

Electron打包成应用程序及安装包

Electron打包应用打包方式有很多，其中 electron-builder和 electron forge是较为常见的。下面主要介绍electron-builder这种打包方式。

首先需要使用 npm 安装 Electron Builder：

npm install electron-builder --save-dev

然后我们许要配置 package.json 文件，添加一些字段来配置应用程序的打包和发布。
其中 build 字段用于配置应用程序的构建选项。
directories 字段用于配置应用程序的源代码和构建输出目录。
repository 字段用于配置应用程序的源代码仓库地址。
下面我们以一个打包成win平台应用程序安装包的 package.json 文件的实例代码为例：

{
  "name": "MyElectron",
  "version": "1.3.0",
  "main": "index.js",
  "description": "MyElectron",
  "scripts": {
    "serve": "electron .",
    "build": "electron-builder",
  },
  "build": {
    "productName": "MyElectron", 
    "directories": {
      "buildResources": "build",   //指定打包需要的静态资源，默认是build
      "output": "MyElectron" // 输出路径
    },
    "win":{
      "target":"nsis",
      "icon":"assets/icon.ico"
    },
    "nsis": { //NSIS 只适用于 Window 平台
      "oneClick": false, // 创建一键安装程序还是辅助安装程序
      "allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
      "allowToChangeInstallationDirectory": false, // 是否允许修改安装路径
      "createStartMenuShortcut": true, // 是否创建开始菜单快捷方式
      "installerIcon": "electron/icons/main/icon.ico", // 安装图标
      "uninstallerIcon": "electron/icons/delete/icon.ico",  // 卸载图标
      "installerHeaderIcon": "electron/icons/main/icon.ico", // 头部图标
      "createDesktopShortcut": true, // 是否开始桌面快捷方式
    },
    "extraFiles": [
      "sources"
    ],
  },
}

在 build 字段中，有一些常用的构建选项:
appId：应用程序的 ID。
productName：应用程序的名称。
files：要打包的文件和文件夹。
extraFiles：要携带的文件和文件夹。
directories：源代码和构建输出目录。
mac、win、linux：用于配置每个平台的构建选项。
dmg、nsis、deb：用于配置每个平台的安装包选项。

其余的一些参数设置可以去https://www.electron.build/查看相关配置。

配置完package.json 文件后，就可以执行以下命令进行打包。

npm run build

命令执行完毕后会在directories指定的文件夹输出安装包和绿色版使用文件程序。至此一个简单桌面应用程序就生成了。
至于Electron其他相关的使用例如更新、发布到应用平台、或者利用Electron实现桌面应用程序的功能等可以查看官方文档或者相关论坛文章进行继续的学习。后续也将添加相关Electron关于开发桌面应用程序的更多相关文章。