Как вызвать функцию - renderer.js / main. js с веб-страницы в электронном виде.

Question

Новичок ie для электронов, я создал простое веб-приложение с React JS и могу просматривать его в окне, вызывая

window.loadFile('./build/index.html');

Теперь я хотел бы вызвать функцию расположенный в скажем renderer.js / main. js, который должен прочитать файловую систему и вернуть данные в веб-приложение.

Я уже пробовал это в рендерере. js

const { ipcRenderer } = require('electron');

document.getElementById('#button').addEventListener('click', function (event) {
    //read file contents
    console.log('file contents');
});

Но здесь есть 2 проблемы

1. Элемент управления от средства визуализации. js, вместо этого я хотел бы, чтобы элемент управления был на веб-странице React.
2. прочитанные данные должны быть возвращены на веб-страницу, чтобы их можно было отобразить на веб-странице.

Answer 1

Вы должны иметь возможность импортировать / запрашивать ipcRenderer непосредственно в ваших скриптах реагирующих компонентов и, возможно, загружать файл в ловушку жизненного цикла. 'Renderer. js' - это всего лишь один из способов выполнения клиентской стороны javascript на (электронном) веб-странице, но любой другой способ также помогает.

Если вы не можете импортировать или требовать электрон из веб-приложения (я еще не играл с электронно-реактивным шаблоном), тогда вы могли бы написать так называемый скрипт предварительной загрузки, загрузить его при создании окна браузера (см. эту документацию) и поместить в окно ipcRenderer, например: Итак:

const {ipcRenderer} = require('electron')
window.ipcRenderer = ipcRenderer

Затем вы можете получить к нему доступ из приложения реакции.

Answer 2

Вы строите свой электронный рендерер, используя React.

Пожалуйста, отметьте это, чтобы очистить , что является основным процессом и рендерером.

как общаться между реагировать и электрон

Это ответ, который я опубликовал ранее. Не стесняйтесь проверить это.

А вот предварительное требование.

let mainWindow = new BrowserWindow(
  {
    width: 800,
    height: 600,
    webPreferences:{
      nodeIntegration:true
    }
  });

Вы должны включить флаг nodeIntegration при создании BrowserWindow. Так что вы можете использовать любой Nodejs API в вашем рендерере

Answer 3

Вы можете напрямую использовать fs внутри прослушивателя событий

const { ipcRenderer } = require('electron');
const fs = require("fs");

document.getElementById('#button').addEventListener('click', function (event) {
  console.log(fs.readFileSync("some/file/path", "utf8"));
});

Electron предоставляет полный доступ к Node.js как в основном процессе, так и в процессе визуализации

https://www.electronjs.org/docs/tutorial/application-architecture#usingnodejs -apis