web-dev-qa-db-fra.com

Passing Data à Windows dans Electron

J'apprends à utiliser Electron et à travailler avec plusieurs fenêtres et IPC. Dans mon script principal, j'ai les éléments suivants:

var storeWindow = new BrowserWindow({
  width: 400,
  height: 400,
  show: false
});

ipc.on('show-store-edit', function(event, store) {
  console.log(store);
  storeWindow.loadURL('file://' + __dirname + '/app/store.html');
  storeWindow.show();
});

Et dans le script de ma fenêtre principale, j'ai les éléments suivants à l'intérieur d'un gestionnaire d'événements de clic, tirant dans une liste de magasins:

$.getJSON("http://localhost:8080/stores/" + item.id).done(function(store) {
   ipc.send('show-store-edit', store);
});

Sur la console, j'imprime les données du magasin à partir de mon serveur. Ce que je ne comprends pas bien, c'est comment obtenir ces données dans la vue pour mon storeWindow:store.html. Je ne suis même pas sûr de gérer correctement la séquence d'événements, mais ils seraient:

  • cliquez sur Edit Store
  • obtenir des données de magasin du serveur
  • ouvre une nouvelle fenêtre pour afficher les données du magasin

ou

  • cliquez sur Edit Store
  • ouvre une nouvelle fenêtre pour afficher les données du magasin
  • obtenir des données de magasin du serveur

Dans ce dernier cas, je ne sais pas comment obtenir l'ID requis pour aller chercher le magasin auprès du storeWindow's script.

electron
32
Gregg

Pour envoyer des événements à une fenêtre particulière, vous pouvez utiliser webContents.send(EVENT_NAME, ARGS) ( voir documentation ). webContents est une propriété d'une instance de fenêtre:

// main process
storeWindow.webContents.send('store-data', store);

Pour écouter cet événement envoyé, vous avez besoin d'un écouteur dans un processus de fenêtre (rendu):

// renderer process
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('store-data', function (event,store) {
    console.log(store);
});
51
Michael Radionov

Vous avez besoin du module ipcMain pour y parvenir ... Comme indiqué dans l'API "Utilisé dans le processus principal, il gère les messages asynchrones et synchrones envoyés à partir d'un processus de rendu (page Web). Messages envoyés depuis un moteur de rendu seront émis vers ce module. "

Documents de l'API pour le module ipcMain: https://electronjs.org/docs/api/ipc-main

Pour utiliser ipcMain, vous devez avoir nodeIntegration activé sur webPreferences 

win = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
    }
})

Faites attention, cela peut entraîner des problèmes de sécurité.

Par exemple: supposons que nous voulions passer un fichier de configuration (json) à la page Web.

(Les trois points (...) représentent votre code qui est déjà placé dans le fichier, mais n'est pas pertinent pour cet exemple)

main.js 

...

const { readFileSync } = require('fs') // used to read files
const { ipcMain } = require('electron') // used to communicate asynchronously from the main process to renderer processes.
...

// function to read from a json file
function readConfig () {
  const data = readFileSync('./package.json', 'utf8')
  return data
}

...
// this is the event listener that will respond when we will request it in the web page
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)
  event.returnValue = readConfig()
})
...

index.html 

...    
<script>
    <!-- import the module -->
    const { ipcRenderer } = require('electron')

    <!-- here we request our message and the event listener we added before, will respond and because it's JSON file we need to parse it -->
    var config = JSON.parse(ipcRenderer.sendSync('synchronous-message', ''))

    <!-- process our data however we want, in this example we print it on the browser console -->
    console.log(config)

     <!-- since we read our package.json file we can echo our electron app name -->
     console.log(config.name)
</script>

Pour voir la console du navigateur, vous devez ouvrir les outils de développement, à partir du menu Electron par défaut ou de votre code. p. Ex. à l'intérieur de la fonction createWindow ()

 win.webContents.openDevTools()
1
user8581607