Question

我正在研究使用Ionic 4 /电容器通过Electron选项将Windows定位到我想使用SQLite的应用程序。

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

我的计划是看我是否可以使用Electron SQLite软件包，然后通过为Ionic本机创建一个包装器类（类似于我过去通过跟随{{ 3}}

如果我可以从Ionic应用程序中调用电子代码，那么我将不明白为什么这不起作用。

所以，我的问题是，我可以调用代码（我将添加功能以使用SQlite）是从Ionic（网络）代码中添加到托管的Electron应用程序中吗？ ，如何？

在此先感谢您的帮助

[UPDATE1]

尝试了以下内容...

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

export class HomePage {

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

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

然后在电子项目index.js中尝试。.

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

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

但是都没有。

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

Answer 1

可以！记住，电子使用铬，并且您有支持

Answer 2

我昨天对此进行了深入研究，并为您提供了使用angular的示例（这也适用于离子）。在您的服务中声明需要，以便我们可以使用它

  //Below your imports
  declare function require(name:string);

然后在您要在其中使用的任何函数中

// Require the ipcRenderer so we can emit to the ipc to call a function
// Use ts-ignore or else angular wont compile
// @ts-ignore
const ipc = window.require('electron').ipcRenderer;
// Send a message to the ipc
// @ts-ignore
ipc.send('test', 'google');

然后在电子文件夹中的已创建index.js中

// Listening for the emitted event
ipc.addListener('test', (ev, arg) => {
    // console.log('ev', ev);
    console.log('arg', arg);
});

它可能不是访问它的正确方法，而是我能找到的最佳方法。根据我的理解，ipcRenderer用于在电子中有多个浏览器相互通信的情况。因此在我们的情况下，它可以使我们的Web层与电子物质进行通信

Answer 3

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

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

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

然后，我写了以下课程：

// 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类（electron.ts）。可能使用单例模式是一个更好的主意。

我希望这会有所帮助。

更新

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

//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 /电容器电子代码吗？

3 个答案: