65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Electron 创建混合桌面应用程序

Mohamed Elkhidir
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (5投票s)

2016年4月8日

CPOL

6分钟阅读

viewsIcon

23137

使用 Web 开发和 Electron 框架创建简单混合桌面应用程序的循序渐进指南

引言

在过去的几周里，我一直在寻找简单问题的答案。我开始学习 Web 开发，并希望将这些知识应用于实现一个可以作为桌面应用程序的应用程序，因此我偶然发现了 Electron 框架，这是一个用于从 Web 应用程序创建桌面应用程序的框架，或者说是混合桌面开发的框架。我的目标非常简单，我想创建一个正在运行的 Web 应用程序，将其构建成一个混合桌面应用程序，然后轻松地将该应用程序分发给我的客户。

我的所有问题的答案都可以在互联网上找到，但它们分散在许多地方，而且大多数都假设您有处理 node.js、grunt 任务和其他技术的经验。在获得应用我的想法所需的知识后，现在我想分享这些知识，并将所有这些分散的知识点放在一个地方，以便任何人都可以轻松找到它们。

本教程将涵盖三个简单的领域

  1. 如何利用您的 Web 开发知识创建一个简单的桌面混合应用程序
  2. 如何构建该应用程序以在不同的操作系统上执行
  3. 如何将其打包并分发为可安装产品

但 Electron 是什么？

Electron 是 Github 的一个开源框架，它允许您利用您的 Web 开发知识轻松构建桌面应用程序。它提供了许多原生应用程序的功能，如安装程序、自动更新、崩溃报告和通知。您可以将 Electron 简单地看作是您的 Web 应用程序的包装器，它会创建可在不同操作系统上运行的可执行文件，并提供与底层操作系统通信的方式。这样，您就不需要为每个操作系统创建单独的应用程序。

Using the Code

创建一个简单的 Electron 应用

您需要知道，使用 Electron 创建的最简单的混合桌面应用程序包含三个文件

  • Index.Html 是一个 HTML 文档，包含您想显示的 Web 内容
  • Main.Js 是一个 JavaScript 文件，它将启动应用程序并在操作系统中创建一个容器来渲染 HTML 文件
  • Package.json 是一个配置文件，其中包含您的应用程序应启动的文件名以及您的应用程序依赖的依赖项列表

您可以从 https://github.com/atom/electron-quick-start 安装一个示例应用程序，而不是自己创建这些文件。

警告：在本教程中，您将接触到很多命令行命令，我知道有时这似乎令人沮丧，但您会发现这些命令非常简单易执行。

在我们继续之前，最重要的一件工具是我们需要的 Node.js，您可以从 https://node.org.cn/en/download/ 下载。该工具使我们能够访问许多我们需要的 JavaScript 库，这些库将有助于简化我们的实现过程。

所以，下载了这个简单的应用程序后，您可以稍微调整一下 Index.html 文件，使其看起来像这样

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>First Hybrid app!</title>
  </head>
  <body>
    <h1>Hello From Electron Side!</h1>   
  </body>
</html>

如果您决定不下载示例代码，而是想从头开始创建文件，那么它们应该看起来像这样

Main.js

'use strict';

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

package.json

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/atom/electron-quick-start.git"
  },
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "bugs": {
    "url": "https://github.com/atom/electron-quick-start/issues"
  },
  "homepage": "https://github.com/atom/electron-quick-start#readme",
  "devDependencies": {
    "electron-prebuilt": "^0.36.0"
  }
}

现在我们已经创建了有史以来最简单的 Electron 应用程序，现在我们需要构建它并在我们的操作系统上进行测试。在本教程中，我将使用 Windows 操作系统，但我相信这个过程对于 Linux 和 OS X 来说是相同的。

构建和运行应用程序

让乐趣开始吧！

如果您安装了预构建的示例项目，则可以忽略此步骤，直接进入下一个步骤；如果没有，那么我们需要安装我们配置文件中列出的依赖项，为此，请打开命令行并更改当前目录到包含这三个文件的目录，我们将这个文件夹称为根文件夹或根目录，并在本文的其余部分使用它来引用，然后执行此命令

npm install

这将安装您配置文件中列出的依赖项。

现在，我们将安装我们在安装 node.js 时提到的预构建包之一，我们将安装的库称为 electron-packager，它将把我们的三个文件打包成一个 OS 可执行文件。要安装该包，请在命令行工具中执行下一个命令

npm install electron-packager -g

这里的 -g 表示该库将在机器上全局安装，以后我们可以重复使用它。

现在打开您的 package.json 文件，并将此脚本添加到您的 scripts 部分

"build": "electron-packager . myapp --platform=win32 --arch=x64 version=0.36.12"

scripts 部分现在看起来像这样

"scripts": {
    "start": "electron main.js",
    "build": "electron-packager . --platform=win32 --arch=x64"
  }

然后，要运行此 script，请从您的命令行工具执行

npm run build

这将执行脚本并将您的文件打包成 Windows x64 的可执行文件。您可以在根目录中新创建的名为 version=0.36.12-win32-x64 的文件夹中找到可执行应用程序，该文件夹的命名显然是根据我们在构建脚本中的设置。您可以在 https://npmjs.net.cn/package/electron-packager 找到平台和架构的可用选项。

现在我们已经有了一个作为桌面应用程序运行的 Web 应用程序。从现在开始，您可以只修改您的 HTML 文件或 JS 文件，而无需再次执行构建脚本。您可以在新目录（根文件夹 -> version=0.36.12-win32-x64 -> resources-> app）中找到您的源文件，您可以修改它们并直接运行可执行文件来查看更改。

为您的应用程序创建安装程序

当然，您不想复制所有这些文件并将它们发送给您的朋友或客户，所以让我们创建一个可执行文件，您可以将其分发并在其他机器上使用。要创建安装程序，我们需要一个名为“grunt electron installer”的库以及该库依赖的其他两个库，我们还需要在根文件夹中添加一个新的配置文件。

要添加库，请按顺序执行这些命令

npm install grunt-cli -g
npm install grunt
npm install grunt-electron-installer

在您的根文件夹中，添加一个新文本文件并将其重命名为 gruntfile.js。此文件的内容如下所示

module.exports = function (grunt) {
  'use strict';
 
  grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
    'create-windows-installer': {
  x64: {
    appDirectory: 'version=0.36.12-win32-x64',
    outputDirectory: 'build/',
    authors: 'Banan IT.',
    exe: 'BSc.exe',
    noMsi:true
  }
}
});

grunt.loadNpmTasks('grunt-electron-installer');
}

这段简单的代码是一个 JavaScript 函数，它将为我们运行一个任务来创建安装程序。请注意，app 目录是指包含我们的可执行文件的文件夹，output 目录是指将包含我们的安装程序的文件夹。

要创建安装程序，请执行此命令

grunt create-windows-installer

如果命令执行成功，您现在就可以在 gruntfile.js 中列出的 output 目录中找到准备好的安装程序。

© . All rights reserved.