javascript - 使用 Electron 将 Angular 框架应用程序转换为桌面应用程序

Question

项目描述:

我有一个功能性前端 angularjs 应用程序，它与部署在 中的另一个后端 Java 应用程序通信 Tomcat 在不同的端口(8443)上运行。我一直在网络浏览器上运行它，但现在我想将它作为桌面应用程序运行。我一直以 grunt serve 运行它用于开发环境和grunt --clean --prod用于生产和分销。
当使用 grunt serve 在开发模式下运行时，应用程序在 http://localhost:9000/?baseApiUrl=https://localhost:8443&tenantIdentifier=demo 上运行

问题:

我如何让应用程序在 Electron 开发模式下运行，然后将其打包用于生产？我试过How to port an existing angular app to electron?但它无法与端口上的支持应用程序通信。

请帮忙。

Answer 1

方法如下，

1. 样板代码。

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  //Take note of this line.
  //mainWindow.loadURL(`http://localhost:9000`);

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}
app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
 }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

2. 注意行 mainWindow.loadURL('file://${__dirname}/index.html') .由于您的用例是与在端口上运行的另一个后端应用程序通信，因此使用 文件 协议(protocol)( file://<uri> )不起作用，您需要与 http 协议(protocol)上的端口进行通信。

3. 为此，我建议在您的 Electron 应用程序中运行静态文件 http 服务器，通过本地服务器为您的应用程序提供服务器，并替换此 mainWindow.loadURL('file://${__dirname}/index.html')符合 mainWindow.loadURL(`http://localhost:9000`)这。

编辑 1:
你可以像这样运行一个非常基本的静态文件服务器，但是肯定有更好的方法来编写它。

var express = require('express');
var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(9000);

编辑 2:

在评论中进行了一些讨论后，我决定克隆 repo 并添加 Electron 分开我自己，这就是我的做法。

1. 通过运行安装以下依赖项，

npm install --save electron express

2. index.js 文件

const electron = require('electron');
const path = require('path');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

var express = require('express');
var server = express();
let dir = path.join(__dirname, './dist/community-app');
server.use('/', express.static(dir));
server.listen(9000);

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadURL(`http://localhost:9000`);

    mainWindow.on('closed', function () {
    mainWindow = null;
    });
}
app.on('ready', createWindow);

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

3. 在您的 package.json 中添加以下脚本

"scripts": {
//...
  "start": "electron ."
 },

4. 结果



PS:我在构建angularjs项目时遇到了一些麻烦，因为项目中没有windows的构建脚本，因此页面中缺少一些样式。

Git 仓库:

https://github.com/openMF/community-app