我可以从应用程序的离子部分调用离子4 /电容器电子代码吗？ [英] Can I call Ionic 4 / Capacitor Electron code from the Ionic part of the application?

问题描述

对于使用SQLite的应用程序，我正在研究通过Electron选项使用Ionic 4 / Capacitor将Windows定位为Windows。

I am investigating using Ionic 4/ Capacitor to target Windows via the Electron option, for an application where I want to use SQLite.

使用离子本机SQLite 插件，该插件包装了此Cordova插件，开箱即用，据我所知，Windows支持的是UWP，而不是台式机，它是在离子电容器中使用Electron运行的包装器。

Using the Ionic Native SQLite plugin, which wraps this Cordova plugin, out of the box, as far as I can see, the Windows support is for UWP, and not Desktop, which runs using Electron in Ionic Capacitor wrapper.

我的计划是查看是否可以使用 Electron SQLite 程序包，然后通过为Ionic本机创建一个包装类来从我的Ionic应用程序中调用该包装类，类似于我通过遵循这门课

My plan, was to see if I could use Electron SQLite package, and then call this from my Ionic application by making a wrapper class for the Ionic native similar to what I used to get browser support by following this tutoral

如果我可以从Ionic应用程序中调用Electron代码，那么我将不明白为什么这行不通。

If I can call the Electron code from my Ionic app, then I can't see why this wouldn't work.

因此，我的问题是，我可以调用代码（我将添加函数以使用SQlite）还是从Ionic中添加到托管的Electron应用程序（ Web）代码？如果是，怎么办？

So, my question here is, can I call code (I will add functions to use the SQlite) I add to the hosting Electron application from within the Ionic (web) code? And if so, how?

在此先感谢您的帮助

[UPDATE1]

尝试以下操作...

从Ionic页面，我有一个引发事件的按钮单击处理程序。

From an Ionic page, I have a button click handler where I raise an event..

export class HomePage {

 public devtools() : void {
  let emit = new EventEmitter(true);
  emit.emit('myEvent');

   var evt = new CustomEvent('myEvent');
   window.dispatchEvent(evt);
  }

然后在Electron项目中 index.js ，我尝试过。.

Then within the Electron projects index.js, I tried..

    mainWindow.webContents.on('myEvent', () => {
      mainWindow.openDevTools();
    });

    const ipc = require('electron').ipcMain
    ipc.on('myEvent', (ev, arg) => {
      mainWindow.openDevTools();
    });

但两者均无效。

我应该提到我对电子知之甚少。这是我第一次接触它（通过电容器）

I should mention I know very little about Electron. This is my first exposure to it (via Capacitor)

推荐答案

如果有人感兴趣，这就是我解决的方法。
我正在使用Ionic 4 / Capacitor + Vue 3。

In case someone is interested, this is how I solved this. Im am using Ionic 4 / Capacitor + Vue 3.

在我的输入文件（app.ts）中，我声明了一个名为Window的全局接口，如下所示：

In my entry file (app.ts) I have declared a global interface called Window as follows:

// app.ts
declare global { interface Window { require: any; } }

然后，我写了以下课程：

Then, I have written the following class:

// electron.ts
import { isPlatform } from '@ionic/core';

export class Electron
{
    public static isElectron = isPlatform(window, 'electron');
    public static getElectron()
    {
        if (this.isElectron)
        {
            return window.require('electron');
        }
        else
        {
            return null;
        }
    }
    public static getIpcRenderer()
    {
        if (this.isElectron)
        {
            return window.require('electron').ipcRenderer;
        }
        else
        {
            return null;
        }
    }
    public static getOs()
    {
        if (this.isElectron)
        {
            return window.require('os');
        }
        else
        {
            return null;
        }
    }
}

我这样使用：

//electronabout.ts
import { IAbout } from './iabout';
import { Plugins } from '@capacitor/core';
import { Electron } from '../utils/electron';

export class ElectronAbout implements IAbout
{
  constructor() { }
  public async getDeviceInfo()
  {
    let os = Electron.getOs();
    let devInfo =
    {
      arch: os.arch(),
      platform: os.platform(),
      type: os.type(),
      userInfo: os.userInfo()
    };

    return devInfo;
  }
  public async showDeviceInfo()
  {
    const devInfo = await this.getDeviceInfo();
    await Plugins.Modals.alert({ title: 'Info from Electron', message: JSON.stringify(devInfo) });
  }
}

这是可行的，但是我当然仍然需要重构电子类（electron.ts）。最好使用单例模式。

This is working but, of course, I still need to refactor the Electron class (electron.ts). Probably using the singleton pattern is a better idea.

我希望这会有所帮助。

更新

您可以像这样从渲染流程与主流程（index.js）进行通信：

You can communicate from the render process with your main process (index.js) like this:

//somefile.ts
if (Electron.isElectron)
{
     let ipc = Electron.getIpcRenderer();
     ipc.once('hide-menu-button', (event) => { this.isMenuButtonVisible = false; });
 }

//index.js
let newWindow = new BrowserWindow(windowOptions);
newWindow.loadURL(`file://${__dirname}/app/index.html`);
newWindow.webContents.on('dom-ready', () => {
         newWindow.webContents.send('hide-menu-button');
         newWindow.show();
});

这篇关于我可以从应用程序的离子部分调用离子4 /电容器电子代码吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！