Можно ли вызвать код Ionic 4 / Capacitor Electron из части приложения Ionic?

Question

Я исследую использование Ionic 4 / Capacitor для таргетинга на Windows через опцию Electron, для приложения, в котором я хочу использовать SQLite.

Использование плагина Ionic Native SQLite , который переносит этот плагин Cordova , из коробки, насколько я вижу, поддержка Windows для UWP, а не для рабочего стола, которая работает с использованием Electron в оболочке Ionic Capacitor.

Мой план, должен был посмотреть, смогу ли я использовать пакет Electron SQLite , а затем вызвать его из моего приложения Ionic, создав класс-оболочку для нативного Ionic, подобный тому, который я использовал для получения поддержки браузера, выполнив thistutoral

Если я смогу вызвать код Electron из моего приложения Ionic, тогда я не могу понять, почему это не сработает.

Итак, мой вопрос здесь, могу ли я позвонить по коду (я добавлю функции для использования SQlite), который я добавляю в приложение Electron хостинга из кода Ionic (web)? И если да, то как?

Заранее спасибо залюбая помощь

[UPDATE1]

Попробовал следующее ...

На странице Ionic у меня есть обработчик нажатия кнопки, где я вызываю событие ..

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 я пытался ..

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

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

Но ни одна из них не работала.

Я должен упомянуть, что я знаю очень мало об Electron.Это мое первое знакомство с ним (через конденсатор)

Answer 1

Я выкопал это вчера и у меня есть пример для вас, используя угловой (это должно относиться и к ионному тоже).в вашем сервисе объявите require, чтобы мы могли использовать его

  //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 используется, когда у вас есть несколько браузеров, разговаривающих друг с другом в электронном режиме.поэтому в нашей ситуации это позволяет нашему веб-слою связываться с электронным материалом

Answer 2

На случай, если кому-то интересно, я так решил.Я использую 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();
});

Answer 3

Да, вы можете!Помните, что электрон использует хром, и у вас есть поддержка ?