时间戳

首页 > 解决方案 > 使用 Electron 将 Angular 项目（进行 RESP API 调用）转换为桌面应用程序

javascript - 使用 Electron 将 Angular 项目（进行 RESP API 调用）转换为桌面应用程序

问题描述

我有一个功能齐全的 Angular 前端，它使 REST Api 调用在端口 8080 上运行的 Spring Boot 后端。我需要将此 Web 应用程序转换为桌面应用程序。我知道这很容易使用electron。我在这个问题下关注了几个线程，但找不到答案。我怎样才能通过修改这个 main.js 文件来实现这一点？或者我是否需要修改项目中进行 api 调用的每个地方？我已将应用程序加载到窗口，但它不与后端通信。

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

  let appWindow

function initWindow() {
appWindow = new BrowserWindow({
  width: 1000,
  height: 800,
  webPreferences: {
    nodeIntegration: true
  }
})

// Electron Build Path
appWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

// Initialize the DevTools.
appWindow.webContents.openDevTools()

appWindow.on('closed', function () {
  appWindow = null
})}

app.on('ready', initWindow)

// Close when all windows are closed.
app.on('window-all-closed', function () {

// On macOS specific close process
if (process.platform !== 'darwin') {
  app.quit()
}
})

app.on('activate', function () {
if (win === null) {
  initWindow()
}
})

标签： javascriptangulartypescriptelectron

解决方案

我认为转换您的 Angular 应用程序的最佳方法是，使用 Angular-electron 样板，将您的内容从您的应用程序移动到电子应用程序并进行配置。我建议您为此使用maximegris /angular-electron样板。

对于 API 调用，你现在不需要搞砸了main-process。Angular 应用程序将在 上运行renderer process并将您的应用程序逻辑保留在那里。

推荐阅读